phina.js を使って様々な図形を表示してみよう

phi phi on phina.js

phina.js Advent Calendar 2015 - Qiita 17日目のエントリーです.

今回は, phina.js にある図形を描画する機能をピックアップして紹介したいと思います. デフォルトでサークルや四角形, 星やハートなんかも描画できるので, シンプルなゲームであれば 画像がなくても作れちゃいます.

実際に図形を表示するサンプルをたくさん用意したので, よかったら動かしながら遊んでみてください.

Runstant Demo

とりあえずデモを見てみましょう. こんな感じで手軽に図形を描画することができます.

全てゲーム上の要素になるので座標を指定したり rotation で回転させたり scale で拡縮させたりと いったこともできます.

図形の表示方法

まず phina.js のテンプレートを開きます.

phina.js template

あとはシーンの初期化部分で図形を生成して, シーンに子供として追加するだけです.

phina.define('MainScene', {  
  superClass: 'CanvasScene',

  init: function() {
    this.superInit();

    // 図形をシーンに追加
    var shape = StarShape().addChildTo(this);
    // 位置を指定
    shape.setPosition(320, 480);
  },
});

runstant

描画できる図形の種類

各図形に対応するクラスがあります.

  • CircleShape ... サークルを表示
  • RectangleShape ... 四角形を表示
  • TriangleShape ... 三角形を表示
  • PolygonShape ... ポリゴンを表示
  • StarShape ... スターを表示
  • HeartShape ... ハートを表示

各図形クラスに指定できるオプション

各図形には色やサイズ, 角数といった様々なプロパティが用意されています. それらを初期化時に指定したり, 後でプロパティを指定して変更することで見た目を簡単に変えることができます.

それぞれサンプルを作ってみたので良かったら参考にしてください.

共通

幅を変更

screenshot

shape.width = 128;  

runstant

高さを変更

screenshot

shape.height = 128;  

runstant

半径を変更

screenshot

shape.radius = 128;  

runstant

背景色を変更

screenshot

shape.backgroundColor = 'gray';  

runstant

塗りつぶし色を変更

screenshot

shape.fill = 'yellow';  

runstant

ストローク色を変更

screenshot

shape.stroke = 'gold';  

runstant

ストローク幅を変更

screenshot

shape.strokeWidth = 8;  

runstant

RectangleShape

角丸を変更

screenshot

shape.cornerRadius = 10;  

runstant

PolygonShape

角数を指定

screenshot

shape.sides = 10;  

runstant

StarShape

角数を指定

screenshot

shape.sides = 10;  

runstant

凹みのパーセンテージを指定

screenshot

shape.sideIndent = 0.9;  

runstant

HeartShape

コーナーの角度を指定

screenshot

shape.cornerAngle = 60;  

runstant

おわりに

phina.js を使えば手軽に図形を表示できるというのが伝わったかと思います. ゲームを作る際に, とりあえず何かダミーで表示したいってときにも使えますね♪

次回は図形を使って色々なサンプルを作ってみたいと思います.