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

• 1日目 本日 JavaScript ゲームライブラリ『phina.js』をリリースしました! | phiary
• 2日目 ManagerSceneでゲームの流れを管理しよう | daishi blog
• 3日目 ゲーム開発 - 気鋭の新JSゲームライブラリ「phina.js」の概要を自分なりにまとめてみた - Qiita
• 4日目 【phina.js】Gridクラスを使いこなそう - Qiita
• 5日目 phina.js で Webフォント を使ってみるよ！ - Qiita
• 6日目 [phina.js] Tweenerを使いこなそう! [Tweener 基本編] - Qiita
• 7日目 [phina.js] サンプルから覚えるphina.js - Qiita
• 8日目 とりあえず試してみたいって方のための phina.js 入門 | phiary
• 9日目 【phina.js】グループ管理の基本テクニック - Qiita
• 10日目 phina.jsでレイヤーと仲良くなろう | daishi blog
• 11日目 【phina.js】Physicalクラスを使ってみよう - Qiita
• 12日目 [phina.js]SpriteSheetを使ってみよう！ - Qiita
• 13日目 phina.js のキーボード操作（倉庫番を作ってみた話） - Qiita
• 14日目 phina.js を使って 100 行縛りでゲーム作ってみた | phiary
• 15日目 phina.js でブロック崩しを作ろう | phiary
• 16日目 phina.jsでブロック崩さぬを作ろう - Qiita

今回は, 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 ... ハートを表示

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

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

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

共通

幅を変更

shape.width = 128;  

runstant

高さを変更

shape.height = 128;  

runstant

半径を変更

shape.radius = 128;  

runstant

背景色を変更

shape.backgroundColor = 'gray';  

runstant

塗りつぶし色を変更

shape.fill = 'yellow';  

runstant

ストローク色を変更

shape.stroke = 'gold';  

runstant

ストローク幅を変更

shape.strokeWidth = 8;  

runstant

RectangleShape

角丸を変更

shape.cornerRadius = 10;  

runstant

PolygonShape

角数を指定

shape.sides = 10;  

runstant

StarShape

角数を指定

shape.sides = 10;  

runstant

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

shape.sideIndent = 0.9;  

runstant

HeartShape

コーナーの角度を指定

shape.cornerAngle = 60;  

runstant

おわりに

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

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