WEBGL.TNKER.COM

AwayJSの開発環境を手っ取り早く準備してみる

ちょっと全然勉強できてなかったWebGLに手を出してみようと思う。

生WebGLのお勉強はするとして、とりあえずなんか触ってみたいのでFlash時代懐かしの Away3DAwayJS とかいうものを出しているようなので、それをベースにいろいろ弄くる。

ちょっと調べてみたら、ここ最近(?)AwayJSのリソースの取り回しがいろいろ変わってるみたいなので、ちょっと自分用の環境準備のメモ書きを残しておく :)

開発環境

  • os
    • Max OSX Yosemite
  • editor
    • vim
  • source
  • cli tool
    • gulp
      • sudo npm install -g gulp
      • もしかしたらグローバルインストールしなくても良いかも

-

npm自体がインストールされてない人はnpm等々のインストールをしておきましょう :)
ここでの導入手順では割愛しまする :(

-

gulpをグローバルインストールしておく

Terminalを開いてもらって、下記コマンドを実行

$ sudo npm install -g gulp

インストールが完了したら、念のためパスが通っているか確認しておいてください

$ gulp[Enter]
$ [xx:xx:xx] Local gulp not found in xxx/xxx

みたいな出力がされればとりあえずパスは通ってます :)

AwayJS-Exampleのファイル構成確認してみる

適当な場所に上記に記載したAwayJSのExampleのリポジトリをcloneしませう

$ git clone https://github.com/awayjs/awayjs-examples.git

cloneすると、こんな感じのファイル構成になってると思う

clone直後の構成

bin配下

  • 各html
    • ビルドしたソースコードを確認するための各HTML
  • assets
    • 各ソースコードで利用されているリソース群
  • js
    • src配下のソースコードのビルド結果が格納されてます
    • awayjs関連の本体ソースは awayjs-dist-require.js に固められてます

src配下

bin配下に格納されている各HTMLで利用されるサンプルコード用のソースコード一式(typescript, javascriptファイル)が入っています。

既存ソースのビルドについて

AwayJS本体については、package.jsonで管理されているのでTerminalからpackage.jsonと同階層にカレントディレクトリを変更してもらって

$ npm install

もしくは

$ sudo npm install

してもらうと、AwayJSとgulpのタスクで利用されているモジュール一式が入るので、インストールが完了したら試しになんかソースコードビルドしてみましょう。

package.jsonと同じ階層にgulpのタスクファイル(gulpfile.js)があると思うので、そのディレクトリで

$ gulp compile --file Basic_View

とかやってあげれば、src/Basic_View.tsがビルドされてbin配下に移されるかと思います :)
ちなみに、普段作業をする際はwatchが楽なので

$ gulp watch --file [src配下の対象ファイル名]

みたいな感じでやると幸せになれます

あとは余計なファイル削ぎ落としてテンプレ化

assetsとか既存ソースとか全部削ぎ落とした。

tnker/awayjs-simply-template
https://github.com/tnker/awayjs-simply-template

こっからいろいろやっていこう :)