Meteorというnode.jsで動く、大変面白いライブラリを知った。
今はver1.1。
リアルタイムにデータが複数ブラウザやマシン上で更新される、
あのnode.jsのページリロードなし同期の機能が、
かなり簡単に実装できる。
「体感！JavaScriptで超速アプリケーション開発 －Meteor完全解説」
http://gihyo.jp/dev/serial/01/meteor?ard=1430989100
あたりを読むと、概要がつかめる。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
https://www.meteor.com
が本家サイト。
かなり開発陣も気合が入っている印象。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Mac,Linuxだとterminal上で、インストールも簡単。
アプリのテンプレート作成も、コマンドで一発。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
todoアプリ作成の解説があり、
解説のコードを拾っていくと、パソコンでもiPhoneでも簡単に同期できるアプリができた。
meteor.com上に、簡単にdeployできて、試せる。それがとても気軽で楽しい。
以下がチュートリアル。
https://www.meteor.com/install
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
MongoDBをデフォルトで利用でき、Mongoも気になっていたので学習開始。
コマンドラインで、meteorアプリが起動中は、別terminal窓を開いていじれる。
「MongoDBの薄い本」という無料ドキュメントがあり、わかりやすかった。
http://www.cuspy.org/diary/2012-04-17/the-little-mongodb-book-ja.pdf
DBを最初からスキーマ設定なしで、気軽に作っていけるのがいい。
薄い本で、基本が学べるので、コマンドラインで楽しむのが吉。
リレーショナルDBとの呼び方の違いが最初、分かりにくかった。
以下、大体の対応表
・データベースは、Mongoでもデータベース
・テーブルは、Mongoではコレクション
・カラムは、Mongoではフィールド
・行は、Mongoではドキュメント
完全に一致するものでもないので、用語を変えた様子。
まあ、JSON形式での記述ができるので、確かにリレーショナルデータベースの概念とは違って見える。
一つのカラム内に配列を突っ込めたり、オブジェクトを突っ込めるという感じが柔軟ですごい。
2015年5月7日木曜日
2015年4月13日月曜日
JavaScript本質理解に役立つ二冊（「開眼本」と「忍者本」）
JavaScriptには、様々な理解しにくいポイントがあります。
それらのポイントを簡潔にこの「開眼！JavaScript」はまとめて解説してくれています。
良書。
もう一冊、JavaScript理解にお勧めなのが、かのjQuery開発者のJohn Resig氏による「JavaScript Ninjaの極意」。しかし、こちらはかなり噛みごたえのある、理解にパワーのいる本です。
私は、最初この忍者本を読んだのですが、文章の長さと、サンプルのトリッキーさで若干躓き、この開眼本を手にしました。
開眼本は、大変簡潔で、だいたい網羅している中心トピックは同じなのですが、よりシンプルであるがゆえに、分かりやすかったです。
開眼本で基本を理解してから、やや冗長な忍者本に戻ると、そこで言われていることがより深く理解できました。
この二冊は、相補完し合う感じで、JavaScriptの本質を理解したい場合には有益かと思います。
JavaScriptの脱初学者と、他の言語をやってきた方のJavaScript理解に役立つ本として、この二冊はお勧めです。
それらのポイントを簡潔にこの「開眼！JavaScript」はまとめて解説してくれています。
良書。
もう一冊、JavaScript理解にお勧めなのが、かのjQuery開発者のJohn Resig氏による「JavaScript Ninjaの極意」。しかし、こちらはかなり噛みごたえのある、理解にパワーのいる本です。
私は、最初この忍者本を読んだのですが、文章の長さと、サンプルのトリッキーさで若干躓き、この開眼本を手にしました。
開眼本は、大変簡潔で、だいたい網羅している中心トピックは同じなのですが、よりシンプルであるがゆえに、分かりやすかったです。
開眼本で基本を理解してから、やや冗長な忍者本に戻ると、そこで言われていることがより深く理解できました。
この二冊は、相補完し合う感じで、JavaScriptの本質を理解したい場合には有益かと思います。
JavaScriptの脱初学者と、他の言語をやってきた方のJavaScript理解に役立つ本として、この二冊はお勧めです。
2015年4月7日火曜日
npmで「sudo: npm: command not found」という警告が出たので対処。
node.jsで、npmにて-gオプションでグローバルにcentOSにモジュールをインストールしようとしたところ、
「sudo: npm: command not found」と怒られた。
いろいろ調べて、
sudoの権限を/stc/sudoerというファイルに/usr/local/bin（nodeの置き場）に置いていなかったことが原因だと判明。
参考になったのは以下。
http://stackoverflow.com/questions/4976658/on-ec2-sudo-node-command-not-found-but-node-without-sudo-is-ok
そんなわけで、vimでsudoにて開き、読み込み専用を無理やり編集して、
「sudo: npm: command not found」と怒られた。
いろいろ調べて、
sudoの権限を/stc/sudoerというファイルに/usr/local/bin（nodeの置き場）に置いていなかったことが原因だと判明。
参考になったのは以下。
http://stackoverflow.com/questions/4976658/on-ec2-sudo-node-command-not-found-but-node-without-sudo-is-ok
そんなわけで、vimでsudoにて開き、読み込み専用を無理やり編集して、
Defaults secure_path = /sbin:/bin:/usr/sbin:/usr/bin
よかった。
2015年3月3日火曜日
D3.jsで緯度経度をクリックで取得
D3ではありがたいことに、緯度経度をgeoJSONやtopoJSONからpixel変換した位置でmousedownにて取得することも可能。
そのためには、
projection.invert(point)
を使う。
https://github.com/mbostock/d3/wiki/Geo-Projections#invert
x,yを[x,y]の形で配列で返してくれる。
d3.mouse(this)でmouseクリック位置を取得してくれるので、これを使用。
ついでに、mouseクリックしたあたりに緯度経度を表示させたいので、
d3.event.pageXをつかってその位置に表示。
で、できたコードは以下のような感じです。
（緯度経度が非常に低い桁数まで表示されるので、toFixedで適当に丸めています。）
そのためには、
projection.invert(point)
を使う。
https://github.com/mbostock/d3/wiki/Geo-Projections#invert
x,yを[x,y]の形で配列で返してくれる。
d3.mouse(this)でmouseクリック位置を取得してくれるので、これを使用。
ついでに、mouseクリックしたあたりに緯度経度を表示させたいので、
d3.event.pageXをつかってその位置に表示。
で、できたコードは以下のような感じです。
（緯度経度が非常に低い桁数まで表示されるので、toFixedで適当に丸めています。）
d3.select("svg").on("mousedown.log", function(d) {
var latlon = svg.selectAll(".result");
latlon.remove();
var pointNow = projection.invert(d3.mouse(this));
var fixedX = Number(pointNow[0]).toFixed(3);
var fixedY = Number(pointNow[1]).toFixed(3);
svg.append("text").attr("class","result").attr("x",d3.event.pageX ).attr("y",d3.event.pageY).text("results:" + fixedX+","+fixedY);
});
gitで無視されているファイルを~/.gitignore_global編集で復活
gitにて、index.htmlがいつの頃からかコミットされていないことに気づき、なぜか調べると、どうも.gitignore_globalに書き込んでしまったらしい。
そこで、macにてどこにそのファイルがあるか調べると、~/にあった。
そこで、
~/.gitignore_global
を編集して、そこにあったindex.htmlの記述を削除すると無事コミットできた。
よかった。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
それにしても、いったい、いつ.gitignore_globalに設定してしまったんだろう。。。。
sourceTreeを使っているが、何かのタイミングでやってしまったんでしょう。
普段はterminalでgitコマンドは使っていないので。
そこで、macにてどこにそのファイルがあるか調べると、~/にあった。
そこで、
~/.gitignore_global
を編集して、そこにあったindex.htmlの記述を削除すると無事コミットできた。
よかった。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
それにしても、いったい、いつ.gitignore_globalに設定してしまったんだろう。。。。
sourceTreeを使っているが、何かのタイミングでやってしまったんでしょう。
普段はterminalでgitコマンドは使っていないので。
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させるとかなり処理が軽くなるのでオススメでした。
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は、例えば、option+control+enterした後、「 li*>a」などとすると、選択している全ての行にli要素を追加していってくれる優れもの。
これは本当に素晴らしい！
・htmlを書いた時に<br />などの閉じタグがxhtmlのファイルでないとスラッシュがでないので、修正。以下のページのようにhtmlとすればOKだった。trueにすると、イマイチ。
http://front-end.hatenablog.jp/entry/2014/11/08/184343
[
{ "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+alt+fでできた。（mac）
これは便利です。
これまで、複数タブに渡って検索置換が行われてしまうので、弱っていました。
また、alt+control+enterで、一括置換もできた。replace all。このショートカットも便利。（emmetのタグ補完とかぶっているが。。）
そこで、以下のページなどに対処方法が書かれています。
https://gist.github.com/chibicode/ad1f50b3b191ee694556
設定が若干面倒ですが、これを設定すると後が楽です。
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": "@"} }
]
しかし一つだけ欠点が。ファイル内の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]でアクセスすると受け取れる。以下のような感じ。
以下、メモです。
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
要調査->自分
一方、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の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公開とコンパイル向けとの両立のシンプルな方法の発見がネックです。
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だったので仮導入してみました。
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公開とコンパイル向けとの両立のシンプルな方法の発見がネックです。
2015年1月16日金曜日
EaselJSでObjectにnameをつけて、アクセスする方法メモ。
EaselJSでObjectにnameをつけて、アクセスする方法メモ。
getChildByName
を使用。
を使用。
txt.name="name1";
var txt1=stage.getChildByName["name1"];
みたいな。
リファレンス。
2015年1月11日日曜日
EaselJS(CreateJS)のtutorialリスト
EaselJSのtutorialページ群のリストがみつからないので、ここにメモ。
http://www.createjs.com/tutorials/Getting%20Started/
http://www.createjs.com/tutorials/Fonts/
http://www.createjs.com/tutorials/Inheritance/
http://www.createjs.com/tutorials/Animation%20and%20Ticker
http://www.createjs.com/tutorials/Mouse%20Interaction/
http://www.createjs.com/tutorials/HitTest/
元はこちらのrepository
https://github.com/CreateJS/EaselJS/
EaselJSのAPIリストはこちら
http://www.createjs.com/Docs/EaselJS/modules/EaselJS.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
以下は、本家以外のチュートリアルで役に立ったもの、ありがたきもの。
http://msto.jp/p/3/
（TweenJSについての包括的なサンプル。動くサンプルが多く、丁寧でわかりやすい。多謝）
http://www.dagage.com/weblog/archives/1103
cacheの使い所がわからなかったのですが、わかりました。
なるほど。ベクター画像をぐりぐり描いていて、速度が落ちたのでcacheしてみよう。
http://www.createjs.com/tutorials/Getting%20Started/
http://www.createjs.com/tutorials/Fonts/
http://www.createjs.com/tutorials/Inheritance/
http://www.createjs.com/tutorials/Animation%20and%20Ticker
http://www.createjs.com/tutorials/Mouse%20Interaction/
http://www.createjs.com/tutorials/HitTest/
元はこちらのrepository
https://github.com/CreateJS/EaselJS/
EaselJSのAPIリストはこちら
http://www.createjs.com/Docs/EaselJS/modules/EaselJS.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
以下は、本家以外のチュートリアルで役に立ったもの、ありがたきもの。
http://msto.jp/p/3/
（TweenJSについての包括的なサンプル。動くサンプルが多く、丁寧でわかりやすい。多謝）
http://www.dagage.com/weblog/archives/1103
cacheの使い所がわからなかったのですが、わかりました。
なるほど。ベクター画像をぐりぐり描いていて、速度が落ちたのでcacheしてみよう。
2015年1月6日火曜日
地図情報をD3で使えるJSON形式に
地図情報をJSON形式にしてD3.js等で表示させるために、以下のページが参考になる。
http://ja.d3js.node.ws/blocks/mike/map/
そして、国土数値情報というサイトにデータがある。
http://nlftp.mlit.go.jp/ksj/
利用規約をよく読み、ダウンロード。
以下のページに非常に親切な解説があった。
http://blog.hitsuji.me/make-shape-file/
親切で感謝です。
こちらも参考になりました。
http://kshigeru.blogspot.jp/2013/03/d3-geojson-polygon.html
そして、以下のページは日本語にも訳されており、基本を網羅してくださっているページなので、とても大事。
http://ja.d3js.node.ws/blocks/mike/map/
勉強になります。（筆者はD3の開発者さんですね。）
で、国土地理院から.shpデータを落とし、
それを親切なサイトさんで紹介してあってインストールしたQGISにてgeoJSON形式に変換し、
terminalにてtopoJSONに変換して、表示。
が、中心座標をその県の中心座標にしないと表示が真っ白で「あれれ？」となりました。
中心座標を緯度経度で決め、表示スケールを決めてみると、無事表示されました。
よかった！
参考：QGIS入門
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
補足1：topojson -p N03_004 -o hokkaido_topo.json hokkaido.geojson
といった形で、propertyをN03_004で市区町村データを保持してやり、-oでアウトプット。
東京の場合は「区」のデータが抜けるので、N03_003も加えてある必要あり。
topojson -p N03_004 -p N03_003 -o tokyo_topo.json tokyo.geojson
複数県に渡る場合は、N03_001の県情報も加えてやる必要があるかもしれず、その場合はN03_001を加え、「d.properties.N03_001」などでアクセスすると吉。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
補足2：geoJSONを生成する際に、「OGR error:Failed to create GeoJSON datasource:」というようなエラーが出て悩みました。
単純に、「Save as」のところで「Browse」をクリックして、保存先フォルダを選ぶ必要があっただけでした。。。こちらのページが参考になりました。感謝。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
追記1：topoJSONに変換しても、頂点データ数が多すぎて表示が重いので、減らす方法を探すと、便利なサイトがありました！！
感激しました。。。
大感謝です。
http://www.mapshaper.org/
ここにgeoJSONやtopoJSONをアップするだけ。
そして、頂点数を減らしていくと、1.1MBだったファイルが65kBなどに。。。
すごいっす。
（私のsafariでは変換後のデータをDLできず、chromeではOKでした。）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
追記2：command lineでtopoJSONに変換する際、ファイルサイズが大きいとrun out of memoryとなる。そこで解決策をググると、
https://github.com/mbostock/topojson/issues/71
こんなページがありました。
試してみます。。。
http://ja.d3js.node.ws/blocks/mike/map/
そして、国土数値情報というサイトにデータがある。
http://nlftp.mlit.go.jp/ksj/
利用規約をよく読み、ダウンロード。
以下のページに非常に親切な解説があった。
http://blog.hitsuji.me/make-shape-file/
親切で感謝です。
こちらも参考になりました。
http://kshigeru.blogspot.jp/2013/03/d3-geojson-polygon.html
そして、以下のページは日本語にも訳されており、基本を網羅してくださっているページなので、とても大事。
http://ja.d3js.node.ws/blocks/mike/map/
勉強になります。（筆者はD3の開発者さんですね。）
で、国土地理院から.shpデータを落とし、
それを親切なサイトさんで紹介してあってインストールしたQGISにてgeoJSON形式に変換し、
terminalにてtopoJSONに変換して、表示。
が、中心座標をその県の中心座標にしないと表示が真っ白で「あれれ？」となりました。
中心座標を緯度経度で決め、表示スケールを決めてみると、無事表示されました。
よかった！
参考：QGIS入門
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
補足1：topojson -p N03_004 -o hokkaido_topo.json hokkaido.geojson
といった形で、propertyをN03_004で市区町村データを保持してやり、-oでアウトプット。
東京の場合は「区」のデータが抜けるので、N03_003も加えてある必要あり。
topojson -p N03_004 -p N03_003 -o tokyo_topo.json tokyo.geojson
複数県に渡る場合は、N03_001の県情報も加えてやる必要があるかもしれず、その場合はN03_001を加え、「d.properties.N03_001」などでアクセスすると吉。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
補足2：geoJSONを生成する際に、「OGR error:Failed to create GeoJSON datasource:」というようなエラーが出て悩みました。
単純に、「Save as」のところで「Browse」をクリックして、保存先フォルダを選ぶ必要があっただけでした。。。こちらのページが参考になりました。感謝。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
追記1：topoJSONに変換しても、頂点データ数が多すぎて表示が重いので、減らす方法を探すと、便利なサイトがありました！！
感激しました。。。
大感謝です。
http://www.mapshaper.org/
ここにgeoJSONやtopoJSONをアップするだけ。
そして、頂点数を減らしていくと、1.1MBだったファイルが65kBなどに。。。
すごいっす。
（私のsafariでは変換後のデータをDLできず、chromeではOKでした。）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
追記2：command lineでtopoJSONに変換する際、ファイルサイズが大きいとrun out of memoryとなる。そこで解決策をググると、
https://github.com/mbostock/topojson/issues/71
こんなページがありました。
試してみます。。。
2015年1月5日月曜日
keycodeのobject作成
objectでkeycodeと対応文字列を格納したので、ここにメモしておきます。
あちこちさがしましたが、ぴったりなものが転がっていませんでしたので。
あちこちさがしましたが、ぴったりなものが転がっていませんでしたので。
var keycodes={48:0,49:1,50:2,51:3,52:4,53:5,54:6,55:7,56:8,57:9,65:"a",66:"b",67:"c",68:"d",69:"e",70:"f",71:"g",72:"h",73:"i",74:"j",75:"k",76:"l",77:"m",78:"n",79:"o",80:"p",81:"q",82:"r",83:"s",84:"t",85:"u",86:"v",87:"w",88:"x",89:"y",90:"z",188:",",189:"-",190:".",191:"/",16:"shift",13:"enter",8:"delete",37:"left",38:"up",39:"right",40:"down",32:"space",186:";",219:"@",0:"¥"};
タイピングソフトを作るときなどには使えそうです。
jQueryのコードを手で書いて、 なぜか実行されない時。。
jQueryのコードを手で書いて、
なぜか実行されない時。。
手書きで時々書くと、忘れるんですよね。。。
恥を忍んで、忘れぬように書いておきます。
なぜか実行されない時。。
$(function(){...});のラップを忘れている確率高し。自分。。。。
手書きで時々書くと、忘れるんですよね。。。
恥を忍んで、忘れぬように書いておきます。
EaselJSでのmouse EventクラスAPIリファレンス。
EaselJSでのmouse EventクラスAPIリファレンス。
http://www.createjs.com/Docs/EaselJS/classes/MouseEvent.html
pointerIDがユニークIDの参照プロパティ。
primaryは、最初のtouchの認識。boolean。mouseの場合は、いつもtrue。
timeStampもあった。number。イベントが発火した時間を取得。
targetはObjectを返す模様。
http://www.createjs.com/Docs/EaselJS/classes/MouseEvent.html
pointerIDがユニークIDの参照プロパティ。
primaryは、最初のtouchの認識。boolean。mouseの場合は、いつもtrue。
timeStampもあった。number。イベントが発火した時間を取得。
EaselJSのtextクラスのAPIリンクメモ
EaselJSのtextクラスのAPIリファレンスリンクメモ。
http://www.createjs.com/Docs/EaselJS/classes/Text.html
と、一度中身を書いたテキストも、
http://www.createjs.com/Docs/EaselJS/classes/Text.html
title = new createjs.Text(txt, "36px Arial", "#777777");
と、一度中身を書いたテキストも、
title.text="test";といった感じで、変更可能。
EaselJSでのtouchの実装部分コード、リンクメモ
EaselJSでのtouchの実装部分コード、リンクメモ。
http://www.createjs.com/Docs/EaselJS/files/easeljs_ui_Touch.js.html#l41
APIリファレンスはtouchについての言及が少ないのは残念。
http://www.createjs.com/Docs/EaselJS/classes/Touch.html
基本、モバイルよりパソコンを主眼にしておられるのだろうか。
頑張ってmouse eventのAPIを見ながらやるしかないかも。
http://learnaboutjs.blogspot.jp/2015/01/easeljsmouse-eventapi_5.html
http://www.createjs.com/Docs/EaselJS/files/easeljs_ui_Touch.js.html#l41
APIリファレンスはtouchについての言及が少ないのは残念。
http://www.createjs.com/Docs/EaselJS/classes/Touch.html
基本、モバイルよりパソコンを主眼にしておられるのだろうか。
頑張ってmouse eventのAPIを見ながらやるしかないかも。
http://learnaboutjs.blogspot.jp/2015/01/easeljsmouse-eventapi_5.html
EaselJSでオブジェクトをグループ化するメモ
EaselJSでオブジェクトをグループ化するメモです。（超初心者な記事で失礼）
方法が以下にあったのでリンク。
http://community.createjs.com/discussions/easeljs/1146-how-to-group-different-objects
containerをつくって、stageにaddしてOK.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
追記：containerはいろいろ便利。
ただ、若干のoverheadは発生する様子。
方法が以下にあったのでリンク。
http://community.createjs.com/discussions/easeljs/1146-how-to-group-different-objects
containerをつくって、stageにaddしてOK.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
追記：containerはいろいろ便利。
ただ、若干のoverheadは発生する様子。
各iPhoneの画像解像度について分かりやすい表。
iPhoneの画像解像度について、まとめてあった。
http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
paintcodeのサイトから。
pointとpixelと再サンプリングの関係がやっとわかった。
ありがたい表でしたm(_ _)m
(pointはあくまでpoint。解像度とは違う。pointが320でも、解像度で言えばretinaだと640pixel。ということだとやっと理解。)
それぞれ横幅だけで考えると、320,375,414,768,768。
http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
paintcodeのサイトから。
ありがたい表でしたm(_ _)m
(pointはあくまでpoint。解像度とは違う。pointが320でも、解像度で言えばretinaだと640pixel。ということだとやっと理解。)
他にも、ios全般についてのサイズの纏めがあった。
いろいろありがたい。4s以前がないが。
（実際の確認はリンク先のサイト自体にてお願いいたします。）
で、要するに、以下のようにpointを考えれば良いようだ。解像度はおいておいて。
| Logical resolution (points) | 320 x 568 | 375 x 667 | 414 x 736 | 1024x768 | 1024x768 |
320pointを基準に考えると、0,+55,+94,*2+128,*2+128
そこから考えると、各iPhoneは320にちょっと50~100プラスぐらい。
iPadは320の2倍強。
解像度は、*2,*3がある。6+、iPad retinaが*3。
それらの画像を用意する。
縦は、
568,667,726,1024,1024
0,+99,+158,*2-112,*2-112
iPhoneは568に100~150プラスぐらい。(4以前はおいておいて）
iPadは2倍弱。
CreateJSのCDNリンク。EaselJS第一歩。
CreateJSの現在の最新版CDNリンク。
https://code.createjs.com/createjs-2014.12.12.min.js
総合ページは以下。
http://code.createjs.com
easelJS始め方のページ
getting started
個人的には公式の「ぐるぐる」のデモが好き。
また、「Drag & Drop」というこのデモでは、daisyの画像の花びらの無い空白部分ではマウスオーバーしても反応しない、というのがすごいと驚いた。どうなってるんでしょう。
これらのデモは、右下の「LIVE EDIT+」というボタンで、ライブ編集できる。
グルグルのデモを色々いじって遊んでみた。
良く出来ている。
色々アプリのアイデアがあるので、これから一つ一つやってみたい。
FALSHデベロッパーの大御所の方が中心になって開発しておられる、ということで、これまでのFlash関連の情報が活用できそうなのもありがたい。
こちらではWonderFLからの移植をしておられる方の解説があり、面白かった。
https://code.createjs.com/createjs-2014.12.12.min.js
総合ページは以下。
http://code.createjs.com
easelJS始め方のページ
getting started
個人的には公式の「ぐるぐる」のデモが好き。
また、「Drag & Drop」というこのデモでは、daisyの画像の花びらの無い空白部分ではマウスオーバーしても反応しない、というのがすごいと驚いた。どうなってるんでしょう。
これらのデモは、右下の「LIVE EDIT+」というボタンで、ライブ編集できる。
グルグルのデモを色々いじって遊んでみた。
良く出来ている。
色々アプリのアイデアがあるので、これから一つ一つやってみたい。
FALSHデベロッパーの大御所の方が中心になって開発しておられる、ということで、これまでのFlash関連の情報が活用できそうなのもありがたい。
こちらではWonderFLからの移植をしておられる方の解説があり、面白かった。
canvas系のjsライブラリを色々物色して。
canvas系のjsライブラリを色々探してみた。
結局、今のニーズを色々満たしそうなのは、王道のCreateJSかな、と。
私のニーズは
・ドキュメント類、サンプルが多い。
・マルチデバイス（touch）対応
・書き方がシンプル目
・拡張性が高い
・表示が軽い（WebGL対応）
といったところ。
以下、完全に私的感想です。
まず、pixi.jsを試してみて、かなり良かったが、ドキュメント類がちょっと自分にとっては分かりにくめ。APIのドキュメントなど。WebGL対応や、拡張性の高さ、書き方のシンプルさなど、かなりポイントは高く、私のようなヘタレでなければかなり使えるのでは。
googleやマクドナルドが公式に利用してサイトアプリに使っているのもすごい感じ。
two.jsを使ってみて、かなり好印象だったが、まだテキストなどの描画に対応していないので、残念ながら棄却。サンプル類は、かなり自分の好みだったが。「まだ対応していない」と書いてあるので、そのうち対応するのだろう。
fabric.jsは、ドキュメント類がとても親切で、分かりやすく、好印象。制作陣がドキュメントを大事にし、ユーザーを大事にしている様子が伝わってきた。メインのプログラマは、prototype.jsのコア開発者の一人だったよう。まだWebGLに対応しておらず、現時点ではパス。今後のtodoの中に、WebGL対応が書いてあるので、それが実現されれば使いたいツール。
Paper.jsは面白い感じだが、touch系のAPIについて言及が無い感じなので、実際はあるのかもしれないがパス。これも面白そうなライブラリではある。うにょうにょして面白い。
結局、今のニーズを色々満たしそうなのは、王道のCreateJSかな、と。
私のニーズは
・ドキュメント類、サンプルが多い。
・マルチデバイス（touch）対応
・書き方がシンプル目
・拡張性が高い
・表示が軽い（WebGL対応）
といったところ。
以下、完全に私的感想です。
まず、pixi.jsを試してみて、かなり良かったが、ドキュメント類がちょっと自分にとっては分かりにくめ。APIのドキュメントなど。WebGL対応や、拡張性の高さ、書き方のシンプルさなど、かなりポイントは高く、私のようなヘタレでなければかなり使えるのでは。
googleやマクドナルドが公式に利用してサイトアプリに使っているのもすごい感じ。
two.jsを使ってみて、かなり好印象だったが、まだテキストなどの描画に対応していないので、残念ながら棄却。サンプル類は、かなり自分の好みだったが。「まだ対応していない」と書いてあるので、そのうち対応するのだろう。
fabric.jsは、ドキュメント類がとても親切で、分かりやすく、好印象。制作陣がドキュメントを大事にし、ユーザーを大事にしている様子が伝わってきた。メインのプログラマは、prototype.jsのコア開発者の一人だったよう。まだWebGLに対応しておらず、現時点ではパス。今後のtodoの中に、WebGL対応が書いてあるので、それが実現されれば使いたいツール。
Paper.jsは面白い感じだが、touch系のAPIについて言及が無い感じなので、実際はあるのかもしれないがパス。これも面白そうなライブラリではある。うにょうにょして面白い。
tmlib.jsは、国内の若手の方が開発しておられる様子。面白そう。子どもと一緒にプログラミングを学ぶ時にとっつきやすそうなサイトの作り。イラストがとても可愛い。WebGLにこだわらないときは良さそう。
ひよこのキャラで自由に使える素材があるなど、楽しい。
enchant.js。ゲームづくりに便利そう。レンダリングの面で、pixiやCreateJSのWebGLとの差が見え、またこの半年ほどバージョンアップ情報が無いことから、少し力が今は入っていないのかな、という感じで様子見。
CreateJSは王道の様子。しかし、クロスプラットフォームで、特にAndroidで困った、という記事を読み、ちょっと敬遠してみていたが、どうもそれはそもそものAndroidの対応によるバグのようなので、他のライブラリでもだめだろうと予想。CreateJSの問題ではなく。
WebGLへの対応も出来たようで、pixi.jsよりもドキュメント類も多い印象なので、こちらで行ってみよう、という次第です。
それぞれ良さとニーズのあわなさがあるので、一長一短ですが、
いずれにしても私のようなへっぽこにとってはありがたい限りです。
2015年1月4日日曜日
pixi.jsでタッチの位置取得などをしようとした時、interactionManagerを参照
pixi.jsでtouchの位置取得などをしようとした時は、interactionManagerを参照するべし、という自己メモです。
http://www.goodboydigital.com/pixijs/docs/classes/InteractionManager.html
mouseの位置や、touchesのidなどいろいろ取得できて便利そう。
http://www.goodboydigital.com/pixijs/docs/classes/InteractionManager.html
mouseの位置や、touchesのidなどいろいろ取得できて便利そう。
pixi.jsはすごい2dのjsライブラリだ。
pixi.jsというライブラリがすごい。
cocos2dをブラウザで実装した、というイメージ。
http://www.pixijs.com/examples/
webGLをつかってのレンダリングを実装しているので、
非常に画像の処理が軽い。
以下のページをクリックしていくと、その凄さが感じられる。
http://www.goodboydigital.com/pixijs/bunnymark/
：：：：：：：：：：：：：：：：：：：：
日本語のドキュメントは少なそうだが、
APIのドキュメントはここ。
http://www.goodboydigital.com/pixijs/docs/
最初の一歩の解説はここ。
http://www.goodboydigital.com/pixi-js-tutorial-getting-started/
cocos2dをブラウザで実装した、というイメージ。
http://www.pixijs.com/examples/
webGLをつかってのレンダリングを実装しているので、
非常に画像の処理が軽い。
以下のページをクリックしていくと、その凄さが感じられる。
http://www.goodboydigital.com/pixijs/bunnymark/
：：：：：：：：：：：：：：：：：：：：
日本語のドキュメントは少なそうだが、
APIのドキュメントはここ。
http://www.goodboydigital.com/pixijs/docs/
最初の一歩の解説はここ。
http://www.goodboydigital.com/pixi-js-tutorial-getting-started/
登録:
投稿 (Atom)