【enchant.js】trackpad.enchant.jsをenchant.js v0.6で使うには【Advent Calendar】

enchant.js プログラミング

enchant.js Advent Calendarなるものに参加です。

tmlib.jsでもお馴染みのphiさんが、今年の３月にtrackpad.enchant.jsというプラグインを発表されています。
こちら、120x80という小さな範囲で画面全体をカバーできるというスグレモノでして、導入も簡単で非常に便利なんです。ちょっと例を示しましょう。

var bear = new Sprite(32,32);
bear.image = game.assets[charar01.png];

var trackpad = new Trackpad();
game.rootScene.addChild(trackpad);
trackpad.ontouchmove = function(e) {
    bear.moveTo(e.trackX, e.trackY);
};

これで何ができるかって、パッド部分だけでクマを画面全体縦横無尽に移動させることができるんですよ！

ですがこれ、先日リリースされたenchant.js v0.6では利用することができません。
なぜかというと、中で_elementを操作してるからなんですね*1。

もったいない。実にもったいない！
何とか利用する手立てはないものか？

あります、ありますよ。
trackpad.enchant.jsにちょっと手を加えるだけで、途端に使えるようになります！
まずソースを開いて下さい。
25行目から30行目あたりで、以下の様な部分があります。

// 見た目調整
var style = this._element.style;
style.margin = style.padding = "0px";
style.borderRadius = "4px";

はい、単に見た目調整のために_elementを操作してたんですね。ばさっとコメントアウト。
ほ〜ら、使えるようになったでしょう！

え、見た目が違う？　角が丸くない？
わがままですね〜。
まぁそれも方法がなくもないので、ちょっとやってみましょう。
まず継承元を変更します。継承元はEntityでしたが、これをSpriteに変更して下さい。その上で、initializeを以下のように書き換えます。

initialize: function() {
    enchant.Sprite.call(this,TRACKPAD_WIDTH,TRACKPAD_HEIGHT);
    this.image = new Surface(TRACKPAD_WIDTH,TRACKPAD_HEIGHT);
    with(this.image.context) {
        fillStyle = TRACKPAD_COLOR;
        beginPath();
        // 角を丸めたPathを描く
        closePath();
        fill();
    }
    
    // 位置調整
    var game = enchant.Core.instance;
    this.x = (game.width  - this.width) / 2;
    this.y = (game.height - this.height) - TRACKPAD_PADDING_BOTTOM;
},

あ、石投げないで……。
だってPath書くのめんどいんだもん……。
HTML5のCanvasの練習だと思って自分で書いて……。

あと、dispatchEvent関数の中にもenchant.Game.instanceにアクセスしている箇所があるので、enchant.Core.instanceに書き換えましょう。

とてもいいプラグインなので、みなさんも使ってみて下さい！

*1:trackpad.enchant.jsはEntityベースなので影響なさそうですが、とりあえずそこでエラーが出ます。

【enchant.js】ver. 0.6でのGroupの注意点【実験】

プログラミング enchant.js 9leap

先日、enchant.js 0.6がリリースされましたね。
twitterを眺めていると、色々な方の悲鳴が聞こえてきます（笑）。

今回のバージョンアップの目玉は、やはりCanvasベースの描画でしょうか。
というわけでその影響を受けるもののひとつ、Groupについて探ってみました。
まずは以下の２つのコードをご覧下さい。

  • パターン１
// 子ノードを追加した後にGroupのプロパティを操作
var g1 = new Group();
game.rootScene.addChild(g1);
var b1 = new Sprite(32,32);
b1.image = game.asstes['chara1.gif'];
b1.x = b1.y = 160 - 16;
g1.addChild(b1);
g1.originX = g1.originY = 160;
g1.rotation = 45;


  • パターン２
// Groupのプロパティを操作した後に子ノードを追加
var g2 = new Group();
game.rootScene.addChild(g2);
g2.originX = g2.originY = 160;
g2.rotation = 45;
var b2 = new Sprite(32,32);
b2.image = game.asstes['chara1.gif'];
b2.x = b2.y = 160 - 16;
g2.addChild(b2);

違いが分かるでしょうか。
パターン１では、子ノードを追加した後にGroupのプロパティを操作しています。一方、パターン２ではプロパティを操作した後に子ノードを追加しています。
この２つ、感覚的には同じ結果が得られると考えるのですが……なんと！　パターン１ではプロパティの操作結果に従って子ノードも回転するのですが、パターン２ではプロパティの捜査結果に子ノードが追従していません！　この結果から分かることは、Groupのプロパティ操作の結果は、操作された時点で保持している子ノードに対してのみ有効、ということです。正直、この仕様はどうかな～と思います。

それでは、この仕様に対する方策は何かあるのでしょうか。ベタなところでは、下のパターン３のようにaddChild後に必ずプロパティ操作をする、ですか。

  • パターン３
