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

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

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

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

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

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

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

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

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

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

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

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