enchant_js_wht_1
Development

一日でゲームをプログラムする

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

『イケメンばかりにチョコは渡さない』
スクリーンショット 2014-02-17 10.44.59

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

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

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

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

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

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

Sprite、Labelという基本クラス

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

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

chara1

 

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

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

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

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

enchant.jsのクラスを使う方法はざっくりと2つあって、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;

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

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

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

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

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

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

まとめ

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

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

標準
title-2b
Releases

バレンタイン特別企画:イケメンばかりにチョコは渡さない

こんにちは!新人森田です。
しんしんと雪が降り積もるホワイトバレンタイン、皆様いかがお過ごしでしょうか。

寒いし家から出たくない!

でもチョコが欲しい!

そんなあなたに朗報です!
ハレノヒバレンタイン特別企画ゲームを本日リリースいたしました!
その名も、

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

http://www.halenohi.jp/

タイトルがタイトルなのと、昨日の予告画像を見た限りではどんなゲームか予想がつかないと思うので、こちらでゲームの内容をご紹介します。興味が湧いたら是非プレイしてみてください。

ゲームスタート

0214-0

ゲームの読み込みが終了したらスタート画面が表示されます。
タイトルをクリックするとゲームスタートです。

プレイ画面

0214-1b

ルールは簡単!

  1. ゲームがスタートしたら、画面左からチョコを持った女の子がイケメンに向かって歩いてきます。
  2. 女の子をクリックすることでイケメンに渡されるはずだったチョコを奪い取れます。
  3. 制限時間50秒の間にどれだけチョコを奪い取れるか?!

内気そうな女の子がチョコを奪われて泣いて帰ったり、チョコを渡せて顔を赤らめているのを見るとちょっと心が痛む場面もあるかもしれません。女の子をいじり倒してチョコを奪いまくるもよし、キラキラのイケメンスマイルを眺め続けるもよし、自由にゲームを楽しんでいただけたらと思います。

—ラスト20秒から、あなたは衝撃の展開を目の当たりにするでしょう

リザルト画面

0214-2

結果画面はこのように表示されます。
「もう一度遊ぶ」ボタンでリトライ出来るので、満足いくまで遊んじゃってください。

(面白いと思ってもらえたらシェアしていただけるととても嬉しいです!)

ちなみにハレノヒメンバーはまだ誰もコンプリート(イケメンにチョコを1つも渡さない)出来ていません。コンプリート出来たら、どんな風に達成出来たかご指南ください。

ハッピーバレンタイン!

それでは男子も女子もイケメンのかたもそうでないかたも、
「イケメンばかりにチョコは渡さない」をプレイしてハッピーなバレンタインをお過ごしください!

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

http://www.halenohi.jp/

標準