2015年2月25日水曜日

EaselJSでのcacheは、処理が目に見えて軽くなり、重要

EaselJSでは、cacheがレンダリングにおいては便利。

Shapeなどで複雑なベクター画像は、cacheを使うと吉。
特に移動などを使うとなると、かなりcacheが効いてくる様子。
Spriteには効果ない様子。ベクターなどに効果あり。

参考になったページ。
http://espelada.sakura.ne.jp/chaotic/post-190/ 

「cashe」という書き方をして、私はハマりました。。。
「cache」が正しかった。「s 」じゃなく「c」。。。。
これは、かなりのローマ字綴りに慣れた日本人はハマりそう。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Textのcacheは、なぜかx,yが0,0のところからのキャッシュ領域でないと覚えてくれなかった。
ShapeなどではそのShapeのあるx,y座標からの長方形を切り取るかたちでないとダメだったが。

Textのcacheは、0,0からの領域指定がキモ。重要でした。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

以下のページがかなり良い解説を書いてくださっている。
http://blog.toggl.com/2013/05/6-performance-tips-for-html-canvas-and-createjs/

パフォーマンス向上の6つのコツ、みたいな。
そのTipsの最初は「Cache It!」。
やっぱりcacheですね。

以下は、canvasを二つ重ねる方法についての解説。
http://www.mikechambers.com/blog/2011/01/25/layering-multiple-canvas-elements-using-javascript-and-easeljs/

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

cacheをすると、Shapeオブジェクトは、ちょっと輪郭がぼやける。
まあ、それほど気にならない程度であり、CPU負担は軽くなるのがわかるので、まあ良いですね。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

containerもcacheすると、いろいろベクター画像を描画したコンテナがかなり軽くなる。
CPUの荷重が目に見えて軽くなった。
cacheは素晴らしい。
単にsomeobject.cache()と書いて、領域を指定するだけですから、お手軽です。

特にTextをTweenさせる際には、cacheさせるとかなり処理が軽くなるのでオススメでした。

2015年2月14日土曜日

sublime text3を使い始めたメモ

前から気になっていたsublime textを使い始めました。
codaを使っていたのですが、気になってsublimeを使ってみると、これがいろいろ便利!
うーん。。codaから乗り換えようかという気になりました。
(transmitは便利なので、これからも使っていくでしょう)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

さて、あまりにも便利なので、備忘録的に幾つか。

■「emmetでのhtmlタグ入力の超省力化」

emmetというzen-codingの後継をプラグインで。
・emmetは、例えば、option+control+enterした後、「 li*>a」などとすると、選択している全ての行にli要素を追加していってくれる優れもの。
 これは本当に素晴らしい!

・htmlを書いた時に<br />などの閉じタグがxhtmlのファイルでないとスラッシュがでないので、修正。以下のページのようにhtmlとすればOKだった。trueにすると、イマイチ。
http://front-end.hatenablog.jp/entry/2014/11/08/184343


■「関数名リスト ジャンプ」

「super+r」で起動され@以下の文字列をインクリメンタルサーチするoverlayコードジャンプが便利です。しかし、function以外もいろいろ表示されるので、以下のようなコードを、preferences -> keybindings - userにて記述。
[
{ "keys": ["super+r"], "command": "show_overlay", "args": {"overlay": "goto", "text": "@function "} },
{ "keys": ["super+shift+r"], "command": "show_overlay", "args": {"overlay": "goto", "text": "@"} }
]

これでfunctionから始まるものにジャンプしやすくなりました。(CMD+rでfunctionで始まる宣言がリストアップされるように設定。)

しかし一つだけ欠点が。ファイル内のfuncion宣言順ではなく、「function」の一文字1文字が検索に反映され、関数名がそれによってsortされてしまいます。
本当はfunctionリストがサイドバーにでも表示されるプラグインがあればいいのですが、これほど便利なsublime textでまだそのようなプラグインが見つかりません。不思議です。知っている方がおられたらお教えください。

■「単一ファイル内検索と置換」

CMD+shift+fで、複数ファイルが検索置換できるのは素晴らしい。
が、単一ファイル内で検索置換がしたかった。
いろいろ調べて、CMD+alt+fでできた。(mac)
これは便利です。
これまで、複数タブに渡って検索置換が行われてしまうので、弱っていました。

