ペイント練習用の「チャート隠し」ツール ver2

先月作った「ペイント練習用のチャート隠しツール」と、
http://shunichi.hosono.com/?p=369

と、「チャートの自動めくり動画」を公開したところ、
http://shunichi.hosono.com/?p=443

数名の方から、ご意見・ご要望をいただいた。

・Chromeブラウザで利用できるようにしてほしい!
・いちいちキーを押さなくても自動でめくってほしい!
・自動再生を途中で一時停止したい!
・自動再生を、少し戻したい!

等々。

それほど難しい要望ではないけれども、
Windowsの「メモ帳」でカスタマイズできるくらいの
簡単なツールで実現しようとすると、それなりに難しい。

自動再生されているものを、一時停止したり戻したりするには、
アニメーションの停止やフレーム操作をすればいいかな? と思って
animation-play-state等、いくつかの方法を調べて試してみたが、
実際には、動かない。(transition で動かしたアニメは対象外?)

そこで思いついたのは、

ゲームを作るツールを使えば、てっとり早く実現するのでは?

ということだった。

実際、その通りで、以前に学んだ「enchant.js」を使えば
今回のようなものは、簡単に作ることができた。

「phina.js」等のような、さらに高速・高機能な
同種のツールが登場してきているようだけど、
「enchant.js」の書籍がたまたま手元にあって、
思い出したらすぐに使えるようになったので、
とりあえず、これを使うことにした。

ということで、暫定的にできあがったのが、このページ。

< ペイント練習用の、チャート隠しツール ver2 >
http://shunichi.hosono.com/chart-mask2.html

今度は、Chromeブラウザでも使えて、
自動再生 も 一時停止 も 少し戻り も可能である。

操作方法は、次のとおり。

白い部分をクリック:再生開始。
左キー:少し戻る
右キー:少し早く
上キー:最初に戻る
下キー:一時停止

このツールは、「メモ帳」で編集可能な 普通の html ファイルなので、
ソースをコピーするか、右クリックでファイルに保存すれば
カスタマイズして、使用可能である。

次の3ファイルをダウンロードして、
同じフォルダへ保存しておく必要がある。

・ダウンロードするページ 3種類

< ペイント練習用の、チャート隠しツール ver2 >
http://shunichi.hosono.com/chart-mask2.html

< enchant.js >
http://shunichi.hosono.com/enchant.js

< ブランク画像 >
http://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」への1件の返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


My Company Links

合資会社ユースマネージメント
ドメインサービス
ユースマネージモール umall.jp

My Website Links

細野俊一のトレーディング日記
大安心と大冒険を求めて
「生命の科学」学習メモ
細野俊一の雑記ブログ
インターネット活用の入り口

Facebook Pages

ポイント&フィギュア活用研究会
合資会社ユースマネージメント
ユースマネージモール
アダムスキー「生命の科学」活用研究会
細野俊一 (宇宙哲学研究家)