enchant.jsで簡単にゲームが作れるテンプレート公開!!

enchantjs講座

今日は自分の作ったテンプレートを公開してみようかと思います(*´ω`)

このテンプレートではenchant.jsですぐにゲーム開発が始められるくらいに必要最低限の機能は入れてあります。初心者でもこのテンプレートと一冊enchant.jsの本を買ってくれば何とかゲームつくれるんじゃないかと思います(*´ω`)

しかし、プログラムの記事を書いといて言うのもなんですが、やっぱり他人に自分のプログラムを見せるのは恥ずかしい(*ノωノ)しかもテンプレートなんて裸を見られているにも等しい行為(*´Д`)ハァハァ・・

で、ここからダウンロードできます(サクッと進める)→ダウンロード

(なんか試しに自分でダウンロードするとマカフィーが危険とか言ってくるんですけど(;´・ω・)。自分で作って上げたのに危険て言われる悲しさよ(´;ω;`)

使い方と内容の説明

ダウンロードして解凍してフォルダ内にあるindex.htmlを実行するとブラウザが開いてゲームが起動します。

テンプレートなのでゲームとしての中身はないですが、一応プレイヤーキャラを操作できるようにだけはしておきました。

このテンプレートの特徴としては

  • タイトル画面、ゲーム画面、ポーズ画面、ゲームオーバー画面の切り替え
  • 時間のカウントダウン
  • 音の再生
  • ツイート機能

最低限ゲームらしく見える機能はあると思うので、あとは何かしらゲーム要素を付け加えれば立派なゲームになってくれると思います(*´ω`)

あと、音に関してですが、私はネットで見つけた無料で使える音源を使わせてもらってるのですが、それを一緒に配布することは出来ないので、プログラム内の音関係のところはすべてコメントアウトしてあります(そうしないとエラーになるので)。なので音を鳴らしたい場合はご自身で音源を用意してコメントアウトを解除してください(‘ω’)ノ

プログラム

一応プログラムの一部を載せときます。こんな感じになっとります。

あとがき

ゲーム作ったことないけど作ってみたいと思っている方はぜひ一度試してみてください(‘ω’)ノ

あと、enchant.jsの良い点を一つ上げるとしたら軽いことです。サクッと作ってサクッと実行してサクッと公開できます(自分のサイトがあればだけど)。まぁ他の環境で作ったことないんだけど(;´∀`)(でもunityのゲームってなかなか始まらなくてちょっとイライラしない?)

まぁそんなさっくり作れる感じなので他の環境でブイブイ言わしてる方も軽い気持ちでやってみたりして欲しいです(*´ω`)

enchant.jsで簡単な紙芝居風ストーリーシーンを作って遊ぼう!

enchantjs講座

今回は私が使っている紙芝居風ストーリーシーンのプログラムを紹介しちゃいます(*´ω`)

これは私のおバカゲームに必ずあるアホなオープニングやエンディングに使われる紙芝居風のシーンのプログラムです。リンク張っておくので一度ゲームを遊んでください↓

一枚の静止画を切り替えていくだけで大した機能もないですが、一応効果音やBGMも絵の切り替えに合わせて入れられるようになってます。

うまく使えば音付きのマンガみたいな感じにもできたりすると思うので挑戦してみてください

プログラムはこんな感じ

簡単に説明するよ

このプログラムは画面にタッチするたびにstory_data配列の内容を読み込んで画面に表示してます。

story_data配列のimageは画像、messageはメッセージ、seは効果音、bgmはBGMです。それぞれ必要な時だけ記述する。

メッセージで使えるのは全角のみ。半角スラッシュを改行文字にしてます。

そんだけ。あとはプログラムを読んで理解してくれ(^^;)

あとがき

画像が切り替わるだけのショボいプログラムですがうまく使えば結構楽しめると思います。

うまく改造すればサウンドノベルゲームなんかも作れると思います、たぶん。作ったことないから知らんけど(^^;)

enchant.jsのGroupクラスはとっても便利

enchantjs講座

enchant.jsでゲームを作っていて気付いたのがGroupクラスの便利さ。

