ラベル プログラミング_PixiJS の投稿を表示しています。 すべての投稿を表示
ラベル プログラミング_PixiJS の投稿を表示しています。 すべての投稿を表示

2018年7月14日土曜日

【PixiJS】 learningPixi(チュートリアル)の最初を解説


「pixijs」で検索すると一番上に出てくるサイトがこちら

ここから resources > view tutorials > Getting started with PixiJS と開くことで、

https://github.com/kittykatattack/learningPixi

こちらのサイトが表示されます。

PixiJSを使おうと思うと一度は見るページになるでしょう。
私も始めて見たんですが導入まで結構時間がかかってしまいました。

今日はPixiJSを使えるようにするための導入部分を解説したいと思います。
あとは自分でがんばって

1. インストールするもの(pixi.min.js)


まずPixiJSを動かすために専用のファイルが必要になります。
重要なのがインストールするものはホームページにでっかく出ているこっちではなく、




必要なのは pixi.min.js というファイルです。
しかし、上の方をインストールしてもこのファイルは得られません。なんじゃそりゃ

チュートリアルの"Installing Pixi"に従ってそれ専用のサイトに飛んでインストールするか、チュートリアルのサイトの一番上からインストールできます。

チュートリアルを進めるために結局これをインストールすることになります。
どうせならこっちの方を落とした方がいいと思います。

緑色のボタンで"Clone or Download"と書いてあるところを選択し、ダウンロードしましょう。

2. webサーバーを介そう



Introductionを読んで、Setting up、Pixi Applicationとstageを作った!
さーて次は画像を表示するのかー



画像が表示されないなぁ〜〜?

ローカルな環境でhtmlを開いても画像は表示されません!
"file:~"ではない方法で開かなくてはいけません。

https://qiita.com/massie_g/items/2913066e596dae197539

こちらのサイトで紹介されているので解説は省略します。
ちなみに私はVSCodeを使った方法で解決しました。VSCodeはさいつよ

(追記)
firefoxを使えばローカルな環境でhtmlを開いても画像が表示されます!
firefox以外のブラウザだと上記の作業が必要になります。

3. まとめ

  1. pixi.min.js をインストールする!
  2. webサーバーを介す!

おわり!