Getting Started
phina.js を読み込むだけで phina.js の全機能を使えるようになります。下記は最小サンプルになります。 また、テンプレートをダウンロードして使ったり、Runstant や RunStant Lite で今すぐに使いはじめることもできます。
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='http://cdn.rawgit.com/phi-jp/phina.js/v0.2.1/build/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();
});実行結果は次の様になります。