実は最初は使い方が分からずあんまり使っていなかったんですが、何度か使っているうちに「そう使うものだったのか!」という発見がありました(;´∀`)

というわけで私なりに気づいたGroupの使い方を説明したいと思います。

Groupは親になる

まずGroupとは何かって話ですが、簡単に言うと要素の親になります。スプライトを画面に表示する際にaddChild()を使っていますが、綴りの通り子をくっつけているわけです。つまりルートシーンにaddChildするとルートシーンが親になります。

で、Groupを使うときはGroupにaddChildします。そうすることでGroupが親になります。

ちょっと何言ってるかわからない、ってなってるかもしれませんがenchant.jsではaddChildされた要素は親要素に対して座標を持ちます。つまりシーンにaddChildされるとシーンに、GroupにaddChildされるとGroupに対しての座標になります。

Groupの座標を変えるだけで済む

enchant.jsではスプライトなどが持つ座標は画面に対しての絶対座標ではなく、相対座標になっています。つまり、

親が動けば子も動く

ということです。例えばこんな感じのメッセージボックスを表示させたい場合

Groupを使ってこのメッセージボックスを作ると後で表示位置を変えたくなった時にGroupの座標を変えるだけで済みます。Groupの座標を変えるだけで子の要素も移動します。なぜなら子の要素は親の座標を基準にした座標になるからです。

さらに便利なことはGroupを拡大・縮小すると子要素も同じくそうなります。

あとがき

ちょっと親子関係について説明が下手で内容が伝わっていないんじゃないかと不安です(-_-;)

一応、親子関係でいうとGroupの親はシーンでシーンの親は画面になります。つまりシーンすら画面に対しての座標を持つので動かせます。

Groupを上手く使えば大きなキャラだって自由自在に動かせる!?はずです(^^;)

enchant.jsのクラスの作り方

enchantjs講座

enchant.jsにはクラスのようなものを作れる機能があります。実は私も正確にクラスというものがどういうものかは知らないんですが「役割をまとめたもの」という風に理解して使っています。

クラスの作り方

書き方としては以下のようになります。

まずクラスを記述して、newで生成するって感じです。これでクラスとして扱うことができます。

後はこの中にメンバやメソッドなどを書いていきます。

メソッドは以下のように書きます

各メソッドの間にはカンマが入ります。

 

使い方が決まってるメソッド

メソッドの中には使われ方が決まっているものもあります。

・initialize・・クラスをnewで生成したときに自動で行われる初期化処理です。初期値を設定しておきたいときなどに使います。もちろん後で呼び出して使うこともできます

・onenterframe・・フレームごとに行う処理を書きます。フレーム毎に勝手に処理してくれます。便利ですが個人的にはあまり使っていません。私はフレーム毎の処理はすべてメインループに書いています。その方が自分の考えた順番で処理させることができるし後で読み返したときに流れが分かるためです。ただし、基本的に流れに関係ないようなものはここに書くこともあります。(たぶんこれはSpriteなどにだけあるようです。なのでSpriteを継承しないとないみたい)

継承っていう機能

クラスには継承っていう別のクラスの機能を引き継いで新しいクラスを作る機能があります。たぶん最初はSpriteを継承してプレイヤークラスを作ったりすると思います。その際の書き方は以下のようになります

これでSpriteクラスを持った新しいクラスを作ることができます。もちろん自作のクラスも継承できます(enchant.Spriteの部分を自作クラスに変える)。

さらに、継承して作ったクラスを継承してまた新しいクラスをつくることもできます。継承を上手く利用するとプログラムを記述する量を格段に減らすことができます。ただし、それにはプログラムを再利用しやすいように考えて書く必要があるので初心者には難しいんですよね。。(;´Д`)まぁそういうこともできるって頭の片隅に入れておきましょう。

enchant.jsでメッセージの表示をしてみる

enchantjs講座

今回はenchant.jsでのメッセージの表示のさせ方を紹介します。

enchant.jsではLabelというクラスを使って文字を表示できるんですが、実はちょっとした問題があって、自動で改行させると文字が大きい場合重なってしまいます(訂正:どうやらこれは私の勘違いだったらしい(^^;))。

なのでその問題も解決しつつ、RPGやアドベンチャーゲームとかである「1文字ずつ表示しつつ画面押したら一括表示する」やつを作ってみました。

↑こんなやつ。GIFのフレームレートが低かったので数文字ごとに出ているように見えますがプログラムはちゃんと1文字ずつ表示します。