// Groupのプロパティを操作した後に子ノードを追加、さらにGroupのプロパティを操作
var g3 = new Group();
game.rootScene.addChild(g3);
g3.originX = g3.originY = 160;
g3.rotation = 45;
var b3 = new Sprite(32,32);
b3.image = game.asstes['chara1.gif'];
b3.x = b3.y = 160 - 16;
g3.addChild(b3);
g3.x = g3.x;

マニアックなやり方だと、Groupのハックですね。

  • パターン４
// addChild関数の中でGroupのプロパティを操作
var g4 = new Group();
g4.addChild = function(node) {
    enchant.Group.prototype.addChild.call(this,node);
    this.x = this.x;
};
g4.originX = g3.originY = 160;
g4.rotation = 45;
var b4 = new Sprite(32,32);
b4.image = game.asstes['chara1.gif'];
b4.x = b4.y = 160 - 16;
g4.addChild(b4);

addChild関数の中でプロパティを操作するようにしてしまえば楽ちんです。

【enchant.js】ローカル開発環境の構築　後半【環境構築】

さて。後半です。
先日はenchan.jsをDLしてサンプルを動かしてみるところまでやりました。今日は、前回実行したサンプルが入っているフォルダをデスクトップにコピーするところから始めましょう。何故そんなことを？　と疑問に思われるかもしれませんが、まあ、まずやってみて下さい。

まずはフォルダごとファイルをデスクトップにコピーして、そしてもう一度サンプルを動かす――あれ？　動きませんね。どうしたんでしょう。

原因を調べるために、まずエラーコンソールを開いてみましょう。
Firefoxなら「F12」を、Safariなら「Command」＋「Option」＋「C」、Chromeなら「Ctrl」＋「Shift」＋「J」を押して下さい。ブラウザの下部にエラーコンソールが表示されます。もしかしたら、htmlファイルを読み込み直す必要がある旨のメッセージが出力されるかもしれません。その時はリロードボタンを押して読み込み直して下さい。
エラーコンソールには以下のように表示されているかと思います。

ReferenceError: enchant is not defined
	enchant();

enchantなんて知らねーよと言われていますｗ

ここでindex.htmlをエディタで開いて下さい。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script type="text/javascript" src="../../../dev/enchant.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
</body>
</html>

ここでポイントとなるのは以下の２行です。

    <script type="text/javascript" src="../../../dev/enchant.js"></script>
    <script type="text/javascript" src="main.js"></script>

２行目のmain.jsはindex.htmlは同一フォルダにありますよね。でも、enchant.jsの方は……？

そう！　先程のエラー、実はenchant.jsが見つからなかったために出たエラーなんですね。enchant.jsが読み込めなかったから、その中に記述されている関数enchant()も呼び出せない……。

ではどうすれば解決するのでしょうか？

まずindex.htmlでenchant.jsを読み込んでいる部分を以下のように書き換えて下さい。

    <script type="text/javascript" src="enchant.js"></script>

その上でenchant.jsを同一フォルダにコピーし、index.htmlをブラウザで開いて下さい。どうですか。動いたでしょう。冒頭でゲームが正しく動かなかったのは、index.htmlかenchant.jsへのパスが正しく指定されていなかったからです。

このパスの問題は結構根深くて、特にplugin周りで多発しています。私が今回の記事を書こうと思い立った要因の一つは自在カフェさんのこちらの記事なんですが、やはり問題だったのは画像ファイルへのパスでした。
ソースコードの中身をのぞけばたちまち解決する問題でもあるんですが、enchant.jsを触り始めたばかりの人、特にプログラミングそのものが初めてという人には、あまりに高いハードルです。この辺のフォローは、是非公式でやっていただきたい。

さてさて。
環境構築の話もこれで終わりです。
ゲーム開発が進めば、pluginや画像、音声ファイルを追加する時も来るでしょう。そんな時はまず同一フォルダにファイルを置いて下さい。
よりよい開発環境を目指すとなると、テキストエディタの問題や統合開発環境、そも、ブラウザは？　と話が多岐にディープになっいきます。そこは最終的には個人個人で異なるところなので、ご自分で調べて下さい。

【enchant.js】ローカル開発環境の構築　前半【環境構築】

twitterを見ていると時折「enchant.jsの開発環境」なんて言葉を目にします。「そんなん、enchant.jsをDLしてきて終わりじゃん」と思っていたのですが、jsdo.itやcode.9leapから入った方からしてみると、そうでもないようです。

ここはひとつ、初心に返って「ローカル開発環境の構築」なんてのをやってみましょう。

まずブラウザです。
enchant.jsはHTML5の機能を利用していますので、当然新し目のブラウザが必要になります。Firefox、Chrome、Safariのどれかをインストールしておきましょう。
（Windowsの場合、Safariは脆弱性が放置されたままなので止めましょう）
あとFirefoxの場合、Firebugというpluginを入れておく必要があるます。これはJavascriptのエラー情報などを表示するためのpluginです。ChromeとSafariはデフォルトで持っているんですが、Firefoxは何故かplugin。

