【phina.js】ゲーム作った

JavaScript phina.js

phina.jsでゲーム作りました。

f:id:hyonny:20170126121949p:plain

ここから遊べる => https://hyonny.github.io/games/1st/

フォントの読み込みに時間がかかるのでなにも表示されなかったら何度か再読み込みしてみてください。

爆弾💣の挙動が甘すぎるので修正予定……

js理解してなさすぎてコードも汚いから作り直したい

【AS3.0】obj.filters.push( filter ) は使えない

ActionScript 3.0

obj.filters:Arrayに対してpush()メソッドは使えないので
新たにフィルタを追加したい場合は以下のようにする必要があります。

obj.filters = [ glowFilter ];
var _filters:Array = obj.filters; // 一時配列にとっておく
_filters.push( blurFilter ); // 一時配列に追加する
obj.filters = _filters;

obj.filtersが未定義の場合は一時配列を用意する必要はありませんが
push()メソッドは同じく使えません。

定義済みのフィルタオブジェクトのプロパティ等を変更する場合も、
同様に用意した一時配列の内容を変更し、代入し直す必要があります。

なんで？

理由は単純なもので、DisplayObjectにはfiltersという
Arrayを引数としたsetterメソッドが定義されているからでした。

参考: 公式リファレンス
DisplayObject - Adobe ActionScript® 3（AS3 ）API リファレンス

【AS3.0】forとfor eachの使い分け（自己流）

ActionScript 3.0

オブジェクトを取り出しながら回すfor eachが美しいと思っていましたが
どうやらfor eachは順番を保証しないみたいです。

togetter.com

デストラクタや要素数をカウントするような順番の関係ないものにはfor eachを使い、
順番通りに処理してほしいものはforを使うことにします。

あと、for文のリファクタリングについての記事も読んだので
for文、for each文でこれから心がけたい書き方を自分用にメモしておきます。

for

var oldArray:Array = [ obj_1, obj_2, obj_3 ];
var newArray:Array = [];
var length:int = oldArray.length; // 配列の長さは最初にとっておく
var add_obj:int;
for( var i:int = 0; i < length; i++ ) {
  add_obj = oldArray[ i ]; // 要素を何度も呼び出す場合は一時変数に入れる
  trace( add_obj );
  newArray[ i ] = add_obj; // pushを使わなくていいときは使わない
}

for each

var array:Array = [ obj_1, obj_2, obj_3 ];
for each( var obj:Object in array ) {
  obj.destructor();
  obj = null;
}
array.length = 0;
array = null;

参考 第56回 【特別編】配列エレメントすべてをforループで扱う：ActionScript 3.0で始めるオブジェクト指向スクリプティング｜gihyo.jp … 技術評論社

【Python】pyenvでバージョン管理（導入だけ）

Python pyenv

新しい言語を触りたいというだけの理由でPythonに手を出してみます。

‣ ~ python -V
Python 2.7.9

macOSにはすでにPythonがインストールされています。

Python2とPython3は共存できるようなので、3の方も導入してみます。

‣ ~ brew install python3
‣ ~ python3 -V
Python 3.4.2

バージョン指定なしで3.4.2が入りました。

入門サイトを巡ると、2.7.9や3.5.Xを使っているところが散見されるので、
バージョンを揃えていきます。

Rubyでいうrvmやrbenvのようなバージョン管理ツールであるpyenvなるものがあるみたいです。
今回はその導入についてです。

さっそくインストール。

‣ ~ brew install pyenv
‣ ~ pyenv -v
pyenv 1.0.7

パスを通す

‣ ~ echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile
‣ ~ echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile

利用できるバージョンを確認

‣ ~ pyenv install --list
Available versions:
  2.1.3
  2.2.3
  2.3.7
...

バージョンを指定してインストール

‣ ~ pyenv install 2.7.10
Downloading Python-2.7.10.tar.xz...
-> https://www.python.org/ftp/python/2.7.10/Python-2.7.10.tar.xz
Installing Python-2.7.10...
patching file ./Lib/site.py
ERROR: The Python zlib extension was not compiled. Missing the zlib?

Please consult to the Wiki page to fix the problem.
https://github.com/yyuu/pyenv/wiki/Common-build-problems


BUILD FAILED (OS X 10.12 using python-build 20160602)
...

こけた

エラー文に書いてあるここへアクセス

http:// https://github.com/yyuu/pyenv/wiki/Common-build-problems

Alternatively, try reinstalling XCode command line tools for your OS (especially if you just upgraded your OS)

Xcode Command Line Toolsをインストール後再実行したらいけました。

‣ ~ pyenv install 2.7.10
Downloading Python-2.7.10.tar.xz...
-> https://www.python.org/ftp/python/2.7.10/Python-2.7.10.tar.xz
Installing Python-2.7.10...
patching file ./Lib/site.py
Installed Python-2.7.10 to /Users/hyon/.pyenv/versions/2.7.10

同様に3.5.1も入れて、インストール済みのバージョンを確認

‣ ~ pyenv versions
* system (set by /Users/hyon/.pyenv/version)
  2.7.10
  3.5.1

現在のバージョン確認

‣ ~ pyenv version
system (set by /Users/hyon/.pyenv/version)

全体で使用するバージョンの設定

‣ ~ pyenv global 3.5.1
‣ ~ pyenv version
3.5.1 (set by /Users/hyon/.pyenv/version)

プロジェクトごとだとか、ディレクトリ配下で使用するバージョンを指定する場合は
globalの部分をlocalにして設定します。

以上です。

‣ ~ python -V
Python 2.7.9
‣ ~ python3 -V
Python 3.4.2

んんん？？

【phina.js】2回目以降のTweenerアニメーションが動かないとき

JavaScript phina.js

ゲームを作ってるときにハマったもの。
解決済みです。

phinajs.com

1回しか動かない

たとえばクリックイベントなどでオブジェクトのアニメーションを繰り返したいとき。

動かないプレビュー

アニメーション部分の記述は以下。

star.tweener
.to({ y: star.y - 100 }, 100, "swing")
.call(function() {
  console.log("moved !!");
})

上にぐんぐん動かしたい……
エラーも出ないしコールバックも動作しないしでどん詰まりでしたが、
ある会話を発見して解決できました。

動いた！

Tweenerのリファクタについて · Issue #165 · phi-jp/phina.js · GitHub

結論から言うと、
clear()で前回のアニメーションをクリアするか、play()で明示的に実行するといいみたいです。

clear()

star.tweener.clear() // <= 前回のアニメーションをクリア
.to(/** 省略 **/)

play()

star.tweener
.to(/** 省略 **/)
.play() // <= 明示的に実行

Tweenerのソースコードを追ってみたところplayingという変数でフラグ管理がされていました。

初期化でplaying = true
アニメーション終了時にplaying = falseになり、
その後playing == falseだと動かず、
clear()、play()それぞれの中でplaying = trueに戻されて（？）いるよう。

動作させたい文脈に合わせて使い分けるのが好ましいと思われます。
今回は前回の動きに関係なく実行したいだけなので、play()を使うことにしました。

動くプレビュー

夜中に2時間くらい奮闘してたのでスッキリしました。
おしまい