Blog

2012.02.28

Interaction Design向けのC++ライブラリ “pocode”

Yu Nejigane

Engineer

祢次金です。

今回はC++で書かれたオープンソースなライブラリ、pocodeを簡単にご紹介します。
pocodeはPotion社によって設計された、主にインタラクションデザインのためのライブラリであり、プラットフォームとしてはWindows、MacOS(Lion)、iOSに対応しています。オープンソースとして公開されたのは最近ですが、既にいくつかのプロジェクトで利用実績があるようです。

本ブログでも何度か触れているCinderやopenFrameworksと違うのは、描画したいオブジェクトをシーングラフに追加して管理する点です。pocodeではこのオブジェクトはpoObjectと呼ばれていて、このpoObject単位で各種イベントに対するハンドラを設定することもできます。FlashでいうSpriteのようなものです。

例として、pocodeに同梱されているサンプルから、あるParticleクラスの実装例を以下に示します。

#include "poObject.h"
#include "poShapeBasics2D.h"

class Particle : public poObject {
public:
	Particle();
	virtual void update();
	virtual void eventHandler(poEvent* event);
	poShape2D* shape;
	poPoint	velocity;
	float	rotationSpeed;
};
#include "Particle.h"

Particle::Particle() {
	float defaultScale = poRand(0.4, 1);

	shape = new poStarShape( 50, 50, 5, 10 );
	shape->fillColor = poColor::orange;
	shape->alpha = 0.75;
	shape->setAlignment(PO_ALIGN_CENTER_CENTER);
	shape->scale.set(defaultScale, defaultScale, 1);
	shape->scaleTween.setTweenFunction(PO_TWEEN_QUAD_OUT_FUNC);
	shape->scaleTween.setRepeat(PO_TWEEN_REPEAT_PINGPONG, 1);
	shape->scaleTween.setDuration(1);
	shape->addEvent(PO_MOUSE_DOWN_INSIDE_EVENT, this, "particle_clicked");
	addChild(shape);

	float posX = poRand(100, 700);
	float posY = poRand(200, 500);

	position.set(posX, posY, 0);

	float velX = poRand(-0.6, 0.6);
	float velY = poRand(-0.6, 0.6);

	velocity.set(velX, velY, 0);

	if(velocity.getLength() < 0.2) {
		velocity *= (0.2 / velocity.getLength());
	}

	rotationSpeed = poRand( -1.0, 1.0 );
}

void Particle::update() {
	position += velocity;
	if( position.x > 750 || position.x < 50 ) velocity.x *= -1;
	if( position.y > 550 || position.y < 150 ) velocity.y *= -1;
	rotation += rotationSpeed;
}

void Particle::eventHandler(poEvent *event) {
	if( event->message == "particle_clicked" ) {
		if( shape->scaleTween.isRunning() )
			return;
		shape->scaleTween.set( poPoint(2, 2, 1) );
		shape->scaleTween.start();
	}
}

上記のParticleクラスはpoObjectを継承しており、内部で星形のShapeをつくって自身にaddChildしています。また、そのShapeに対し、Tweenやクリックイベントに対するハンドラの設定等を行ってます。

updateは毎フレーム呼ばれるメソッドで、イベントハンドラとして明示的に設定してやる必要はないようです。このあたりはCinder等と同じ。このParticleクラスのインスタンスをアプリケーションのシーングラフにaddChildしてやれば、クリックに反応する星形が描画されるというわけです。

pocodeはまだ新しいので情報も少ないですが、プロジェクトサイトにはチュートリアルも幾つかあります。興味が湧いた方はチェックしてみてください。

  • Twitter
  • Facebook