次にテキストエディタです。
これはUTF-8でファイル保存できるなら何でもOKです。Windowsのメモ帳でもね！（オススメはしません）
ちなみに私はWindowsではサクラエディタ、MacではSublime Text2を使っています。

さて、それではお待ちかね。
enchant.jsをDLしてきましょう。

f:id:v416:20121127181917p:plain
左メニューにあるDownloadをクリックです。
けっしてGitHubから直接DLなんてしちゃいけません！
あれね、うっかりすると本体のソースコードだけDLなんてことになっちゃうんでね、pluginないとか画像ないとか、サンプルないとか！
悲しい現実しか待っていないので、必ず上記のリンクからDLしましょう。

DL 終わったら解凍です。解凍場所はどこでもいいです。
すっかり解凍なんて言葉が定着してますが、本当は伸張っていうんです。

解凍が終わったら、サンプル*1のひとつを開いてみましょう。

wise9-enchant.js-xxxxxxx/examples/beginner/hellobear
 --- chara1.png
 --- index.html
 --- main.js

ではindex.htmlをダブルクリックしてみましょう。
……enchant.jsのマスコットキャラクター「エンちゃん」が右から左に一生懸命走っていく姿が表示されたかと思います。
おめでとう！　これでenchant.jsの第一段階は終了です！

*1:サンプルの中には作られたのが古くて現行のenchant.jsでは動かないものもあるかもしれません。とりあえず動かないのを見つけたらenchant_jpにそっと教えてあげましょう。またChromeなどのベースになっているwebkitはMapと相性が悪かったりします。そんなときはニコッと笑って別のブラウザを立ち上げましょう。

【9leap】8Days Challengeに投稿しました【enchant.js】

enchant.js ゲーム作成 9leap

「Windows 8対応記念 8Days Challenge」がスタートしましたね。

といわけで私も早速ゲームを投稿しました。
題して「走れ！　ハチ！」です！
ハチをジャンプさせて通り過ぎる輪っかをくぐり抜けるゲームです。
タップでジャンプ、ジャンプ中にもう一度タップすると更に高く飛べます。
ぜひ遊んでみて下さい！

……え？　11月の9Days？
占いでしたっけね……。
こっくりさんがどうとか……。

【9leap】9Days Challenge #6 テクニック賞頂きました！【enchant.js】

enchant.js ゲーム作成 9leap

表題の通り、9Days Challenge #6 で、テクニック賞を頂きました！
「焼肉」は「これだ！」と思ったゲームシステムだけに、テクニック賞という賞は嬉しいです。
ただまぁ、このゲーム、バグの雨あられでして……。現時点でなおバグ放置の状態です。めんぼくない。
もそっと作りこんで、ちゃんとOpenLeapに参戦したいところですが、できるかなぁ……。

９分間でゲームを作る方法

enchant.js プログラミング 9leap ゲーム作成

先日お台場の日本科学未来館で開催された「デジタルコンテンツＥＸＰＯ」では、UEIのブースで行われた「9 minutes coding battle」が人気だったようですね。私は会場に足を運ぶことはできなかったのですが、twitterを見ていると触発された結構いらっしゃったようで。

果たして本当に９分間でゲームを作ることが出来るのか？

ぶっちゃけますと、相当慣れている人でないと無理です。
どのくらい無理かというとenchantの呼び出しからwindows.onloadの中でgame.start呼び出すくらいが関の山じゃね？　ってくらい無理ゲーです。
え？　お前のタイピングが遅いだけだろうって？
それを言われるとつらいでございます。
何せ前に仕事で他の人のテストスピードについて行けず、ちょっとテストツール作ったら他の人の２倍から３倍くらいの効率でテストこなせるようになっちゃうような人間ですから。

自分のdisりと自慢話はさておいて。

それでは慣れていない人間が９分間でゲームを作るにはどうするか。
そりゃあもう、事前準備がかかせません。
さてこちら、９月の頭に行われた「enchant.js大感謝祭2012」で私が作成したゲームになります。
enchant.js大感謝祭2012 9 minutes coding battle 参加作品 by v416 - code.9leap.net

お気付きの方もいらっしゃるとは思いますが、これ、こいつのコピーです。
物理エンジン事始め その９ by v416 - code.9leap.net

ポイントは「コンセプトに合わせて見た目を変更できるネタをストックしておく」ことです。
それアリなの？　と言われそうですが、そうでもしないと無理ですよ。
実際上記のゲームの後にもう１本作ったんですが、できたのはタップした分クマが前に進むという、それだけのゲーム（？）でした。もうソースもどこ行ったかわからない。

でもね、きっとそうやってストックが溜まってゆくと、実際のコーディングスピードも上がってゆくと思うんですよ。うんで、ガチに９分間で組めるようになるんじゃないかな、と……。

今度機会があったら、私は「餃子メソッド」だけでプログラミングしますよ！