enchant.js で mac のトラックパッドのような UI を追加するプラグイン『trackpad.enchant.js』

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

enchant.js で mac のトラックパッドのような UI を追加するプラグイン trackpad.enchant.js を作りました.

簡単に導入できて, プレイのジャマにならないタッチ操作が可能になります.

screenshot

Github Demo Download

About

先日, 週アスさんから『enchant.jsでつくる“シロートが3時間でゲームをつくる”作り方』 というエントリーが公開されました.

そこでつくられていたゲームで, 単純にタッチした位置にプレイヤーを移動させると指がジャマでキャラが見えないので, タッチした位置から少しズラした位置にプレイヤーを移動させるというテクニックが紹介されていました.

確かに, そうすればプレイヤーも見えるしプレイにもそんなに影響はありません. ですが, 何も知らずにプレイするとちょっと違和感があります.(私は最初バグだと思いましたw)

そこでプレイのジャマにならず, かつ違和感なくタッチ操作できるインターフェースはないかなと思いプラグインを作りました. それが trackpad.enchant.js です.

trackpad.enchant.js は Trackpad クラスを定義しており, これを生成してScene に追加するだけで 画面下にトラックパッドが表示されタッチ操作が可能になります.

ついでに週アスさんの記事で公開されていた『コインスター拾い』を fork して trackpad.enchant.js version も作ってみたのでよかったら遊んでみてください.

下の方に薄らと出ているのがトラックパッドです. トラックパッドへのタッチ位置に応じてクマが移動します.

Usage

使い方は,

var trackpad = new Trackpad();
scene.addChild(trackpad);

といった感じで scene に追加し,

trackpad.ontouchmove = function(e) {
    entity.x = e.trackX;
    entity.y = e.trackY;
    console.log(entity.x, entity.y);
};

といった感じでイベントリスナを登録して trackX, trackY で値を取得して使ってください.

trackpad の左端をタッチすると trackX は 0 になり右端をタッチすると trackX は game.width の値になります.

Code

デモの全体コードです.

<!DOCTYPE html>

<html>
    
    <head>
        <meta charset=UTF-8 />
        <title>trackpad.enchant.js - test</title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
        </style>
        <script src="https://raw.github.com/wise9/enchant.js/master/enchant.js"></script>
        <script src="../src/trackpad.enchant.js"></script>
        <script>
            enchant();
            
            window.onload = function() {
                var game = new Game();
                
                game.onload = function() {
                    var scene = game.rootScene;
                    scene.backgroundColor = "black";
                    
                    var trackpad = new Trackpad();
                    scene.addChild(trackpad);
                    
                    var entity = new Entity();
                    entity.width = 10;
                    entity.height= 10;
                    entity.backgroundColor = "red";
                    scene.addChild(entity);
                    
                    trackpad.ontouchmove = function(e) {
                        entity.x = e.trackX;
                        entity.y = e.trackY;
                        console.log(entity.x, entity.y);
                    };
                };
                
                game.start();
            };
        </script>
    </head>
    <body>
        
    </body>
    
</html>

Plan

今後の予定(超仮)

  • タッチしている指の数を保持する
  • 変化量を保持する
  • 数フレーム分のタッチ位置情報を保持する
  • 数フレームの移動値の平均値を保持する
  • マルチタッチに対応させる
  • ピンチイン/ピンチアウト対応

svn から git と jsdo.it に移行中. ついでにローカルで散乱している大量のプログラムを整理して公開しようと 思っています. ご期待ください.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT