githubでフォークして作ったリポジトリをeclipseにプロジェクトとしてインポートした作業メモ
長いタイトルになってしまいました。
最近JSのゲームやアニメーションのソースを触っている関係で、
LWFとCreateJSのソースをいじりたくなりました。
どちらも、SWFとHTML5をつなぐJSライブラリとして有名です。
この記事は、
githubでフォークして作ったリポジトリをeclipseにプロジェクトとしてインポート
した際の備忘録です。
いろいろ試みて失敗しているので、次に同じ手間をかけないために
仕組みはわからない（調べるのに時間かける気がない）けど、とりあえずこうやったらできたよ、というメモですね。
ちゃんとgitの仕組みやgithubのことを調べて書いたものではないので、ベストの方法であるかどうかはわかりません。
準備：EGitプラグインのインストールなど
以下が参考になります。
http://d.hatena.ne.jp/ishibashits/20110627/1309193856
１、githubで見たいソースをフォーク
解説しません。
２、Eclipseで[ファイル]→[インポート]
３、Gitを選択
４、URIを選択
５、URIのテキストエリアに、githubからとってきたgit@xxx/yyy.git というURIを貼り付ける。そうすると、他の入力項目が勝手に入ります。
どんどん[次へ]で進むと、gitレポジトリがそもそもEclipseプロジェクトではないために、[既存プロジェクトのインポート]では失敗する場面が出ます。
そのときは、
６、ひとつ戻って、[新規に一般プロジェクトを作成]という選択肢があるのでそちらで作成。
そうすればとりあえずひとつのプロジェクトとしてソースを落としてこれます。
まだコミットやプッシュがうまくできてないのでできたらまた加筆します。
swfからスプライトシートを吐き出す方法のメモ
前の記事の続きです。
以下の記事を大いに参考にさせていただきました。
http://d.hatena.ne.jp/DiegoTristan/20121004/1349371840?_ts=1350580477
仕事上、過去資産のswfファイルをスプライトシートに吐き出して
JSで同じモーションをさせる必要が生じました。
FlashCS6のライセンスを持っていれば、それを使ってスプライトシートを生成できた、むしろCreateJSでJSコードに落とせたと思うのですが、CS6持ってないし、そもそも古いバージョンのブラウザもサポートする必要があったのでCanvasベースのライブラリだと困ります。
その話はさておき、以下のツールを試しました。この記事はその備忘録です。
・TexturePacker
・Zoe(CreateJS開発チーム作)
・SwfAnimationConverter(マルチデバイスLab様作)
・SWFSheets(KiethPeterさん作)
下の3つはAIRアプリで、SWFからスプライトシートを出力する機能に特化しています。
TexturePackerはSWFからスプライトシートを出力もできますが、複数画像を一枚のスプライトシートにまとめるのが元々の機能です。
すべてMacにもインストールできます(AIRアプリは当然ですが)。
TexturePackerはひとつ前の記事に書いたとおり、2000円くらいで有償版を買わないと実用になりません。
でも実績あるソフトですし実用性は十分なので買って損は無いと思います。
さて、最終的に私はSWFSheetを使って複数のswfにそれぞれスプライトシートを出力し、それをTexturePackerでさらにまとめてひとつのスプライトシートにしました。
それはなぜかというと、上3つのアプリケーションはSWFのルートのタイムラインを読み取る仕組みになっていた(動作からの想像です)からです。
SWFにおいてルートのタイムラインが24フレームのムービーであれば、24枚の画像で出力されました。
(ルートに結びついたタイムラインの入れ子構造まで読み取れるのかは謎です。僕はタイムライン構造を見れていないので。)
これが自分にとっては厄介で、
たまたま自分の持っていたswfのルートが1フレーム扱いになっていたのか、
上の3つのアプリケーションは最初の1フレーム分しか画像を生成してくれませんでした。
それに対し、SWFSheetはタイムライン構造など見ておらず、ムービーを再生して、その途中で設定された枚数のスナップショットを撮影するような仕組みになっているようです。
タイムライン構造気にせずに、ムービーとして再生できさえすればスプライトシートを出力できるし、タイムラインが何フレーム分か気にしなくていいです。
SWFSheetは個人で作られてるからか使い勝手に難がありますが、
ある意味、タイムライン構造を読み取るような高価な機能が無いために使いやすくなっています。
ただSWFSheetはあくまで1swfファイルに1スプライトシートを生成するので、複数のムービーを1スプライトシートにまとめるのはTexturePackerの出番です。
TexturePackerは使い勝手のよいソフトなので触っていれば慣れてすぐに使いこなせるようになるとは思います。
現行のバージョンでひとつ気になったのは、デフォルトの設定であるターゲットが「cocos2d」だと、上の作業がうまくいきませんでした。
というのは、正常にpngファイルを生成しませんでした。
そこでターゲットを｢starling/sparrow｣(だったかな)にしたところ、理由は不明ですが期待通りのpngを生成できました。
他にもツールはあるでしょうし、Adobeのツールを何でも使える環境ならそれらでやる方法はあると思います。
ここで書いたのは、アマ開発者がお金をかけずにやれる方法だと思っていただければ。
TexturePackerでswfを読み込む
Starling向けのMovieClipを作るときはTextureAtlas用に
スプライトシートとxmlファイルが必要ですが、
その解説チュートリアルです。
TexturePackerのページにリンクがありました。
英語ですが、映像をまねして触ればすぐ使いこなせるくらい簡単です。
一定動作がループしているようなタイムラインでもうまく一周分だけのスプライトシートに落としこんでくれますし、タイムライン構造がパーツごとに多段になっていても問題ありません。
http://www.youtube.com/watch?v=Qhq4COk_QyU
TexturePackerは、無償版だと着色された画像が必ず含まれてしまうので
使い物になりません。
1000円くらいなのでProを買いましょう。
何らかのフレームワーク開発者や、ブロガーは、それを説明すれば
無料でライセンスがもらえるようです。
swf読み込みもしてくれて超便利！
僕は、自作ゲームの爆発エフェクトを、同僚にswfで作ってもらって
TexturePackerでスプライトシートにしてStarlingに読み込みました。
ちまただと爆発エフェクトのスプライトシートを提供しているサイトは
あっても、TextureAtlas用のxmlは自作せねばならなくなるので、
swfさえ手に入るならTexturePackerを使うのがらくだと思います。
FlashProCS6にはStarling用のスプライトシート書き出し機能があるので、FlashProCS6を持っていればTexturePackerは不要です。
※現在、安定版はMac MountainLionには対応してないようなので、3.0β版インストールが推奨されています。
※swf読み込みはかなり重いようで、僕のメモリ2GBしかないMoutainLionのMacでは、読み込もうとすると頻繁にTexturePackerが落ちました。何回か試したらたまたま成功したのでよかったですが。
CSSSpriteとJSによる極簡単なアニメ
ちょっと仕事上、Flashをつかうほどでもない局面で、
JSで簡単なアニメーションが要求される場面が出ました。
なんで、勉強のためにちょっとアニメーションを作ってみました。
http://futsaltacticsboard.appspot.com/JSExperiment/skelton_anime.html
ソースはブラウザで見れます。
いろいろ調べましたが、canvasなど最近のHTML5の機能や
enchant.jsのような最近のライブラリは、IE9移行でしか使えないことが
わかったので、IE8でも動くDHTMLの技術を使うことにしました。
つまりは、CSSのbackground-imageを使うCSSSpriteと、
JSのsetInterval、setTimeout関数を使ったアニメーションです。
これだけでもファミコンのドラクエレベルの表現であれば、可能なようです。
個人的感想ですが、やっぱりJSのようなライトな言語より、自分はC/C++のような低水準言語の方が好きですね。
JavaのGCでさえ余計なものに思うくらいなので。。
バイナリアンを自称できるくらいになりたいものです。
FlashBuilderでワンソースでモバイルプロジェクトとAS3プロジェクトを両方作るテクニック
大したテクニックでもないですが自分用のメモとして。
Flashの利点の一つは、幅広い環境に移植の労が少なく移植できるtことだと思います。
スマホアプリの宣伝のため、機能を制限してWeb上で体験してもらうなんてことが可能なのが素敵です。
ただ、FlashBuilderのプロジェクトはモバイル向けとWeb向けは分かれているので面倒くさい。
僕の場合はスマホ向けのプロジェクトが先にできていて、それをWeb向けにパブリッシュした形ですが、こうしました。
１、AS3プロジェクト作る。（FlexならFlexプロジェクト）
２、ソースパスでスマホプロジェクトのソースとってくる
コンパイラ向けのシンボリックリンクという感じですね！
ただ、素材を入れているフォルダをこの方法でリンクしても
[Embed(source="assets/img.png")]
でコンパイルエラーが出ます。（トランスコードができませんとかなんとか）
理由は不明ですが、コンパイル向けのリンクと普通のフォルダのリンクは違うのでしょう。
そういうときは以下で解決。
３、プロジェクト右クリックで[新規]→[フォルダ]
４、[拡張]を選択。[代替場所をリンク]にチェック入れる
５、フォルダ追加。
これで、普通のフォルダのリンクが追加されてEmbedのコンパイルが通ります。
iOSゲームアプリ、ソース公開しました（ブロック崩しシューティング）
だらだらと作っていたiOS向けゲームのソースを公開しました。
https://github.com/monguri/BlockShooting
まだまだモックレベルなので、バグ報告、アドバイス歓迎いたします。
あまり参考にしたソースが無く自分で考えた部分が多いので、ソースにひどいところはあると思います。
ソースへの指摘は大歓迎です。
OSはiOS、フレームワークにAdobeAIRおよびStarlingを採用しています。
FlashBuilderでシミュレータ起動できますが、Starlingのソースを含めてないので、含めてビルドしてください。
後日、GoogleAppEngineにFlash形式で公開して誰でも触れるようにしたいと思います。
とりあえず何か簡単なゲームを作ってみたくて、ブロック崩しを選択したのですが、それだけじゃつまらないのでシューティングの要素とボス戦を持たせました。
最も注力したのは、いかに拡張性の高いつくりにするか、という点です。
つまり、今後ステージを増やしたり見た目を派手にしたり敵やアイテムを増やしたりするときになるべく簡単になるようにということです。
そのため、現時点ではモックに過ぎない地味なゲームとなってますが、自分が気分よく拡張できるつくりにしたつもりです。
今回、最初一度作って、拡張性が気に食わなかったので一から作り直してます。
絵や音楽といったアセット面をそろえるのに一番苦労しているので、協力してくれる方がいたらご連絡ください。大歓迎です。
今後の課題メモ
・ステージ数の増大
・ボスの種類を増やす
・敵、ブロックの種類を増やす
・パワーアップアイテム、パワーアップ効果を増やす
・パフォーマンスチューニング
・楽しませるエフェクト、わかりやすいUI
・音楽
