どうもですよ、はやちですよ٩( ᐛ )و
今回は、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
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
