先日（昨年）作った「ペイント練習用のチャート隠しツール ver2」
を使って、自分のペイント練習で使おうとしたら、
いくつか不便を感じたので、少し改良してみることにした。
・対象ファイル名を 選択できるようにしたい！
・マウス（あるいはタップ）だけで、一時停止と再開をしたい！
（タブレットＰＣだと、カーソルキーが使えないので。）
こういうことも、「enchant.js」や「phina.js」を使うと、簡単に実現可能である。
そして、暫定的にできあがったのが、このページ。
< ペイント練習用の、チャート隠しツール ver3 >
https://shunichi.hosono.com/chart-mask3.html
残念ながら、ブラウザソフト側のセキュリティの関係で、
選択したファイルの「パス名」を取得することができない。
したがって、対象となるペイント練習画像ファイルがすべて、
このツールと同じフォルダ内に存在していることが利用条件となる。
設置方法は、ver2 と同じで、
次の３ファイルを、右クリックで ダウンロード選択して、
ペイント練習画像を溜めているのと同じフォルダへ入れておき、
chart-mask3.html をブラウザで起動すればよい。
・ダウンロードするページ ３種類
< ペイント練習用の、チャート隠しツール ver3 >
https://shunichi.hosono.com/chart-mask3.html
< enchant.js >
https://shunichi.hosono.com/enchant.js
< ブランク画像 >
https://shunichi.hosono.com/mask.png
多少の html または javascript の知識がある人は、
テキストエディタでカスタマイズすることも可能だし、
「enchant.js」や、他の開発技術を持っている人は、
これをきっかけ＆ヒントに、もっともっと高機能な
練習支援ツールを開発してくれることをぜひ期待したい。
< chart-mask3.htmlのソース > ※未完成の箇所あり
<!DOCTYPE html>
<html>
<head>
<meta charset="Shift_JIS">
<title>Chart mask ver3</title>
<style>
body { margin: 0; }
</style>
<script src="enchant.js"></script>
</head>
<body>
<input type="file" id="targetfile" size="50" accept="image/*" onchange="chartmask()"><br>
<a href="#" onclick="chartmask()">start</a>
<script>
function chartmask(){
// ファイル名を取得
var imgFileName0 = document.getElementById("targetfile").value;
var array = imgFileName0.split(/\\|\\/);
var imgFileName = array[ array.length - 1];
// ライブラリの初期化
enchant();
// 変数の定義
var startX = 150; // スライド表示を開始する左位置
var maskspeed = 1; // スライド表示する速度
var maskadd = maskspeed; //
var isTouch = true; // タッチフラグ(タッチ中のみ true にする)
var isLeft = false; // タッチフラグ(右フリックで true にする)
var isRight = false; // タッチフラグ(左フリックで true にする)
var currentX = null; // 現在のX座標
var currentY = null; // 現在のY座標
var touchX = null; // タッチX座標
var touchY = null; // タッチY座標
// 1920×1080ピクセルサイズの画面(Canvas)を作成
var game = new Game(1920, 1080);
// フレームレートの設定。30fpsに設定
game.fps = 30;
// 画像データをあらかじめ読み込ませる
game.preload( imgFileName, 'mask.png' );
// データの読み込みが完了したら処理
game.onload = function(){
// チャート画像 を設定
var chart = new Sprite(1920, 1080);
// chart.image = game.assets['screenshot.png'];
chart.image = game.assets[ imgFileName ];
game.rootScene.addChild(chart);
// マスク画像 を設定
var mask = new Sprite(1920, 1080);
mask.image = game.assets["mask.png"];
game.rootScene.addChild(mask);
mask.x = startX;
// 説明文を表示します。
var Label1 = new Label("");
Label1.text = "マウスのクリック：一時停止と再開<br>" +
"左キー：少し戻る<br>" +
"右キー：少し加速<br>" +
"上キー：最初に戻る<br>" +
"下キー：一時停止";
Label1.font = "16px monospace";
Label1.color = "red";
Label1.x = startX; // X座標
Label1.y = 100; // Y座標
game.rootScene.addChild(Label1);
// シーンに「毎フレーム実行イベント」を追加します。
game.rootScene.addEventListener(Event.ENTER_FRAME, function(e) {
if( isTouch == true ) {
mask.x += maskadd;
}
});
// タッチイベントを登録
this.rootScene.addEventListener("touchstart", function(e) {
// タッチ開始
if( isTouch == true ) {
isTouch = false;
} else if( isTouch == false ) {
isTouch = true;
}
// 現在のマウス位置の取得
currentX = e.localX;
currentY = e.localY;
});
// フリック操作を監視
this.rootScene.addEventListener("touchmove", function(e) {
// 移動後のマウス位置の取得
touchX = e.localX;
touchY = e.localY;
if( touchX < currentX ) {
// 左フリック
isLeft = true;
} else if( touchX > currentX ) {
// 右フリック
isRight = true;
}
});
// フリック操作の判定
this.addEventListener("touchend", function(e) {
// タッチ位置をセット
if( isLeft == true ) {
// 左フリック
this.x -= (maskspeed + 1);
} else if( isRight == true ) {
// 右フリック
this.x += maskspeed;
}
});
// キー操作時に処理
mask.addEventListener('enterframe', function(){
if (game.input.left) this.x -= (maskspeed + 1);
if (game.input.right) this.x += maskspeed;
if (game.input.up) this.x = startX;
if (game.input.down) isTouch = false;
});
}
// 処理開始
game.start();
}
</script>
</body>
</html>