また、alt+control+enterで、一括置換もできた。replace all。このショートカットも便利。(emmetのタグ補完とかぶっているが。。)


■「日本語検索のenter問題回避」

人後で検索をしようとすると、「enter」キーを押した瞬間に検索開始されてしまい、うまく漢字変換ができません。
そこで、以下のページなどに対処方法が書かれています。
https://gist.github.com/chibicode/ad1f50b3b191ee694556
設定が若干面倒ですが、これを設定すると後が楽です。

2015年2月9日月曜日

TweenJSメモ

TweenJSをもっと使いこなせるようになるように、学習開始。
以下、メモです。

APIドキュメント。
http://www.createjs.com/Docs/TweenJS/classes/Tween.html

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Tweenではcallで関数を呼べるので、再帰的に自分を呼び出して処理を進めることができて便利。
その際、callに渡す引数は配列なので、単体の値を渡したくても配列で渡してやらなければならないのが重要。
そして、arguments[0]でアクセスすると受け取れる。以下のような感じ。

function nextTween(){
  var num = arguments[0];//渡されたパラメーターを配列で取得。

  if(num < ary.length){
   createjs.Tween.get(obj,{loop:false})
     .to({x: num*50, y:num*100 },100)
     .call(nextTween,[num+1]);//【重要】再帰関数
  }
}

2015年2月7日土曜日

Spriteの透過部分をクリックできないようにするために(Cocos2d-JS)

CreateJSというかEaselJSでは、Spriteの透過部分はクリッカブルではないという初期仕様で、感激しました。その方が、クリッカブル領域の処理としては自然だと感じます。

一方、Cocos2d-JSというかCocos2dでは、rectangleの領域全域がクリッカブルになり、透過部分が自動的にignoreされることはありません。

そのことについてググってみると、以下のような記事がありました。
http://stackoverflow.com/questions/10889170/cocos2d-2-0-ignoring-touches-to-transparent-areas-of-layers-sprites/ (iOSでのソリューション)

http://stackoverflow.com/questions/17584014/ignoring-touches-on-transparent-areas-cocos2dx
(その適用方法についての質問)

タッチしたポイントが透過かそうでないかを判別し、
その後、クリックドラッグ処理などを分岐させる、ということの様子。

たとえば地図アプリなどを作るときに、この処理はとても大事なので、
なんとか実現したいと思っています。

以下は、Cocos2d-xに関する記述。
http://discuss.cocos2d-x.org/t/how-could-i-get-the-alpha-value-of-a-pixel-in-a-texture/4957/10

要調査->自分

2015年2月3日火曜日

Cocos2d-JSをコンパイル用からwebのみ用を切り分けるための調査開始

Cocos2d-JSを使っており、コンパイル版のフォルダを生成した中から、webへの公開用に、如何にjsファイル群をまとめて軽くするかを調べています。

Cocos2d-JSのv3.2を使っているので、以下の記事はHTML版の時のものだから古いが、役に立ちそうなのでメモです。

http://www.raywenderlich.com/33028/how-to-make-a-cross-platform-game-with-cocos2d-javascript-tutorial-the-platforms

現時点での仕組みは変わっているので、どこをどう弄るかはまた要調査ということで。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

追記

js-testsとmoon-warriorsというサンプルアプリを見てみると、
project.jsonのファイル内のengineDirの記述が
../../frameworks/cocos2d-html5
という書き方になっているので、普通にディレクトリ構造でリンクしてやるだけだった様子。

が、ファイルを移動させると、うまくいかない。。。

何が問題なのか、まだファイル構造の全体がわかっていないので、要調査。

Cocos2d-JSの初期導入メモ【自分的に重要】

CreateJSでwebアプリを作り始めていたが、
iOS,Androidのアプリを作ることも考えると、Cocos2d-JSに手をつけねばと思い始めた。

Cocos2d-JSは、Cocos2dのHTML5版で、これまでCocos2d-xのJSB(JavaScript Binding)という位置付けであったものが、2014年に独立した模様。
この記事を書いている現在の最新版はv3.2(Cocos2d-xの最新版は3.3)

developerのマニュアルはこちら。
http://cocos2d-x.org/wiki/Cocos2d-js

webのみ版と、web以外にコンパイルできる版がある。
http://www.cocos2d-x.org/download

