CodeIQ MAGAZINECodeIQ MAGAZINE

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

2014.08.05 Category:技術コラム Tag: , , , , ,

  • 52
  • このエントリーをはてなブックマークに追加

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」も、ここに縮めて書けるよ。どうだ、この美しさ!

シュン:すご~い!

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

シュン:本当だ!

清水:ここで、改めてenchant.jsの基礎的な部分についておさらいしてみよう。実はJavaScriptには本来、クラスという概念はない。それを、enchant.jsのもとで作れるように工夫をしている。

だからちょっと変わったツクリになっているんですが、それはおいておくとして、ここの部分で、Class.createという命令でクラスを作ります。

次に書かれたSpriteは、スプライト・クラスを継承するという意味。最初のクラスをmoveしたときに、initializeが呼ばれる。initializeのx,yはこの場合、初期化で座標を設定しているからね。

enchant.jsの場合には、例えばC#にある、メンバー変数の定義はありません。だから、その手の指定は、全部初期化のところで行ってください。

またこれは、enchant.jsというよりもそもそものJavaScriptの面白いところなんだけれど、宣言していなくても、突然使えてしまうんです。普通、どんなプログラム言語でも、それを使う場合には『今からコレを使いますよ』という宣言が必要でしょう?

でも、JavaScriptはそれが要らない。「オレがルールだ!」みたいに、突然使って大丈夫なんですよ(笑)。

JavaScriptは突きつめるほどに面白くなってくるので、C#よりおすすめです。その次にはLispをやりたくなるはず。Lispにも慣れれば、もう怖いものなしですね。シュン君ならできると思う。ぜひ頑張ってください。

──後編(小学生に三角関数を説く清水氏。果たしてシュン君の反応は?)に続く!

自分の書いたコードを誰かに評価されたいエンジニアは、けっこう多い?

ITエンジニアのための実務スキル評価サービス『CodeIQ』で出題されている「コード銀行」問題に挑戦すると、あなたのコードが評価されます。

評価(1)出題者からの評価  ⇒評価フィードバック例を見る

  • 企業ではたらくという観点からあなたのコードをチェックします
  • フィードバックされた観点をふまえてコードを書くと世の中の企業にとって「いいコード」が書けるようになります

評価(2)企業からの評価  ⇒評価フィードバック例を見る

  • 「あなたと一緒にはたらきたい」という企業からスカウトが届きます
  • あなたのコードが社会でどこまで通用するか、リアルな評価が得られます

興味を持った方はこちらからチャレンジを!

  • 52
  • このエントリーをはてなブックマークに追加

■関連記事

ブラウザ戦争、HTML5の標準化、ブラウザの未来──歴史を語り尽くすWebブラウザ談義【後編】... 「ブラウザ戦争」とは何だったのか Webブラウザの歴史を辿ると、歴代のブラウザが、技術的にもビジネス的にも激しい覇権競争を繰り広げたことが、結果としてWebの普及を促したことがわかる。 94年12月にリリースされた Netscape Navigatorは順調にバージョンを重ねるが、これに対抗して...
インターネットとWebの誕生が、いつか知ってる?──歴史を語り尽くすWebブラウザ談義【前編】... 今あらためてWebブラウザの歴史を辿る意味 Webブラウザはたかだか四半世紀の歴史とはいえ、世界を変えたこの25年はあまりにも劇的で、細かい歴史は忘れられていることも多い。 しかし、Webブラウザの歴史をたどることで、インターネット技術がどのように発展してきたのか、そしてこれからはどのようにそれ...
Azureで仮想マシンを作り、リモートデスクトップ接続で『Visual Studio』を使ってみよう... AzureならインストールすることなくVisual Studioが使える!? 現在、CodeIQで展開されているキャンペーン問題、日本マイクロソフト・エバンジェリストである物江修さんが出題する「HTML5+JSで落ちものゲームを作ってみよう」と、同じくエバンジェリストの高橋忍さんが出題する「きゃん...
HTML5、C#を使ったスマートフォン・タブレット向けアプリ開発を基礎から学ぼう!... 中学1年生になったシュン君とゲームアプリ問題に挑戦! タブレットやスマートフォンのエンタープライズ環境への導入が増えているとはいえ、そのような端末向けのアプリケーション開発に携わっているITエンジニアはまだまだ少ない。 今回のキャンペーン問題は、「HTML5/JavaScript」と「XAML/...
【最終回】シュン君のゲームをChrome Web Storeで公開してみよう!#5jcup #htm... Chrome Appsとは何か? 前回までの講師は、UEI清水亮氏(前編・後編)、日本マイクロソフト物江修氏(Windowsストアアプリ編)、Mozilla Japanの清水智公氏(Firefox OS編)、アシアル生形可奈子氏(スマートフォン編)。 ラストを飾るGoogle Developer...
Monacaでenchant.jsで作ったHTML5ゲームを、シュン君とスマートフォンに移植してみよ... なぜ、スマートフォンアプリ化する必要があるの? 前回までの講師は、UEI清水亮氏(前編・後編)、日本マイクロソフト物江修氏(Windowsストアアプリ編)、Mozilla Japanの清水智公氏(Firefox OS編)。 そして次なるターゲットは、スマートフォンアプリ移植。講師には、アシアル株...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