pixi.js

目的

pixi.jsのキャッチアップ。

指針

• とにかくpixi.jsに触れる
• ES6使う

アプローチ

• まずはAPIになれる。一通りAPIを触る
• 内部コードの把握。段階ごとのアプローチを取る

環境

ローカル環境

• emacs 25.3.1
  • js2-mode
  • auto-complete

ライブラリ

• pixi.js 4.7.1
• その他ライブラリ
  • third_party/README.md に記載

TODO

• APIになれる
  • Larning Pixiこなしたので慣れたといえるだろう。
• 内部コードのインタフェース読み
• 内部コードの流し見
• 内部コードの全読み
• APIドキュメントの流し見
• APIドキュメントの全読み
• 周辺ライブラリを追う
  • https://github.com/pixijs/pixi-spine
  • https://github.com/kittykatattack/bump
  • https://github.com/kittykatattack/tink
  • https://github.com/kittykatattack/charm
  • https://github.com/kittykatattack/dust
  • https://github.com/kittykatattack/spriteUtilities
  • https://github.com/kittykatattack/sound.js
  • https://github.com/kittykatattack/smoothie

History

2018.4.23

• Learn Pixi.jsを進める
  • Chapter 4
• velocity.htmlを追加

2018.4.22

• Learn Pixi.jsを進める
  • Chapter 2

2018.4.20

• Learn Pixi.jsを始める
  • Chapter 1, 3

2018.4.19

• Learning Pixiを進める

2018.4.18

• Learning Pixiを進める
• (SpriteStudioのランタイムをPixi.jsで実現しようとして挫折...)

2018.4.17

• ParticleContainerを使う
• 内部コードのインタフェース読み、流し見
  • @mitsuhiko のコード（しかもシェーダ。彼シェーダ書くの...）が取り込まれてて衝撃を受ける

2018.4.16

• Learning Pixiを進める
• SpriteのTextureを動的に切り替える
• Maskを使う。PIXI.Graphicsで抜く

2018.4.15

• pixi-spine.jsを導入
• Spine(spineBoy)を試しに動かす

2018.4.14

• Learning Pixiを進める
• README.mdの整備。目的、アプローチ、TODOを定義する

2018.4.13

• Learning Pixiを開始
• hello! @yosuke_furukawa sprite!!
• scaleToWindowの導入。ウィンドウ領域に合わせる

Learn Pixi.js

英語だけど書籍出てたのでこなす。 => Learning Pixiが増量された書籍だった...

• [https://www.amazon.co.jp/dp/B01HXEJ4PC](Learn Pixi.js)

  • https://github.com/apress/learn-pixi.js

• Chapter 1: Making Sprites

• Chapter 2: Moving Sprites

• Chapter 3: Shapes, Text, and Groups

• Chapter 4: Making Games

• Chapter 5: Animating Sprites

• Chapter 6: Visual Effects and Transitions

• Chapter 7: Mouse and Touch Events

• APPENDIX Pixie Perilousness!—Complete Code

Learning Pixi

https://github.com/kittykatattack/learningPixi

• Introduction
• Setting up
• Installing Pixi
• Creating the stage and renderer
• Pixi sprites
• Loading images into the texture cache
• Displaying sprites
• Using Aliases
• A little more about loading things
• Make a sprite from an ordinary JavaScript Image object or Canvas
• Assigning a name to a loaded file
• Monitoring load progress
• More about Pixi's loader
• Positioning sprites
• Size and scale
• Rotation
• Make a sprite from a tileset sub-image
• Using a texture atlas
• Loading the texture atlas
• Creating sprites from a loaded texture atlas
• Moving Sprites
• Using velocity properties
• Game states
• Keyboarad Movement
• Grouping Sprites
• Using a ParticleContainer to group sprites
• Pixi's Graphic Primitives
• Displaying text
• Collision detection
• Case study: Treasure Hunter
• More about sprites