広告の限界を超える|セールス
広告の限界を超える|セールス
2018.06.09

Pixi.jsでCanvasをカンタンに触ってみよう!

はやち

どうもですよ、はやちですよ٩( ᐛ )و
今回は、Canvasの操作を高速に描画できるPixi.jsを触ってみました。
導入から実装まで、ご紹介したいと思います( ˇωˇ)☝

導入方法

npmはこちらからインストールしてお使いください!
npm install pixi.js

実装方法

image画像を操作する

画像を使用してCanvasに描画とアニメーションさせる方法をご紹介します( ˘ω˘)☝

はじめに表示するCanvasを用意します。
Canvasはサイズと背景色も設定できます( ˇωˇ)☝

let app = new PIXI.Application(800, 600, {backgroundColor : 0xDAE8F4});
document.body.appendChild(app.view);

いつも使っている画像を用意します( ˇωˇ)☝

let hayachi = PIXI.Sprite.fromImage('http://hayachi.github.io/images/hayachi-blue.png');

画像オブジェクトの中心を設定

hayachi.anchor.set(0.5);

画像オブジェクトを真ん中に寄せる

hayachi.x = app.screen.width / 2;
hayachi.y = app.screen.height / 2.5;

設定したものをCanvasに反映

app.stage.addChild(hayachi);

画像のアニメーションの設定とループ再生

app.ticker.add(function(delta) {
hayachi.rotation += 0.1 * delta;
});

これで実装は完了になります( ˇωˇ)☝

テキストを表示してみる

テキストの表示の仕方をご紹介します( ˇωˇ)☝

cssを設定するようにスタイルを設定します( ˇωˇ)☝

// スタイルを指定
let styleBig = new PIXI.TextStyle({
fontFamily: 'Comfortaa',
fontSize: 70,
align: 'center',
wordWrapWidth: 1000,
wordWrap: true
});
let styleSmall = new PIXI.TextStyle({
fontFamily: 'Comfortaa',
fontSize: 40,
align: 'center',
wordWrapWidth: 1000,
wordWrap: true
});

テキストに対して上記のスタイルを指定します( ˇωˇ)☝

// スタイルを反映
let textBig = new PIXI.Text('Pixi.js', styleBig);
let textSmall = new PIXI.Text('Standard animation', styleSmall);

それぞれのテキストの位置を調整します( ˇωˇ)☝

// テキストの位置を指定
textBig.x = 300;
textBig.y = 430;
textSmall.x = 180;
textSmall.y = 530;

それぞれ指定したテキストをステージに反映します( ˇωˇ)☝

// ステージに表示させる
app.stage.addChild(textBig);
app.stage.addChild(textSmall);

画像のアニメーションと、テキストを表示したものはこちらになります( ˘ω˘)☞三☞シュッシュッ

まとめ

いかがでしたか? ほかにもCanvasならではの操作がたくさんあるので、次回はもっと触っていこうと思います! 

ちなみに、テキストのオプション設定をするときは下のジェネレーターもあります。お試しくださいまし( ˘ω˘)☞三☞シュッシュ三卍
PixiJS Text Style