先月作った「ペイント練習用のチャート隠しツール」と、
https://shunichi.hosono.com/?p=369
と、「チャートの自動めくり動画」を公開したところ、
https://shunichi.hosono.com/?p=443
数名の方から、ご意見・ご要望をいただいた。
・Chromeブラウザで利用できるようにしてほしい！
・いちいちキーを押さなくても自動でめくってほしい！
・自動再生を途中で一時停止したい！
・自動再生を、少し戻したい！
等々。
それほど難しい要望ではないけれども、
Windowsの「メモ帳」でカスタマイズできるくらいの
簡単なツールで実現しようとすると、それなりに難しい。
自動再生されているものを、一時停止したり戻したりするには、
アニメーションの停止やフレーム操作をすればいいかな？ と思って
animation-play-state等、いくつかの方法を調べて試してみたが、
実際には、動かない。（transition で動かしたアニメは対象外？）
そこで思いついたのは、
ゲームを作るツールを使えば、てっとり早く実現するのでは？
ということだった。
実際、その通りで、以前に学んだ「enchant.js」を使えば
今回のようなものは、簡単に作ることができた。
「phina.js」等のような、さらに高速・高機能な
同種のツールが登場してきているようだけど、
「enchant.js」の書籍がたまたま手元にあって、
思い出したらすぐに使えるようになったので、
とりあえず、これを使うことにした。
ということで、暫定的にできあがったのが、このページ。
< ペイント練習用の、チャート隠しツール ver2 >
https://shunichi.hosono.com/chart-mask2.html
今度は、Chromeブラウザでも使えて、
自動再生 も 一時停止 も 少し戻り も可能である。
操作方法は、次のとおり。
白い部分をクリック：再生開始。
左キー：少し戻る
右キー：少し早く
上キー：最初に戻る
下キー：一時停止
このツールは、「メモ帳」で編集可能な 普通の html ファイルなので、
ソースをコピーするか、右クリックでファイルに保存すれば
カスタマイズして、使用可能である。
次の３ファイルをダウンロードして、
同じフォルダへ保存しておく必要がある。
・ダウンロードするページ ３種類
< ペイント練習用の、チャート隠しツール ver2 >
https://shunichi.hosono.com/chart-mask2.html
< enchant.js >
https://shunichi.hosono.com/enchant.js
< ブランク画像 >
https://shunichi.hosono.com/mask.png
対象の 画像ファイル（ペイント対象のチャート画面）は、
「screenshot.png」が初期値だが、
変更する場合は、「メモ帳」等で編集可能。
当然のことながら、カスタマイズするには、
多少の html または javascript の知識が必要となる。
< chart-mask2.htmlのソース >
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chart mask ver2</title>
<style>
body { margin: 0; }
</style>
<script src="enchant.js"></script>
</head>
<body>
<script>
// ライブラリの初期化
enchant();
window.onload = function(){
// 変数の定義
var startx = 150
var maskadd = 2;
// 1920×1080ピクセルサイズの画面(Canvas)を作成
var game = new Game(1920, 1080);
// フレームレートの設定。
game.fps = 16;
// 画像データをあらかじめ読み込ませる
game.preload('screenshot.png',
'mask.png' );
// データの読み込みが完了したら処理
game.onload = function(){
// チャート画像 を設定
var chart = new Sprite(1920, 1080);
chart.image = game.assets["screenshot.png"];
game.rootScene.addChild(chart);
// マスク画像 を設定
var mask = new Sprite(1920, 1080);
mask.image = game.assets["mask.png"];
game.rootScene.addChild(mask);
mask.x = startx;
// キー操作時に呼ばれる
mask.addEventListener('enterframe', function(){
if (game.input.left) this.x -= (maskadd + 1);
if (game.input.right) this.x += maskadd;
if (game.input.up) this.x = startx;
if (game.input.down) this.x -= maskadd;
});
// タッチ開始時に呼ばれる
mask.addEventListener(Event.TOUCH_START, function(){
// シーンに「毎フレーム実行イベント」を追加します。
game.rootScene.addEventListener(Event.ENTER_FRAME, function() {
mask.x += maskadd;
});
});
}
// 処理開始
game.start();
}
</script>
</body>
</html>
[…] ペイント練習用の「チャート隠し」ツール ver2 […]