CodeIQ MAGAZINE

小学生プログラマ・シュン君、UEI清水亮氏とenchant.jsでゲームを作る（前編）#5jcup #html5j

2014.08.05 Category：エンジニアコラム Tag：enchant.js ,HTML5 ,html5j

HTML5 Japan Cup 2014で見事Webプラットフォーム賞を獲得したのは小学6年生シュン君の「UFO-Escape」。HTML5＋JavaScriptをベースとしたゲームエンジンenchant.jsで作ったゲームアプリだ。

今回シュン君にenchant.jsの基礎から「UFO-Escape」のアイデアまでを講義してくれたのは、UEIの清水亮氏。シュン君が「UFO-Escape」が完成するまでの軌跡をレポートする。 by 馬場美由紀（CodeIQ中の人）

UEIの清水亮氏がシュン君に直々の指南

enchant.jsはユビキタスエンターテインメント（UEI）が、2011年4月にリリースしたHTML5＋JavaScriptをベースとしたゲームエンジンだ。

わずか30KBのソースコードでPCからiPhone、Androidまで、さまざまな環境で動くアプリを簡単に開発することができるというのがその特長。他のプラットフォームへの移植性が高いことでも注目されている。

enchant.jsプロジェクトに含まれる全てのソースコードはMITライセンスでリリースされており、ソースコード内の著作権表示を削除しない限り、「ソースコードの改変」「再配布」など自由に利用できるというのも魅力だろう。

UEIの秋葉原リサーチセンターで開発され、UEIのプロダクトページによれば、2011年4月にリリースされて以降、すでに3000本以上の作品が作られているという。

今回そのenchant.jsを、UEIの代表取締役社長兼CEO・清水亮氏が直々に指南する。その相手は小学生プログラマとして「CodeIQ MAGAZINE」に登場してもらったこともあるシュン君。小学生ながらC#、Unity、JavaScript、PHPを使いこなす。

品川の日本マイクロソフトの一室を借り切って、いざ集中講座の開始。最初に登場するのは、メインのゲーム制作を担当する清水亮氏である。

さらにシュン君には開発したゲームをいくつものプラットフォームに移植してもらうべく、各プラットフォームのエキスパート陣に協力していただいた。

日本マイクロソフトエバンジェリストの物江修氏、Mozilla Japan清水智公氏、Google Developer Expert吉川徹氏、アシアル生形可奈子氏、html5j若狭氏と、そうそうたるメンバーである。

まずはenchant.jsと、ゲームの基本を知ろう

講義を開始する清水氏。教材として使うのは、UEIの「code.9leap.net」にあるサンプル・プロジェクト。これは誰でも「code.9leap.net」にアクセスし登録すれば、enchant.jsの基礎を、ステップを踏んで学べるというものだ。

まずはそのステップ通り、シュン君の前に提示されたのは、STEP1の「画面に文字を表示してみよう」というサンプル。

▲code gleapサンプル・プログラム「step1 文字を表示してみよう」の画面キャプチャ

enchant(); //enchant.jsを使い始めるためのおまじない
window.onload = function() {
    game = new Game();
    game.onload = function() { //ここでゲームを開始する前の準備をする
        hello = new Label("Hello,Bear"); //「Hello,Bear」と書かれたラベルを作る
        hello.x = 10;
        hello.y = 150;
        game.rootScene.addChild(hello); // ラベルを表示する
    }
    game.start(); //ゲーム開始
}

説明を聞きながら、enchant.jsをいじり始めてみるシュン君。その画面を見ながら、清水氏もいくつかのポイントを取り上げて、説明を加える。

清水：画面上にあるrunというボタンをクリックしてみよう。そうしたらSTARTと表示される。

その下に、「Hello,Bear」と出ているけれど、これが、コードのほうにも書かれているのはわかるね。ではこれを、自分の名前に変えてみましょう。簡単だね。では位置は変えられるかな。そう。6～7行目で座標が指定されていますね。

シュン：変わった！変わった！

清水：ちなみにこれは、オブジェクト指向的なプロパティというもの。Visual Basicをやっているなら、わかるよね。

シュン：はい。

生徒のレベルを確かめて、ますます講義に力がこもる清水氏

清水：今表示されてる文字を変えてみたのはLabelというクラスなんだけど、実はenchant.jsは覚えなきゃいけないクラスがこの4つしかありません。

Game：ゲーム全体の管理
Label：テキスト
Sprite：画像
Scene：シーン

はっきり言ってこの4つだけ覚えていれば、もうほとんどのことはできてしまう。そして、主なプロパティは、x,y　ScaleX,ScaleY……これは大きさだね。それからframeというのがある。では、ちょっといじってみようか。

▲文字や画像の呼び出し方、動かし方、さまざまな条件の設定の仕方などを説明していく清水氏

清水：例えばここ……helloというところに、enterframeのイベントリスナを付け加えてみます。するとどうなるかな。

enchant(); //enchant.jsを使い始めるためのおまじない
window.onload = function () {
    game = new Game();
    game.onload = function () { // ここでゲームを開始する前の準備をする
        hello = new Label("Hello,Bear"); //「Hello,Bear」と書かれたラベルを作る
        hello.x = 10;
        hello.y = 150;
        hello.on(“enterframe”,function(){this.x++;});
        game.rootScene.addChild(hello); // ラベルを表示する
    }
    game.start();
}

シュン：あっ。動いてる！

