Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (12)
Ähnlich wie 「さくらのINFRA WARS」で 利用されている技術
Ähnlich wie 「さくらのINFRA WARS」で 利用されている技術 (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (11)
「さくらのINFRA WARS」で 利用されている技術
- 6. さくらのインフラウォーズ
- 9. 描画エンジン
- 11. PixiJSの主な仕事 生で触ると面倒なWebGLやCanvasを簡単に扱えるAPIを提供 const app = new PIXI.Application(256, 224) document.body.appendChild(app.view) const sprite = PIXI.Sprite.fromImage('aichan.png') sprite.x = app.screen.width / 2 sprite.y = app.screen.height / 2 app.stage.addChild(sprite) WebGLが無効な環境ではCanvasにフォールバック スプライト画像等のアセット管理 etc.
- 12. 生Canvasの場合 function init() { キャラクタなどの初期状態を設定 // 画面描画に関してやることはない } function tick() { 入力処理など キャラクタの状態や座標を再計算 } function repaint() { Canvas全体をクリア 背景を描く キャラクタを現在の座標に描く スコアを描く } 生Canvasとの違い PixiJSの場合 function init() { キャラクタなどの初期状態を設定 描画オブジェクトの階層構造を設定 } function tick() { 入力処理など キャラクタの状態や座標を再計算 } function repaint() { // 通常やることはない // 描画はPixiJSがやってくれる } 昔のFlashみたいなもの（普通のDOM操作に近い） 今回は生Canvasで書かれたコードをPixiJS仕様に書き換えた
- 13. スプライト
- 14. スプライトエディタ
- 16. aseprite -b sprites.ase --save-as {layer}-{slice}-{frame}.png
- 17. spritesheet‑js npmhttps://www.npmjs.com/package/spritesheet‑js 複数画像を1枚に結合、PixiJSアセットローダ用のJSONを同時出力 JSON中にオリジナルのファイル名をキーとする座標の辞書 →テクスチャの呼び出し部が透過的に書ける PIXI.loader.add('aichan.png') // バラでロード PIXI.loader.add('boss.png') // ... const texture = PIXI.utils.TextureCache['aichan.png'] const sprite = PIXI.Sprite(texture) ↓ PIXI.loader.add('spritesheet.json') // シートとしてロード // ... const texture = PIXI.utils.TextureCache['aichan.png'] // 元の名前で参照 const sprite = PIXI.Sprite(texture)
- 18. 仕組み sprites.json : { "meta": { "image": "sprites.png", // ... }, "frames": { "sprites-ai_guard-1.png": // 元画像の名前 { "frame": {"x":415,"y":69,"w":16,"h":24}, // それが含まれている位置 // ... }, // ... sprites.png :
- 22. フォント PixiJSのTrueTypeフォント描画機能 let text = new PIXI.Text( 'This is a PixiJS text', { fontFamily: 'Arial', fontSize: 24, fill: 0xff1010, align: 'center' } ); は、以下の理由で今回は使用していない ビットマップ風フォントをDotByDotで描画するのが難しい 複数の等幅フォントを組み合わせたい 気軽に外字を作りたい
- 30. GLSLでフィルタを書く void main(void) { vec2 pos = mapCoord(vTextureCoord) - offset; // 実画面XY座標 vec2 coord = pos / size * 2.0 - 1.0; // 実画面UV座標 [-1, 1] coord /= 1.0 - curve * coord.yx * coord.yx; // 歪んだ実画面UV座標 [-1, 1] vec2 coord2 = (coord * .5 + .5) * scale; // 歪んだ仮想画面UV座標 [0, 1] vec2 pos2 = coord2 * size; // 歪んだ仮想画面XY座標 pos2.x += cos(pos2.y * M_PI * 1.0) * .125; // 左右に波打たせる vec2 maskCoord = pos2 * vec2(1.5, 1.0); // マスク画像UV座標 vec2 pos2nn = floor(pos2) + vec2(.5,.5); // NearestNeighborなXY座標 pos2 = pos2 * (1.0 - CLEARNESS) + pos2nn * CLEARNESS; // NearestNeighbor座標を混ぜる gl_FragColor = texture2D(uSampler, unmapCoord(pos2)) // バッファ上のソース座標の色 * texture2D(mask, maskCoord); // マスク画像上の色 } GLSL＝ほぼC言語＋ベクトル操作の独特な表記法（ .xy 等） GLSLをコンパイルしてGPUに送る関数がPixiJSに備わっている vTextureCoord に実画面の座標が渡ってくるので、 そこに打つドットの色を gl_FragColor に代入する
- 33. 入力 キーボード入力はふつうのWeb開発と同じ PixiJSにはインタラクティブ機能もあるが、今回は未使用 別途GamepadAPIに対応 const pad = navigator.getGamepads()[0] const button = pad.buttons[0] // boolean|number const dx = pad.axes[0] // number 各社、ボタンIDや軸IDが異なることに注意 ハットスイッチはボタンの場合と軸の場合がある 今回は使用ボタン数が少ないのでさほど困らなかった
- 35. 乱数 一見ランダムな順番で出現する敵も、実は固定順 運ゲーにはしたくなかった その分覚えゲーになるので、その前提でレベルデザイン Math.random() ではシードを固定できない 生成済み乱数をデータとして持つのは管理が面倒 xorshift.jsを利用 https://www.npmjs.com/package/xorshift.js 「 n 周目の面データ」の乱数シードに n を混ぜる →似ているようで異なる面を無限に作れる
- 36. アニメーションの実装
- 37. やめようswitch地獄 function tick () { switch (state) { case 'stay': if (0 < --frame) break player.src = 'ai_jump.png' frame = 15; state = 'up' break case 'up': y-- if (0 < --frame) break frame = 15; state = 'down' break case 'down': y++ if (0 < --frame) break player.src = 'ai_stay.png' frame = 15; state = 'stay' break } player.style.top = `${y}px` requestAnimationFrame(tick) }
- 38. ジェネレータですっきり function* anime () { while (true) { player.style.top = `${y0}px` player.src = 'ai_stay.png' yield* wait(15) player.src = 'ai_jump.png' for (let y = 1; y < 16; y++) { player.style.top = `${y0 - y}px` yield } for (let y = 16; 0 < y; y--) { player.style.top = `${y0 - y}px` yield } } } const iter = anime() function tick () { iter.next() requestAnimationFrame(tick) }
- 40. ライブラリ公開 luacoro‑js buildbuild passingpassing npm packagenpm package 2.2.12.2.1 dependenciesdependencies nonenone LicenseLicense MITMIT https://www.npmjs.com/package/luacoro Lua‑likepseudo‑coroutineforJavaScript/TypeScriptusing generator. pixi‑tube‑filter npm packagenpm package 1.0.31.0.3 dependenciesdependencies nonenone LicenseLicense MITMIT https://www.npmjs.com/package/pixi‑tube‑filter Tube(CRT)filterforPixiJS.
- 41. ご清聴ありがとうございました