コンパイル版の環境の設定方法は以下。
http://cocos2d-x.org/docs/tutorial/framework/html5/parkour-game-with-javascript-v3.0/chapter1/en
WebStromはなかなか使いやすいIDEだったので仮導入してみました。


webのみバージョンは、jsが一つにまとまっていて(full版の圧縮版で1MB半、非圧縮で3MB強。liteは、圧縮版だと400kBほど)見通しが利く。以下がその解説。
http://cocos2d-x.org/docs/manual/framework/html5/v3/lite-version/en
ダウンロードは以下。
http://cocos2d-x.org/filecenter/jsbuilder/
webのみ版のliteは、使えるAPIが少ないのと、WebGLでレンダリングせず、canvasで普通に書き込む。

APIリファレンスはこちら
http://www.cocos2d-x.org/reference/html5-js/V3.2/index.html

Cocos2d-JSの本家フォーラムはこちら
http://discuss.cocos2d-x.org/c/cocos2d-x/javascript


私の目下の課題は、webのみ版Fullで書いて、コンパイル版に持っていけるようにする方法。
web公開をお手軽にしながら、コンパイル時にも問題ないようにするには、さてどうすればいいのか。ファイル構造がいろいろ違う感じなので、そもそも無理なのか。
ちょっとした工夫で可能なのか。。
調査していきます。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

以下、初期設定で分かりにくかったことの初心者メモです。(Mac環境)

まずすべてのデバイス向けFull版を落とし、setup.pyをterminalで走らせましたが、そのFull版のフォルダ内のframeworksなどから、プロジェクトをコピーする仕組みなので、そのフル版のフォルダを自分のUser名直下において管理することにしました。
User名直下の.bash_profileに、cocosコマンドへのPATHがsetup.pyによって書き込まれるので、とりあえずUser名直下に置いておくのが自分にはいいかな、と。

cocos new -l jsというコマンドをターミナルで、プロジェクトを作りたいディレクトリ内で走らせると、そこにプロジェクトのテンプレート一式が作り上げられます。

私のようなgameつくり初心者には、めまぐるしい作業です。。

とりあえずできたフォルダ内のsrc内にあるapp.jsが、実際のコードを書いていく場所である、と。
そこのコードを少しいじって遊ぶと、少しずつ基礎の基礎はわかってきます。

また、オススメは、Full版のsamples/js-testsにterminalでcdして行き(cd フォルダドラッグ)、「cocos run -p web 」とすると、自動的に立ち上がり、いろいろなサンプルが動いてくれます。
「サンプルが動いてくれるようになるのはどうすればいいのだ?!」としばし悩んで、ドキュメントを読み漁ってわかったので、同じような方のためにメモです。
js-tests内のindex.htmlを叩いても動かなかったもので。
cocos run -p webをすると、terminalがserverを自動的に起動してくれます。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

ちなみに、私はソースをGitとSourceTreeで管理していますが、
frameworks,toolsなどはcommitしなくてよいので、無視する必要があり、
それは、
repositoryのrepotitory settingsの中のadvancedの中でignore listを編集し、そこに一行ごとに
frameworks/
tools/
などと書き込んだらOKでした。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Cocos2dはかつて、iPhoneアプリをネイティブで書こうと思い、使ってみて、便利さを体感した。
しかし、Objective-Cになじめず、撤退。

その後、Cocos2d-xを使ってみようかと思うも、やはり、自分はC++を習得していないので学習コストを考えて手をつけず。

それからこのCocos2d-JSを見つけ、やっと手をつけました。

_superとかinitとかthisが、どうしてこのように書くのかの意味がまだ十分わからず、
CreateJSは楽しくシンプルで楽だなあと思いながら、学び始めています。
(JavaScriptそのものの理解不足と、Cocos2d-xとのJSBでのやり取りの仕組みがまだ理解できていない両方の問題によるようです。)

webだけで使うならCreateJSはとても楽しく書ける。
しかし、各種デバイスへの移植をするなら、Cocos2d-JSはとても良い。

とりあえず両方使いながらやってみるか、というのが現時点での自分の結論です。

Cocos2d-JSは、まだまだ使い始めるために時間がかかりそう。
特にweb公開とコンパイル向けとの両立のシンプルな方法の発見がネックです。