清水：さらにenterframeを、touchendに変えて、y++とすると、今度は……ほら、さわるとだんだん下がってくる。こういうものを、イベント（event）っていいます。イベントにどういうものがあるかというと、例えばenter frame は「フレームに入ったら（何かをする）」というもの。

touchendは、「さわり終わったら」。だから、細かいことを言うと、マウスボタンを離さない限りはイベントが発生しないことになる。押しっぱなしだと効かなくて、離すと効く。

シュン：なるほど！こうですね。

清水：さすが、のみ込みが早いね。

続いて、STEP:2「スプライトを表示しよう」に進む

▲サンプル・プログラム/code.9leap「スプライトを表示しよう」

enchant();
window.onload = function() {
    var game = new Game(320, 320);
    game.preload('chara1.gif'); // chara1.gif を読み込む
    game.onload = function() {
        //bearという名前のスプライトを作る
        bear = new Sprite(32, 32); // キャラの大きさは32x32
        bear.x = 150; //クマのX座標
        bear.y = 150; //クマのY座標
        bear.scaleX = 1; //X座標への拡大率
        bear.scaleY = 1; //Y座標への拡大率
        bear.image = game.assets['chara1.gif']; // chara1.gif の中にある
        game.rootScene.addChild(bear); // 画面にbearを表示する
    }
    game.start();
}

清水：こっちには、さっき言った大きさのプロパティ、 ScaleX,ScaleYがあるのがわかるでしょう。この数値を変えてみると……ほら、大きくなったり小さくなったりする。

ちなみに、ここ、4行目にあるpreloadというところで画像を選んでいます。現時点では「chara1.gif」だね。このchara1.gifの中身は、下に表示されています。見てみましょう。

preloadは、ゲームスタート時にあらかじめ用意してある画像素材を呼び出すためのコマンド。これを使うことで、場合によっては複数の素材も呼び出すことができる。

シュン：あれ。1つじゃなく、たくさんあるんですね。

清水：そう。たくさんあるんだけれど、これを32×32ずつ切り取るわけです。

シュン：ああ！わかった！

清水：わかっちゃった？では、ここでframeの指定を変えてみましょう。ここに書き加えてみて、=1とかにしてみると、どうなるかな？

シュン：わかった！ここの数値を変えていくと、この絵が切り替わるわけですね。

清水：そう。当然、これはさっきのLabelと同じようなイベントの指定ができます。たとえばこんなふうに書き加えてみると……。大変なことになるわけです。

bear.on(“enterframe”,function(){ this.frame++; });

画面中央で、目まぐるしく絵が切り替わり、ほとんど点滅状態になるクマ。シュン君もさっそく、自分の手元で書き加えて確認してみる。

シュン：わああ！本当だ。すごい速さで変わる！

清水：ついでなので、ここでもう一つ。上にある「Add Resource」とあるボタンをクリックしてみてください。これは画像ライブラリで、元からいくつかのデータが入っています。例えば爆発パターンとか、宇宙船っぽいキャラクターとか。

シュン：本当だ！

清水：例えば一番よく使うものなんだけれど、icon0.pngというのがここにありますね。これを選んでみてください。操作画面の下に追加されたでしょう？アイコンの場合は16*16の大きさなので、スプライトの指定も16*16に変えないといけないね。

シュン：変わった！これもいろんな絵がすごい速さで切り替わってる（笑）。

清水：いずれにせよ、ここにはいろいろな絵が入っているので、これらを組み合わせると、比較的簡単にゲームが作れると思う。

STEP5の「クラスを使ってたくさんのクマを表示してみよう」へスキップ

ハイテンポで進んでいく講義。しかしそんな講義にも、しっかり付いていくシュン君もさすがだ。そんな様子を見た清水氏も、シュン君がしっかり基礎ができていると判断したらしい。間の講義を飛ばし、STEP5の「クラスを使ってたくさんのクマさんを表示してみよう」へ。クラスという考え方と、その使い方を学ぶステップだ。

▲サンプル・プログラム/code.9leap「クラスを使ってたくさんのクマさんを表示してみよう」

enchant();

// ここで自作クラスBearをつくる
Bear = Class.create(Sprite, // Spriteクラスを継承
{
    initialize: function(x, y) { //初期化する
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
        this.image = game.assets['chara1.gif'];
        this.x = x;
        this.y = y;
        this.frame = 0;
        game.rootScene.addChild(this);
    },
    //enterframeイベントのリスナーを定義する
    onenterframe: function() {
        this.x++; //右へ移動
    },
    //touchendイベントのリスナーを定義する
    ontouchend: function() {
        this.frame += 3; //泣く
    }
});
window.onload = function() {
    game = new Game(320, 320);
    game.preload('chara1.gif');
    game.onload = function() {
        bear1 = new Bear(10, 100); // 一人目のクマさん
        bear2 = new Bear(40, 110); // 二人目のクマさん
        bear3 = new Bear(0, 120); // 三人目のクマさん
    }
    game.start();
}

清水：今までは、言ってみれば画面を用意するところ。初期化の作業を行うところだったけれど、それを、たくさんの事項に関して、いちいち書いていくのは面倒な作業だよね。それをクラス（class）を使うと、1箇所にまとめて書くことができて、とてもすっきりします。

細かく説明しなくても、シュン君は読むだけでわかってしまいそうだね（笑）。例えばさっきの「enter frame」も、ここに縮めて書けるよ。どうだ、この美しさ！

シュン：すご～い！

清水：ではこれを実行してみましょう。そうするとこんなふうに、たたくたびに泣いたり、絵が変わっていく。

シュン：本当だ！