先日のバレンタインデー（２０１４年２月１４日）弊社ホームページに特別企画として、”イケメンにチョコを渡しに行く女の子を阻止する”という内容のゲームを公開しました。

『イケメンばかりにチョコは渡さない』

バレンタインデーの２日前に何か面白い企画は出来ないかな？と話し合って、シンプルなゲームなら面白そうだしやってみようという勢いだけで始めました。

僕の中ではゲームを作ると決めた時、真っ先に浮かんだのはenchant.js。数年前からブラウザゲームのフレームワークとして有名でしたのでこれ以外に選択肢は思いつきませんでした。

ドットインストールでenchant.jsの使い方を知る

enchant.jsはなんとなく「Spriteとか使うんでしょ」「フレームレートとか設定するのかな」ぐらいのぼんやりした認識しか無かったので、まずは基本を知るためにドットインストールの入門レッスンを全部見ました。

ドットインストールの解説わかりやすいですね。レッスン１２回を見ただけですぐに開発を始められました。

しかしenchant.jsが最初に話題になったころはdiv要素の背景に画像を入れてcss制御で動かしていたような…という気がしていたんですがやはりv0.6あたりから全面的にcanvasに切り替わっていたんですね。

Sprite、Labelという基本クラス

簡単なものならこの２つのクラスを使うだけで乗り切れそうですね。

Spriteはキャラクターなどのバリエーションのある画像素材を１つにまとめたものを簡単に扱えるクラスです。

 

上のクマはenchant.jsのサンプルに用意されているものですが、歩く動作のコマが全て同じpng画像にまとめられていて、Spriteクラスの機能でコマの切り替えなどが簡単に出来ます。

Labelは文字列を扱うクラスで、点数表示や時間など変化する部分に向いています。

実際今回のゲームは殆ど全てがSpriteとLabelを配置しただけで出来ていて、後はそれぞれのオブジェクトのクリックイベントやフレーム毎に歩く方向を指示しているだけです。

オブジェクトは継承して作った

enchant.jsのクラスを使う方法はざっくりと２つあって、Spriteクラス等をnewするか、Spriteクラス等を継承したクラスを作りnewして使うかです。

今回は殆どのオブジェクトの為に継承クラスを作りました。一見継承をしてからインスタンスの生成をするので手間がかかるように思いますが、実際は手間がかかる印象はあまり無く、むしろコードの見通しが良くなって開発が捗ったと思います。

例えば背景を表示するためのSpriteですが

var bg = new Sprite(STAGE_WIDTH, STAGE_HEIGHT);
bg.image = core.assets['/assets/bg.jpg'];
bg.x = 0;
bg.y = 0;
core.rootScene.addChild(bg);

と書くところを

var Bg = Class.create(Sprite, {
  initialize: function() {
    Sprite.call(this, STAGE_WIDTH, STAGE_HEIGHT);
    this.image = core.assets.['/assets/bg.jpg'];
    this.x = 0;
    this.y = 0;
    core.rootScene.addChild(this);
  }
});

new Bg;

と書いたわけですが、若干コード量が増加しています。しかし、こうすることで背景画像はこうゆうものだと言う意図が明確になると感じていて、さらに定義と生成が分離できるので扱いやすいと思います。
もっと言うと上記の例では登場しませんが、継承パターンの場合だとプロパティを設定する際に一時的な変数を作ってもスコープがあるというのもメリットかと思います。

もちろん今回のゲームのように同じキャラクターを沢山生成する場合には継承クラスを作成することになると思いますけどね。

ロジックは単純、ゲームはデザインが大事

オブジェクトの生成とイベントハンドリングのやり方が分かれば後はキャラクターの動作や時間に応じた難易度の調整しかやることは残されていませんでした。

ゲームの内容が単純ですから一定間隔にキャラを生成し、１０秒毎にその間隔を短くしていくという処理だけです。ゲームの基本部分を実装するのに２時間ほどかかりました。残りの時間はデザインされた画像の設定などです。

デザインが施されていくにしたがってただのオブジェクトだったものがキャラクターに進化し、背景が入れば世界が広がっていく感覚はとても楽しいものでした。ゲームの魅力はデザインなのだなぁと改めて感じました。
今までwebの仕事はデザインとプログラミングが高度に融合していなければいけないと感じていましたが、その点ではゲームに勝るものはありませんね。これこそ総合芸術という感じがします。

まとめ

プログラムサイドからは以上です。作ってみて感じたのはenchant.jsは凄いし、ゲームはシナリオやデザインが命だということです。これからも機会があればenchan.jsでブラウザゲームを作ってみたいですね。

あと、canvasの動作はとても軽快でゲームのド素人が適当に書いただけでこんなに安定したものが作れるとは思っていなかったのでかなり驚きでした。canvasを使ってflash的なコンテンツもチャレンジしてみたくなってきました！