今回のプログラムでは画面のどこでも好きな場所にメッセージを表示できるように作りました。うまくやれば吹き出しのようにして出すこともできるかもね(‘ω’)ノ

使い方・内容説明

今回はGroupを継承してクラスを作りました。で、クラスを作る際に文字の大きさと文字を表示する場所の幅と高さを指定します。それをもとに計算して一行に表示する文字の数と行数を出してます。

このプログラムでは文字の大きさと表示域の幅から計算された文字数で改行を行います。それと「/(半角スラッシュ)」を改行文字として扱っています。表示したい文字列の改行したい部分に入れてください。

あと、全角専用です。半角文字を使うと文字の幅が違うので一行の長さに差が出てしまうので全角文字だけ使用してください。

プログラムの内容としてはjavascriptのsubstr()メソッドを使って一文字ずつ取得して、一行の限界文字数またはスラッシュで改行し、表示行の最大数まで来たら画面クリックを促す▶を点滅表示させます。クリックされたら表示に使っていた変数たちを初期化して続きを表示させます。

printメソッドをメインループの内に書き込むと動きます。

あとがき

うん、まぁやりたいことはできたなって感じかな(^^;)がんばればもうちょっときれいに書けるかなぁ。。

それにまだ実際にゲーム内で使ってないんだよね。とりあえず作ってみただけって言うね( ̄∇ ̄;)ハッハッハ

出来る方はお好きに改造して使ってくだされ(‘ω’)ノ

enchant.jsでのシーンの切り替えについて

enchantjs講座

ゲームではメインのゲームを遊ぶ部分以外にもタイトル画面やポーズ画面など、いくつかの違う画面を表示する必要があります。

enchant.jsではそれらの画面のことをシーンといい、それぞれのシーンを必要に応じて切り替えて表示することができます。

シーンの切り替えにはreplaceSceneとpushScene &  popSceneがあります

replaceSceneについて

replaceSceneはrootSceneの内容を指定されたシーンに書き換えます。なのでタイトル画面→メインゲーム→エンディングなど完全に違うシーンに移るときなどに使用します。

シーンは切替可能ということで独立したクラスとして作成できます。Sceneクラスを継承して各シーンのクラスを作成します。

上記のような感じにクラスを作るとクラスが生成された時点でroorSceneがこのシーンの内容に切り替わり表示されるようになります。

pushScene & popSceneについて

pushSceneとpopSceneは画面を一時的に切り替えたいときに使えます。

pushSceneはrootSceneの上に新しいシーンをのせるような感じになります。背景を指定しなければ下にrootSceneの内容がそのまま表示されます。ただし、rootSceneから切り替わっているのでrootSceneの動きは止まっています。

popSceneをするとrootSceneの上にあったシーンが消えてrootSceneに戻ります。

つまり一時的にしか画面の切り替えが必要のない、もしくはrootSceneの上に出したいシーン(ポーズ画面、会話イベントシーン)などに使うのに向いています。

シーンの切り替え時には要素の削除を忘れずに

画面の切り替えをして前のシーンが画面上消えてもシーンで使った要素が残っています。これはたぶんHTML5ゲームの特徴で、プログラムの変数とは関係なくHTMLの要素として記録されているので、別にHTMLの要素を消す必要があるようです。

この関数を使って忘れずに削除しておきましょう。

残り時間をカウントダウンする【enchant.js】

enchantjs講座

ゲームに制限時間を設けたいときに使えるクラスを作ってみました。

画面に文字を表示させるのでLabelクラスを継承して作っています。

プログラム

使うときは引数に分と秒をして使います。

残り時間が0になるとisTimeUpフラグがtrueになります。

簡単な説明

tickがフレームごとに加算されてそれが設定されているfps以上になると1秒としています。

他のやり方を検索で調べてみると除算を使ってやってるやり方ばかりだったので除算を使わないやり方をつくりました。enchant.jsではスマホで高FPSを出すのは難しいので除算はできるだけ避けたいと個人的に思ってます(実際どれくらい違うのかは知らんけどね(;´∀`))

あと、この方法だと正確に1秒を計れません(^^;)実際に計ってみると1分で2~3秒ずれてました。FPSがいつも確実に1秒に設定した数字になっているとは限らないので仕方ないことなんですけどね(;´∀`)