phina.jsを使ってゲームを作る1

公開日：2021/07/03

昔なつかしいmappyを作ろうと奮闘しています。
enchant.jsで作ろうしましたが、開発がストップしているし、ライブラリーとenchant.jのバージョンが合わなくって動かない事があるのでやめて、phina.jsを使ってみることにしました。
私のメモです。

https://phinajs.com/ 　の画面の下「Join Development」から「GITHUB」を選択して、phina.jsをダウンロードしてきました。（下の画像の赤丸の箇所）

ZIPなので、自分のパソコンに展開をして使います。

「GETTING STARTED」より基本となるサンプル？を入手します。ZIPなので、自分のパソコンに展開をします。

ファイルを展開すると、htmlファイルとjsファイルがあり、htmlをクリックすると下のようなモノが表示されます。

Hell Word！

index.html

<!doctype html>

<html>
  <head>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <title>Getting started | phina.js</title>
    <!-- phina.js を読み込む -->
    <script src='phina.js'></script>

    <!-- メイン処理 -->
    <script src='main.js'></script>
  </head>
  <body>

  </body>
</html>

main.js

// phina.js をグローバル領域に展開
phina.globalize();

// MainScene クラスを定義
phina.define('MainScene', {
  superClass: 'CanvasScene',
  init: function() {
    this.superInit();
    // 背景色を指定
    this.backgroundColor = '#444';
    // ラベルを生成
    this.label = Label('Hello, phina.js!').addChildTo(this);
    this.label.x = this.gridX.center(); // x 座標
    this.label.y = this.gridY.center(); // y 座標
    this.label.fill = 'white'; // 塗りつぶし色
  },
});

// メイン処理
phina.main(function() {
  // アプリケーション生成
  var app = GameApp({
    startLabel: 'main', // メインシーンから開始する
  });
  // アプリケーション実行
  app.run();
});

phina.globalize();　　　は、phina.jsを使う為のおまじない
19行目～27行目　は、おまじない　　　


// メイン処理
phina.main(function() {
  // アプリケーション生成
  var app = GameApp({
    startLabel: 'main', // メインシーンから開始する
  });
  // アプリケーション実行
  app.run();
});

4行目～17行目　は、定義文

// MainScene クラスを定義
phina.define('MainScene', {
  superClass: 'CanvasScene',
  init: function() {
    this.superInit();
    // 背景色を指定
    this.backgroundColor = '#444';
    // ラベルを生成
    this.label = Label('Hello, phina.js!').addChildTo(this);
    this.label.x = this.gridX.center(); // x 座標
    this.label.y = this.gridY.center(); // y 座標
    this.label.fill = 'white'; // 塗りつぶし色
  },
});

23行目
startLabel: ‘main’, // メインシーンから開始する
startLabel　＝　MainScene 　のことで、これは、phina.jsで決まっていることみたい。

まとめ

背景の色を何色にする
この画像を表示する
右矢印キーを押したら、こういう動きをする　などまず、定義文を書く

19行目～27行目のおなじない文を入れる　と定義文に従って動いてくれる

なんか、こんな感じみたいです。