プロローグ 前回はFarとMidを独立させて、update functionも各自持たせるように変えました。 次はScroller functionを作って、FarとMidを配下に入れて、コントロール権をScrollerに持たせます。 Part2（続き） Ch03 動作メソッド化 Scrollerに任せる functio…

プロローグ 前回は画像を貼って、アニメーションまで完結しました。 これからの第二回と第三回はコードのメソッド化していきます。 Part 2 Ch02 画像メソッド化 Far functionにを作る function init(){ // レンダラーのサイズを指定する、コンテナ（枠）を作…

プロローグ 前回のものをもう一回見直して、コードを綺麗に整理しないとここにアップしないと決めました。まだまだ未熟なので、説明うまく伝えないところ、間違ってるところあれば、いつでもご指導頂ければ嬉しいです。 宜しくお願いいたします。 出処 Pixi.…

反省 チュートリアルを見ながら作ってましたが、理解間違ってるところあるじゃないかなと思って、part1から勉強し直しました。 そして、やっぱりミスを発見しました。 pixi.jsの最初のkittykatattackさんのチュートリアル： GitHub - kittykatattack/learnin…

前回の話 前回は初回で作ったもののリニューアルです。見た目や動き自体変わりがありません。 今回はチュートリアルのpart2の続きです。今まで作ってきたものをメソード化していきます。 Building a Parallax Scroller with Pixi.js: Part 2 続き 先ほどFar…

前回の話 前回は二枚の画像を重ねさせ、動かしました。 今回はそれの進化型です。 Building a Parallax Scroller with Pixi.js: Part 2 構造の理解 前回に出てきた二種類スプライト、スプライトとタイリングスプライトなんですが、どちらもwidth, height, al…

背景 Pixi.jsの公式サイトにはおすすめのチュートリアル幾つか載せています。 Tutorials - PixiJS v4 最近書き終えたばっかのこのシリーズ pixi.js カテゴリーの記事一覧 - manmanrai’s diary はこのチュートリアルを参照したものになります。 GitHub - kitt…

前回の話 最後のプロジェクト「宝探しゲーム」の下準備しました。 （setup function の中身） 続きは、play functionとend functionゲームの核心の部分です。 ※ 自分わかるように整理したので、チュートリアルの順番少し違います。 play function 登場人物と…

前回の話 WebGLでいろんな図形と文字の描き方を一通り復習しました。 これから本番に近づけたらいいなと。 衝突探知 理想はこんな感じです。 左のねこはキーボードで操作できる要素、右のブロックは動かぬもの、そして、上のメッセージはcanvasで書いた状態…

前回の話 スプライトのグルーピングとContainerとParticleContainerの話でした。 今日はWebGLで図形を描き方です。 図形の描き方 canvasのjavascript書いたことある方多分この部分飛ばしずつ進んで良いと思います。 まずは、PIXI.Graphicsを使って、色々描い…

前回の話 スプライト作成編終わりまして、（無限）アニメーションを作ってみました。 そして、キーボードの方向キーで上下左右でスプライトを移動させてみました。 スプライトのグルーピング グルーピングすることとは、新たなContainer()を作って、同じシー…

前回の話 スプライトを作る三つの方法の中の方法一と方法二、二つとも完結しました。 あと、方法三もJSONの部分を紹介しました。 三つの方法： 画像を使う（個別一個一個を読み込む） プロジェクト内に使いたい全部の画像（sub-image）をまとめた大き画像（t…

前回の話 スプライトを作る三つの方法を紹介しました。 三つの方法： 画像を使う（個別一個一個を読み込む） プロジェクト内に使いたい全部の画像（sub-image）をまとめた大き画像（tileset）を使う（複数枚の画像を一枚にまとめるってこと） JSON（texture …

背景 いまどき大人気の2D WebGLを作れるjsライブラリーです。日本語のチュートリアルも少ないなので（2017年4月の現時点）、英語のチュートリアル（文末にリンク貼っておきます。）を読み、単語の意味調べながら、やりながらちょっとずつ勉強の記録書きます…