プログラミング初心者がphina.jsでゲームを作る⑧

phina.js
在宅さん
在宅さん

大まかなゲームの仕組みを作ったので、次は細かい素材の配置をしよう

床とブロックを画像にする

フィールドが物足りなくなってきたので、床とブロックをいい感じに整えたいと思います。キャラクターの所でもお世話になったぴぽや倉庫さんの画像を使用したいとおもいます。

ぴぽや倉庫様:https://pipoya.net/sozai/assets/charachip/character-chip-1/

床とブロックの準備ができたので、コードで反映させていきます。

phina.define("coori", {
  superClass: 'Sprite',
  init: function(index_x,index_y) {
    this.superInit('coori');
    var ani = FrameAnimation('coori_ss');
    ani.attachTo(this).gotoAndPlay('stay');
    this.width=length;
    this.height=length;
    this.x=this.calx(index_x);
    this.y=this.caly(index_y);
  },
  calx:function(index_x){
    var x = (width_span+length/2)+length*(index_x);
    return x;
  },
  caly:function(index_y){
    var y = (height_span+length/2)+length*(index_y);
    return y;
  },
});
phina.define("block_image", {
  superClass: 'Sprite',
  init: function(index_x,index_y) {
    this.superInit('block', block_size,block_size);
    var ani = FrameAnimation('block_ss');
    ani.attachTo(this).gotoAndPlay('stay');
    this.width=length;
    this.height=length;
    this.x=this.calx(index_x);
    this.y=this.caly(index_y);
  },
  calx:function(index_x){
    var x = (width_span+length/2)+length*(index_x);
    return x;
  },
  caly:function(index_y){
    var y = (height_span+length/2)+length*(index_y);
    return y;
  },
});

これで滑っている感じをうまくだせるようになりました。
そしてステージ1→ステージ2→リザルト画面→もとに戻るという遷移順にしました。
これで一通りのゲームの手順は作れたと思うので、あとはステージごとにどうブロックなどを配置するかになります。

Getting started | phina.js
タイトルとURLをコピーしました