ランゲーの作り方①　まずは準備から【enchant.js】

2019年1月20日

enchant.jsはまだまだ現役バリバリで使えるよ！

今や過去のものとなってしまったかのようなenchant.jsですが、いやいやまだまだ現役でゲーム作れますぜ！！ってことでゲーム開発講座をやってみたいと思います。

enchant.jsの良い所は特に開発環境を用意する必要がなくテキストエディタとブラウザさえあればすぐに開発でることです。まったくの初心者でもすぐにゲーム開発できます。初心者にとってこの手軽さはかなり大きなポイントだと思います。

テキストエディタとはプログラム書いたりするソフトでwindowsのメモ帳もそうなんですけど、メモ帳で書くのはちょっと厳しいのでこれだけは用意してください。ちなみに私はBracketsというテキストエディタを使っています。もしテキストエディタを持ってない方はこちらからダウンロードできます→Brackets

さて、講座といっても私も素人開発者なので私のやり方が絶対に正しいなんてことはありません。「私はこういう風に作りました」ということを書いていくだけなのでプログラムとして正しくなかったり、無駄なことしてるところもあったりすると思います。なのであくまで「ゲームの作り方の一つの例」として見てください(‘ω’)ノ

それからenchant.jsでゲームを作るにはjavascriptというプログラミング言語を使って行うんですがjavascriptがそもそもわからないという方は先に少しjavascriptの基本文法を勉強してください。

また、enchant.jsの基本的な部分に関してもここではあまり説明しません。基本的な部分(画像の表示方法とかね)の説明はもうすでに多くのサイトでされているのでわからないところは検索してください。

では、さっそくゲームの開発に入るわけなんですが、いくらenchant.jsを使って作っていくとは言っても一から作るのはとても大変なので私の作成したテンプレートをベースに開発していきます。必要最低限のプログラムが既に作ってあるのでゲーム制作がスムーズに進みます。

ダウンロードはこちら→ファイルのダウンロード

私のテンプレートには一緒にenchant.jsも入っていますが他のプラグインは入っていないので欲しい方はenchant.jsのページから全部ダウンロードしてください→enchant.jsのダウンロード（ダウンロードできなくなりました）

私のテンプレートプログラムはこんな感じになってます(クリックすると動きます)。
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></span>

テンプレートプログラムを実行してみる

templateファイルをダウンロード＆解凍してindex.htmlファイルをダブルクリックしてみてください。ブラウザが開いてゲームが始まります。

タイトル画面が表示されて画面タッチをするとゲーム画面に切り替わります。ゲーム画面にはへのへのもへじのキャラクターが表示されていて画面をタッチしながら動かすとキャラを動かすことができます。

左上にはポーズボタンがあり、ボタンを押すとポーズ画面になります。RESUMEをタッチするとゲーム再開、TITLEをタッチするとタイトル画面に戻ります。

右上には時間のカウントダウンが表示されていて0になるとゲームオーバー画面になります。ゲームオーバー画面ではツイートボタンが表示され、押すとツイート画面が表示されツイッターに投稿できるようになります。

この時点では音は再生されませんが音の再生機能もついています。音楽ファイルを用意すればゲーム内で使うことができます。無料で使える音楽素材サイトをまとめているのでよかったらチェックしてみてください。

無料で利用できる音楽・効果音素材サイト集

テンプレートの説明

今回はまずテンプレートの説明をしたいと思います。

var FPS = 30;
//画面サイズ関係
var SCREEN_WIDTH = 640; //画面幅
var SCREEN_HEIGHT = 900;//画面高さ
var GAME_SCREEN_HEIGHT = 900;//ゲーム画面
var GAME_SCREEN_WIDTH = 640;//ゲーム画面

FPSは1秒間に画面を更新する回数です。一般的なテレビゲームは60FPSなんですがenchant.jsはブラウザ上で動くため処理が遅いので半分の30FPSにしておきます(調べてみてね)。今のスマホなら30FPSでもだいたい問題なく動くと思います(ちょっと前までは30FPSでは処理落ちしていた)。

画面サイズは解像度とアスペクト比です。数字が大きいほど画面の表示がきれいになりますが大きな画像が必要になりデータが重くなるのでこのくらいが良いかと思います。アスペクト比はスマホは3：2くらいなんですがブラウザのアドレスバーがどうしても表示されるため縦を少し短くしています。

SCREEN_WIDTHとGAME_SCREEN_WIDTHの２つあるのはSCREEN_WIDTHは画面のサイズ、GAME_SCREEN_WIDTHはゲーム画面のサイズです。例えば画面下にコントローラー部分を作ったりする際にGAME_SCREEN_HEIGHTをコントローラー分小さく設定して使ったりするためです。

//ゲーム場面用定数
var SCENE_TITLE = 1;
var SCENE_MAINGAME = 2;

これはゲーム画面を切り替えるときに使います。数字で管理するよりわかりやすくするために変数を利用ます(上の画面サイズも同様ですね)。全部大文字で書いてある変数はプログラム内で変更しない変数と決めておきます。そしてこの変数を数字の代わりに使います。こうしておけばもし後で設定を変更したいときがあった場合(画面サイズを変えたいとか)、ここだけを修正すれば済みます。

//データはここへ
var ASSETS = {
    img_title:'img/title.png',
    img_player:'img/player.png',
    img_pause:'img/pausebutton.png',
    img_buttons:'img/buttons.png',
    img_gameover:'img/gameover.png',
    /*
    se_start:'sound/aaa.mp3',
    se_ok:'sound/bbb.mp3',
    se_cancel:'sound/ccc.mp3',
    se_select:'sound/ddd.mp3',
    bgm_main:'sound/abc.mp3',
    bgm_gameover:'sound/def.mp3',
    */
};

ASSETSはゲームで使う画像などのファイル情報を管理するオブジェクトです。必要なファイルはここに書いておいて後で一気に取り込みます。音のファイルの部分はコメントアウトしてます。音楽ファイルがあればコメントを解除してファイルを指定してください。