Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

pixi.js

pixi.jsでゲーム終了画面を実装する

せっかくゲームを作るわけですから、ゴールしたら何か表示したいですよね。 これは内部にフラグ……というか 実際のところ ゲームが終了したら、文字を出すだけの簡単処理を考えます。 var stage = new Container() var gameScene, gameOverScene var state; /…

pixi.jsの判定処理、及びcontainerの扱い

インタラクティブ性のあるゲームを作るなら避けては通れない衝突判定。 pixiでやる場合、自分で用意するしかありません。 実際のところ 猫が虎を吸収合併して大きくなる塊魂的なクソゲーのモックアップを考えます。キモとなるヒット関数はこんな感じ。 参考…

Pixi.jsでキー入力を受け付ける

PIXIでキー入力を受け付ける方法です。 実際のところ ベースは前回の記事。 新規実装分は基本的にLeriningPixiの内容に則ります。 が、キーアクションの指定部分は繰り返しが好みじゃなかったので、 厳密性を捨てて簡単に書いています。 function setup() { …

PIXI.loaderで読んだjsonから、複数のオブジェクトを描き出す

PIXI.loaderで読んだjsonから、複数のオブジェクトを描き出す方法です。 実際のところ 前回使ったanimals.jsonから、猫一匹、トラ二匹を表示します。 せっかくなので、盤面も描いてみました。 var oneChip = 65; var xAxis = oneChip * 16; var yAxis = oneC…

jsonで記述されたtexturetileの情報をTextureCacheで読み込む

実際のところ まず、必要なファイルを調達します。lerningPIXIに良いサンプルがあるので、使わせてもらいましょう。 $ cd IMAGE_DIR $ wget https://raw.githubusercontent.com/kittykatattack/learningPixi/master/examples/images/animals.json $ wget htt…

(調査中)Pixi js v3でTextureCacheの挙動が変わった(?)

lerningPixiを教科書に勉強していたのですが、詰まりました。 問題のところはtilesetのところ。 次のセクションでjsonによるが出てるので、もう少し調べて駄目ならコードでの動作指定は放棄したほうが良さそうです。 実際のところ tilesetは一度呼び出せばよ…

Pixi.jsでオブジェクトのドラッグ&ドロップを実装

Pixi.jsでオブジェクトのドラッグ&ドロップを実装する事ができます。 実際のところ 画像を読みだす部分からイベント実装までを抽出すると、こんな感じです。 PIXI.loader .add("catImg","views/images/cat.png") .load(setup); function setup() { //Create…

PIXI.loaderで読み込みオブジェクトにエイリアスをはる

Pixiで画像をはる場合に毎回毎回リンク貼るのは面倒ですよね。 そういう時にはエイリアスを使って楽をしましょう。 実際のところ 前回の記事をベースにします。 shuzo-kino.hateblo.jpこれまではPIXI.loader.resourcesで毎回毎回リンクを貼ってました。 エイ…

Pixi.jsで画像を読み込み

Pixi.jsで画像を読み込みます。 実際のところ 以前書いたexpress版を軸に、画像を付け加える場合を考えます。 shuzo-kino.hateblo.jpディレクトリ構造はこんな感じです。 cat.pngは公式のexampleからもらってきました。 . ├── app.js ├── images │ └── cat.p…

HTML5な2Dゲームをつくるライブラリ pixi.jsが凄い その3:expressJS上で動かしてみる

pixi.jsもJavascriptの眷属なわけで、当然nodeJsでも動きます。 身内向けゲームで小規模にやるだけなら、ほとんど手間の掛からないこの方法が無難でしょう。 実際のところ 前回の簡単アプリをexpressに再実装してみます。せっかくexpressにするので、ついで…

HTML5な2Dゲームをつくるライブラリ pixi.jsが凄い その2:簡単なアプリをローカルに作ってみる

実際のところ ふつーに画面を出すだけではイマイチ面白くないので 文字列を表示 ベクターな半透明円を表示 半透明円領域はクリックするとメッセージがでる という仕様にしてみます。 ディレクトリ構造は以下の様にしてみます $ tree . ├── index.html └── js…

HTML5な2Dゲームをつくるライブラリ pixi.jsが凄い その1:概要

pixi.jsはHTML5な2Dゲームをつくるライブラリです。 github.comwebGLを使ってcanvas内にレンダリングするスタイルのもので、 イマドキなブラウザなら大抵動作します。一時話題になった、影絵で表現された狐駆除ゲームも、このpixi.jsで作られています。 Figh…