Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What is going on with this article?
@minimo

phina.jsでアクセサリを使ってみよう&作ってみよう!

More than 3 years have passed since last update.

この記事は、phina.js Advent Calendar 2016 12月8日の記事です。
昨日→phina.jsでアイコンフォントを使ってみよう by pentamaniaさん
明日→phina.jsのゲーム制作にあたって工夫したところと、JavaScript入門者が陥ったつまづきポイントについて。 by rrf_hhさん

アクセサリって?

phina.jsにおけるアクセサリとは、SpriteShapedisplayElement等にアタッチして機能を付加する事が出来るクラスです。
phina標準のアクセサリには、TweenerDraggable等があります。
これらを利用すると、そのクラスに応じた機能を簡単に利用する事ができ、また再利用が可能となります。

使い方

Draggableアクセサリを例にとって使い方を説明します。

以下のサンプルでは、★をドラッグして移動する事が出来ます。
http://runstant.com/minimo/projects/AccessorySample1

実際に動かしているのは以下のコードの部分です。

var shape = phina.display.StarShape();
//~中略~

//Shapeをドラッグで動かす
shape.setInteractive(true);
shape.on('pointmove', function(e) {
  this.x += e.pointer.dx;
  this.y += e.pointer.dy;
});

Shapeinteractiveフラグをtrueにして、pointmoveイベントでポインタの移動量を捉え、Shapeの移動を行っています。

アクセサリを使用して、同じ機能を実現したのが以下のサンプルです。
http://runstant.com/minimo/projects/AccessorySample2

ShapeにDraggerアクセサリをアタッチしています。
実際に使っているのはこの部分です。

var shape = phina.display.StarShape();
//~中略~

var drg = phina.accessory.Draggable();
drg.attachTo(shape);

DraggableからShapeAttachToして、Shapeに機能を付加しています。

複数のShapeにDraggableをアタッチしたい場合は、それぞれ新規に定義して、AttachToを行います。

色んなオブジェクトへDraggableをアタッチするサンプル
http://runstant.com/minimo/projects/AccessorySample3
Shape、Spriteどちらも同様にアタッチして機能を付加する事が出来ます。

1つのアクセサリを、複数のオブジェクトにアタッチするのは、問題無く動作する場合もあるのですが、解除時に問題が出る場合があるので止めておいた方が無難です。
それぞれ、新規にアクセサリを定義してアタッチを行ってください。

作ってみよう

この様に便利なアクセサリですが、自分で欲しい機能を作成する事も出来ます。
Draggableの応用で、タップしたらエフェクトが発生するアクセサリを作ってみましょう。

TapEffect
phina.define('phina.accessory.TapEffect', {
  superClass: 'phina.accessory.Accessory',
  init: function() {
    this.superInit();

    var self = this;
    this.on('attached', function() {
      this.target.setInteractive(true);
      this.target.on('pointend', function(e) {
        //10個星を出す
        for (var i = 0; i < 10; i++) {
          var s = phina.display.StarShape()
            .addChildTo(this)
            .setScale(0.5);
          var x = s.x+Math.randint(-50, 50);
          var y = s.y+Math.randint(-50, 50);
          s.tweener.clear()
            .to({x: x, y: y, alpha: 0}, 500,"easeOutSine")
            .call(function() {
              this.remove();
            }.bind(s));
        }
      });
    });
  },
});

targetがタップされたらエフェクトとして、10個星を出してランダムな方向にTweenerで移動させています。

コードの説明

this.on('attached', function() {
  this.target.setInteractive(true);
  this.target.on('pointend', function(e) {
    //10個星を出す
    for (var i = 0; i < 10; i++) {
        //~中略~
    }
});

やっている事は単純です。
アクセサリがオブジェクトにアタッチされるとattachedというイベントがアクセサリを対象に発火しますので、イベント内で設定されたtargetpointendイベント内で星を出す処理を追加しています。
再利用を考えるなら、detachedイベント内でオブジェクトからアクセサリを除去する処理を入れた方が良いでしょう。

おしまい

この様に、アクセサリを利用する事によって、オブジェクトの種類に関わらず、簡単に機能を追加する事が出来ます。
是非活用してみてください。

6
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
minimo
趣味でphina.jsとenchant.jsを使ってゲーム作ってます。最近はphina.jsがメイン。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
6
Help us understand the problem. What is going on with this article?