・おにぎりエンジンのトップページで、「Googleドライブからダウンロードする」を選択する。
・ダウンロードアイコンをクリックするとダウンロードできます。
・適当にプロジェクトフォルダを用意して、そこにOnigiriEngine.jsと、templateフォルダに入っているindex.htmlとgame.jsをコピーして入れておく。
・ここにimgフォルダやsoundフォルダを追加していったり、game.jsでゲームのスクリプトを書いていったり、index.htmlを変更したりしてゲームを作っていきます。
・OnigiriEngine.js はおにぎりエンジンの本体で、
game.js などにゲームのスクリプトを書いていき、
index.html で OnigiriEngine.js と game.js を読み込む、という感じです。
・基本的に、
1.id="onigiri_canvas"のcanvasタグを設置する
2.scriptタグで OnigiriEngine.js と game.js を読み込む
…という点を抑えていればOKです。
・基本的に、
1.おにぎりエンジンを読み込む
2.fpsなどを設定する
3.画像・音声ファイルのファイル名リストを登録する
4.画像・音声ファイルをロードする
5.ロードしたらゲームのモロモロの処理の準備をする
6.ゲームを起動する
という感じで書いていきます。
1.おにぎりエンジンを読み込む
・OnigiriEngine(500,500);の数値はキャンバスサイズですので、好きな数値に変更してください。
・その後の処理はページが読み込まれてからしていきたいので、window.onload = function(){~}の中に書いていきます。
2.fpsなどを設定する
・onien.autoScaleでは、自動でキャンバスサイズの拡縮をするかを設定します。デフォルトはtrueです。falseにすると、ウィンドウサイズに合わせて自動で拡縮しなくなります。
・onien.setCenterでは、自動でキャンバスをセンター寄せするかを設定します。デフォルトはtrueです。falseにすると、ウィンドウサイズに合わせて自動で拡縮しなくなります。
・onien.fpsでは、ゲームのfpsを設定します。1秒ごとの画面描画回数です。
3.画像・音声ファイルのファイル名リストを登録する
・onien.assetListでは、ゲームで使用する画像・音声ファイルのファイル名(参照パス)のリストを配列として設定しておきます。
・使用可能な拡張子:png,jpg,wav,mp3,ogg,m4a
※これらの設定(autoScale,setCenter,fps,assetList)はonien.load()よりも前に書いておいてください。
4.画像・音声ファイルをロードする
・onien.load();で画像・音声ファイルの読み込みを開始します。
5.ロードしたらゲームのモロモロの処理の準備をする
・画像・音声ファイルの読み込みが完了すると onien.canvas から onienLoadFinish というイベントが発火します。
・ゲームのモロモロの処理は画像・音声ファイルの準備ができてから行いたいので、onien.canvas.addEventListener("onienLoadFinish",function(){~})の中に書いていきます。
6.ゲームを起動する
・モロモロの処理の後、onien.start();でゲームを起動します。
・次の項目から紹介するスクリプトは、基本的に「5」の箇所に書いていきます。
・まずあらかじめ、レイヤーを作っておきます。
・レイヤーとは、重ね合わせて表示する透明なシートみたいなものです。
1.レイヤークラスを作成
2.作成したレイヤーをゲームに追加
…という順序でレイヤーを作ります。
・new OeLayer(レイヤー名)で、レイヤークラスを作成します。レイヤー名の部分にはレイヤーの名前を文字列で書いておきます。
・作ったレイヤーをaddLayer();するとゲームに追加されます。
・続いて画像(スプライト)の作成方法は
1.スプライトクラスを作成
2.作成したスプライトをレイヤーに追加
…という順序で画像を表示します。
・new OeSprite(ファイル名,表示位置X,表示位置Y,1コマの横の大きさ,1コマの縦の大きさ,コマ番号)で、スプライトクラスを作成します。
・画像は、画像サイズを上記で設定した 1コマの大きさ で割って、それぞれにコマ番号が振られます。
・そして作ったスプライトを add(レイヤー名) してレイヤーに追加することで画像が表示されます。
・player.coma = 5; のように、スプライトのcomaパラメータを変更すると表示するコマを変更できます。
・player.x += 5; のように、スプライトのxやyパラメータを変更することで表示位置を変更できます。
・player.visible = false; のように、スプライトのvisibleパラメータを変更することで表示・非表示を制御できます。
・使用可能な拡張子:png,jpg
・その他のパラメータや関数については「関数など一覧」をご覧ください。
・画像同様、あらかじめ所属させるレイヤーを用意しておき、
1.文字クラスを作成
2.作成した文字をレイヤーに追加
…という順序で文字を表示します。
new OeText(表示したい文字,表示位置X,表示位置Y)で文字クラスを作成します。
そして、作った文字を add(レイヤー名) してレイヤーに追加することで文字が表示されます。
・startText.text = "FINISH"; のように、文字クラスのtextパラメータを変更すると表示する文字を変更できます。
・startText.x += 5; のように、文字クラスのxやyパラメータを変更することで表示位置を変更できます。
・startText.visible = false; のように、文字クラスのvisibleパラメータを変更することで表示・非表示を制御できます。
・その他のパラメータや関数については「関数など一覧」をご覧ください。
・スプライトクラスなどはenterframeパラメータにfunctionを設定することで、毎フレームごとに処理を実行できます。
・上の例だと、毎フレームごとにplayerスプライトのxが+10されて、どんどん右へ移動していきます。
・スプライトクラスなどはclickなどのパラメータにfunctionを設定することで、クリックなどをされたときに処理を実行できます。
・上の例だと、playerスプライトがクリックされると、表示するコマ番号が 9 から 1 に変更されます。
・以下、各クラスで使用できるイベント一覧です。
●OeLayer:click , mousedown , mouseleave , mousemove , mouseup
●OeMapLayer:click , mousedown , mouseleave , mousemove , mouseup
●OeSprite:click , mousedown , mouseleave , mousemove , mouseup
●OeHtmlTag:なし
●OeImgButtonHtmlTag:mousedown , mouseleave , mousemove , mouseup
●OeTextButtonHtmlTag:mousedown , mouseleave , mousemove , mouseup
●OeMessageHtmlTag:mousedown , mouseleave , mousemove , mouseup
●OePriani:click , mousedown , mouseleave , mousemove , mouseup
●OeText:click , mousedown , mouseleave , mousemove , mouseup
●OeText:click , mousedown , mouseleave , mousemove , mouseup
・2つの方法で接触判定ができます。
・まずは、それぞれのオブジェクトの中心点の距離で判定する方法です。
・スプライトクラスとぷりアニクラスは、contactCheck(対象のスプライトなど,判定距離) で接触判定できます。
・それぞれの中心点の距離が判定距離で指定した数値以下であれば、接触したと判定して true を返します。それ以外の場合は false を返します。
・上の例では、 player と mob の中心点距離が50以下になるとplayerのコマ番号が0から6に変更されます。
・もう1つの接触判定は、コリジョン設定によるものです。
・コリジョン設定は、接触判定範囲の設定です。
・例えばにという感じでコリジョン設定するなら、colパラメータに
[37,60,7,40,12,13,33,22,55,11,61,40]
と設定します。
・右の画像の黒い部分がコリジョン判定範囲で、各頂点を配列としてコリジョン設定する感じです。CollisionSet.htmを使うと比較的簡単にコリジョン設定を作成できるかと思います。
(参考:CollisionSet.htmの使い方)
・スプライトクラスとぷりアニクラスは、colCheck(対象のスプライトなど) で接触判定できます。
・自分のコリジョン判定範囲内に、相手のコリジョン設定の各頂点が入っていると、接触していると判定して true を返します。それ以外の場合は false を返します。
・上の例では、 love1 と love2 のコリジョンが接触すると、 love1 も love2 も消滅するようになっています。
・colCheck(対象のスプライトなど,x,y) とすると、x,yの位置に自分が移動したと仮定して接触判定をすることもできます。
・BGMを再生するのは onien.bgm.start(音声ファイル名); です。
注意点は、拡張子を省略することです。
・assetListに「同じ名前で違う拡張子」の音声ファイルを登録しておくことで、ブラウザで再生可能なファイルを自動で選択して再生を開始します。
・より具体的に言うと、複数の拡張子のファイルが登録されていれば、「 wav → mp3 → ogg → m4a 」の順で、ブラウザで再生可能かチェックしていき、再生可能なものがあった時点でそのファイルを再生する仕組みです。
・BGMの再生を停止するのは onien.bgm.stop(); です。
・効果音もほぼ同じで、再生は onien.se.start(音声ファイル名); で、停止は onien.se.stop(); です。BGMと同様、拡張子は省略して設定してください。
・BGMはリピート再生され、効果音は1回のみ再生されます。
・使用可能な拡張子:wav,mp3,ogg,m4a
・さらに詳しくは、「関数など一覧」の onienオブジェクト の bgm,se の欄をご覧ください。