おにぎりエンジン:基本的な使い方

ダウンロードして準備する

おにぎりエンジンのトップページで、「Googleドライブからダウンロードする」を選択する。


・ダウンロードアイコンをクリックするとダウンロードできます。

・適当にプロジェクトフォルダを用意して、そこにOnigiriEngine.jsと、templateフォルダに入っているindex.htmlgame.jsをコピーして入れておく。


・ここにimgフォルダやsoundフォルダを追加していったり、game.jsでゲームのスクリプトを書いていったり、index.htmlを変更したりしてゲームを作っていきます。

・OnigiriEngine.js はおにぎりエンジンの本体で、
 game.js などにゲームのスクリプトを書いていき、
 index.html で OnigiriEngine.js と game.js を読み込む、という感じです。

▲上に戻る


index.htmlの基本的な書き方

・基本的に、
 1.id="onigiri_canvas"canvasタグを設置する
 2.scriptタグで OnigiriEngine.js と game.js を読み込む
 …という点を抑えていればOKです。

▲上に戻る


game.jsの基本的な書き方

・基本的に、
 1.おにぎりエンジンを読み込む
 2.fpsなどを設定する
 3.画像・音声ファイルのファイル名リストを登録する
 4.画像・音声ファイルをロードする
 5.ロードしたらゲームのモロモロの処理の準備をする
 6.ゲームを起動する
 という感じで書いていきます。

OnigiriEngine(500,500);    //1.おにぎりエンジンを読み込む

window.onload = function(){
    //2.fpsなどを設定する
    onien.autoScale = false;
    onien.setCenter = false;
    onien.fps = 30;

    //3.画像・音声ファイルのファイル名リストを登録する
    onien.assetList = ["img/xxx.png","sound/xxx.mp3"]; 
    //4.画像・音声ファイルをロードする
    onien.load();

    onien.canvas.addEventListener("onienLoadFinish",function(){
        
        //5.ロードしたらゲームのモロモロの処理の準備をするスクリプトをこのへんに書く
        
        //6.ゲームを起動する
        onien.start();
    });
};

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.作成したレイヤーをゲームに追加
…という順序でレイヤーを作ります。

var layer = new OeLayer("layer1");
layer.addLayer();

new OeLayer(レイヤー名)で、レイヤークラスを作成します。レイヤー名の部分にはレイヤーの名前を文字列で書いておきます。

・作ったレイヤーをaddLayer();するとゲームに追加されます。

・続いて画像(スプライト)の作成方法は
 1.スプライトクラスを作成
 2.作成したスプライトをレイヤーに追加
 …という順序で画像を表示します。

var player = new OeSprite("img/player.png",10,10,70,100,1);
player.add("layer1")

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.作成した文字をレイヤーに追加
 …という順序で文字を表示します。

var startText = new OeText("START",50,50);
startText.add("layer1");

new OeText(表示したい文字,表示位置X,表示位置Y)で文字クラスを作成します。

そして、作った文字を add(レイヤー名) してレイヤーに追加することで文字が表示されます。

startText.text = "FINISH"; のように、文字クラスのtextパラメータを変更すると表示する文字を変更できます。

startText.x += 5; のように、文字クラスのxやyパラメータを変更することで表示位置を変更できます。

startText.visible = false; のように、文字クラスのvisibleパラメータを変更することで表示・非表示を制御できます。

・その他のパラメータや関数については「関数など一覧」をご覧ください。

▲上に戻る


毎フレームごとに処理をする

・スプライトクラスなどはenterframeパラメータにfunctionを設定することで、毎フレームごとに処理を実行できます。

var player = new OeSprite("img/player.png",10,10,70,100,0);
player.add("layer1");
player.enterframe = function(){
    player.x += 10;
}

・上の例だと、毎フレームごとにplayerスプライトのxが+10されて、どんどん右へ移動していきます。

▲上に戻る


クリックなどをされたら処理をする

・スプライトクラスなどはclickなどのパラメータにfunctionを設定することで、クリックなどをされたときに処理を実行できます。

var player = new OeSprite("img/player.png",10,10,70,100,9);
player.add("layer1");
player.click = function(){
    player.coma = 1;
}

・上の例だと、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

▲上に戻る


接触判定をする その1

・2つの方法で接触判定ができます。

・まずは、それぞれのオブジェクトの中心点の距離で判定する方法です。

//プレイヤーとモブを作成する
var player = new OeSprite("img/player.png",10,10,70,100,0);
var mob = new OeSprite("img/mob.png",10,120,70,100,0);
player.add("layer1");
mob.add("layer1");
 
//プレイヤーのenterframe処理で接触判定する
player.enterframe = function(){
    player.y += 10;
    if(player.contactCheck(mob,50) == true){
        player.coma = 6;
    }
}

・スプライトクラスとぷりアニクラスは、contactCheck(対象のスプライトなど,判定距離) で接触判定できます。

・それぞれの中心点の距離が判定距離で指定した数値以下であれば、接触したと判定して true を返します。それ以外の場合は false を返します。

・上の例では、 player と mob の中心点距離が50以下になるとplayerのコマ番号が0から6に変更されます。

▲上に戻る


接触判定をする その2

・もう1つの接触判定は、コリジョン設定によるものです。

・コリジョン設定は、接触判定範囲の設定です。

・例えばという感じでコリジョン設定するなら、colパラメータに
[37,60,7,40,12,13,33,22,55,11,61,40]
と設定します。

・右の画像の黒い部分がコリジョン判定範囲で、各頂点を配列としてコリジョン設定する感じです。CollisionSet.htmを使うと比較的簡単にコリジョン設定を作成できるかと思います。
(参考:CollisionSet.htmの使い方

//love1とlove2というスプライトを作成する
//※上記のハート画像
var love1 = new OeSprite("img/chip.png",10,10,70,70,4);
var love2 = new OeSprite("img/chip.png",200,10,70,70,4);
 
//コリジョン設定を行う
love1.col = [37,60,7,40,12,13,33,22,55,11,61,40];
love2.col = [37,60,7,40,12,13,33,22,55,11,61,40];
 
love1.add("layer1");
love2.add("layer1");
 
//love1のenterframe処理内で接触判定する
love1.enterframe = function(){
    love1.x += 10;
    if(love1.colCheck(love2) == true){
        love1.del();
        love2.del();
    }
}

・スプライトクラスとぷりアニクラスは、colCheck(対象のスプライトなど) で接触判定できます。

・自分のコリジョン判定範囲内に、相手のコリジョン設定の各頂点が入っていると、接触していると判定して true を返します。それ以外の場合は false を返します。

・上の例では、 love1 と love2 のコリジョンが接触すると、 love1 も love2 も消滅するようになっています。

colCheck(対象のスプライトなど,x,y) とすると、x,yの位置に自分が移動したと仮定して接触判定をすることもできます。

▲上に戻る


音の再生方法と停止方法

・BGMを再生するのは onien.bgm.start(音声ファイル名); です。
 注意点は、拡張子を省略することです。

//assetListに、同じ名前で違う拡張子の音声ファイルを登録しておく
onien.assetList = ["sound/bgm1.ogg","sound/bgm1.m4a"];
(中略)
//再生する時は拡張子を省略
onien.bgm.start("sound/bgm1");

・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 の欄をご覧ください。

▲上に戻る


ジェリーゼリーツールおにぎりエンジン > 基本的な使い方