LWF for HTMLも結構安定してきたと思うので、ここらで一回勉強会を開いてみたいと思い12/16に開催することになりました。
LWFを初めて触る方やLWFを知らない方に向けて、実演を交えて説明していきたいと思います。
詳細はこちら
LWFは主要なスマートフォンブラウザで動作することを前提に開発されているので、スマートフォンのweb向けにアニメーションやゲームなどを作っている or 作ってみたい と思っている方は是非参加していただければと思います!
2013年12月6日金曜日
2013年12月5日木曜日
Flash CC アップデート
Flash CC に HTML5 canvas ドキュメントが追加されたので久々にCreateJSを触ってみました。
コメント /* js */で囲まなくても直接スクリプトが書ける...!
ctrl + enter でサクッと書き出せるのもお手軽。
このドキュメントだとswfが書き出せないので、swfを通して変換するLWFはそもそも使えないので恩恵はなかった...( ´Д｀)残念
CreateJSを触ってみたついでにLWFとの比較用に簡単なものを作ってみました。
弾を撃っている子が300匹います。
・CreateJS
http://lwfs.tamagokobo.com/createjs/test/createjs_test.html
・LWF
http://lwfs.tamagokobo.com/lwf/createjstest/
CreateJSと出来る限り同じ条件にするためにLWF側は下記の設定にしています。
・フレームスキップはオフ
・どの環境でもcanvas rendererを使用
CreateJSでフレームスキップを有効にする方法がよくわからなかったので、LWF側の方のフレームスキップをオフにしました。そもそもできるのだろうか。
そして、iPhoneで見た際にCreateJSの方はなんか画像がぼやけてる気がする。
なにか設定が違っているのだろうか・・・
CreateJSの方ももう少し触らないとダメですね・・・
コメント /* js */で囲まなくても直接スクリプトが書ける...!
ctrl + enter でサクッと書き出せるのもお手軽。
このドキュメントだとswfが書き出せないので、swfを通して変換するLWFはそもそも使えないので恩恵はなかった...( ´Д｀)残念
CreateJSを触ってみたついでにLWFとの比較用に簡単なものを作ってみました。
弾を撃っている子が300匹います。
・CreateJS
http://lwfs.tamagokobo.com/createjs/test/createjs_test.html
・LWF
http://lwfs.tamagokobo.com/lwf/createjstest/
CreateJSと出来る限り同じ条件にするためにLWF側は下記の設定にしています。
・フレームスキップはオフ
・どの環境でもcanvas rendererを使用
CreateJSでフレームスキップを有効にする方法がよくわからなかったので、LWF側の方のフレームスキップをオフにしました。そもそもできるのだろうか。
そして、iPhoneで見た際にCreateJSの方はなんか画像がぼやけてる気がする。
なにか設定が違っているのだろうか・・・
CreateJSの方ももう少し触らないとダメですね・・・
2013年12月1日日曜日
num1000
この前はゲームを作ったので、今度はアニメーションメインのものを作ってみようと思い
有名なFlash「num1000」を再現してLWF版を作ってみました。
http://lwfs.tamagokobo.com/lwf/num1000/
この頃から、Flashに憧れて始めたのを思い出します。
所々オリジナルと動きが違ってしまっていますがご容赦ください...
意外とFlashは制作ツールとして優秀で、今でも裏方として頑張っていたりします。
最近は新しくFlashを始めようという人は少なくなってしまいましたが、やってみると意外と色々勉強になっておもしろいのですよ。
有名なFlash「num1000」を再現してLWF版を作ってみました。
http://lwfs.tamagokobo.com/lwf/num1000/
この頃から、Flashに憧れて始めたのを思い出します。
所々オリジナルと動きが違ってしまっていますがご容赦ください...
意外とFlashは制作ツールとして優秀で、今でも裏方として頑張っていたりします。
最近は新しくFlashを始めようという人は少なくなってしまいましたが、やってみると意外と色々勉強になっておもしろいのですよ。
2013年11月25日月曜日
シューティング
LWFでゲームっぽいものを作ってみようと思い軽くシューティングっぽいものを作ってみました。
相手を撃てるだけですが・・・
ゲーム開始前にどのrendererを使っているか表示されます。
webGL対応環境であればwebGLで動作するようになっています。
是非、AndroidやiOSの端末で見ていただければと思います
http://lwfs.tamagokobo.com/lwf/DemoSTG/
相手を撃てるだけですが・・・
ゲーム開始前にどのrendererを使っているか表示されます。
webGL対応環境であればwebGLで動作するようになっています。
是非、AndroidやiOSの端末で見ていただければと思います
http://lwfs.tamagokobo.com/lwf/DemoSTG/
2013年11月5日火曜日
lwfのwikiができました。
LWF for HTML5の制作に関する情報があつまっているwikiが出来ました!
http://lwf-users.org/
私も情報を書いていったりしていきます。
制作に関する情報はこちらにまとめていきたいと思います。
スクリプトに関してはHTML5ように書いていますがUnityでも似たようなAPIがあるので参考になったりします
http://lwf-users.org/
私も情報を書いていったりしていきます。
制作に関する情報はこちらにまとめていきたいと思います。
スクリプトに関してはHTML5ように書いていますがUnityでも似たようなAPIがあるので参考になったりします
2013年8月2日金曜日
LWFS更新
LWFSが最新版に更新されました。(20130801-1247)
ダウンロードはこちらから
今回はかなり変更点が大きいのでその辺りも含めて後々紹介して行きたいと思います
(次回予定していたダイナミックテキストの扱い方も若干変わるので、新しい方法で近いうちに紹介したいと思います)
今回の変更点で大きな変更は主に下記のものになります
・Flash CC対応
Flashの一番新しいバージョンFlash Creative CloudでLWFを制作することが可能となりました。
・Publish for LWF.jsfl の追加
パブリッシュ時に使用するjsflファイル(コマンドファイル)が今までのLWF_Publish.jsflが廃止となり
新しくPublish for LWF.jsflが追加されました。LWF_Publish.jsflが残っている方は間違いをなくすためにも削除しておくことをおすすめします。
新しいパブリッシュは非常に高速で動作するようになり、重いコンテンツで待たされることもなくなります。
・Movieインスタンスのパフォーマンス向上
ムービークリップやattachMovieで追加したMovieインスタンスは、数が多くなるほど顕著にパフォーマンスに影響を与えていましたが、改善され非常に軽快に動作するようになりました。
・WebGL本格対応
モバイルでのwebGL描画に本格対応されました。今年に出たAndroid端末の標準ブラウザは意外とwebGLに対応している端末が多いので対応端末を持っている方は是非↓のサンプルをみて確認してみてください。Androidのブラウザとは思えないほど軽快に動作します。
(まだ一部の端末の標準ブラウザは表示がおかしいみたいです)
標準ブラウザが対応していなくてもchromeでwebGLを有効にすれば見ることができます。
※有効にする方法はググってみてください。一応テスト機能なので自己責任でお願いします
新しいLWFSで書きだしたものがこちらになります。是非、AndroidやiOS端末で見て比較してみてください。
webkitcss
canvas
webGL
ソース
ダウンロードはこちらから
今回はかなり変更点が大きいのでその辺りも含めて後々紹介して行きたいと思います
(次回予定していたダイナミックテキストの扱い方も若干変わるので、新しい方法で近いうちに紹介したいと思います)
今回の変更点で大きな変更は主に下記のものになります
・Flash CC対応
Flashの一番新しいバージョンFlash Creative CloudでLWFを制作することが可能となりました。
・Publish for LWF.jsfl の追加
パブリッシュ時に使用するjsflファイル(コマンドファイル)が今までのLWF_Publish.jsflが廃止となり
新しくPublish for LWF.jsflが追加されました。LWF_Publish.jsflが残っている方は間違いをなくすためにも削除しておくことをおすすめします。
新しいパブリッシュは非常に高速で動作するようになり、重いコンテンツで待たされることもなくなります。
・Movieインスタンスのパフォーマンス向上
ムービークリップやattachMovieで追加したMovieインスタンスは、数が多くなるほど顕著にパフォーマンスに影響を与えていましたが、改善され非常に軽快に動作するようになりました。
・WebGL本格対応
モバイルでのwebGL描画に本格対応されました。今年に出たAndroid端末の標準ブラウザは意外とwebGLに対応している端末が多いので対応端末を持っている方は是非↓のサンプルをみて確認してみてください。Androidのブラウザとは思えないほど軽快に動作します。
(まだ一部の端末の標準ブラウザは表示がおかしいみたいです)
標準ブラウザが対応していなくてもchromeでwebGLを有効にすれば見ることができます。
※有効にする方法はググってみてください。一応テスト機能なので自己責任でお願いします
新しいLWFSで書きだしたものがこちらになります。是非、AndroidやiOS端末で見て比較してみてください。
webkitcss
canvas
webGL
ソース
2013年7月8日月曜日
【機能】スプライトシートを使用する
今回は、複数の画像を1枚の画像にまとめたスプライトシートを扱う方法について触れたいと思います。
スプライトシートに纏めて読み込むファイル数を減らすことでことで、纏める前に比べて高速なローディングを実現することができます。
まずは、普通にLWFのコンテンツを作りLWFSで書き出してみましょう。
LWFを作ってパブリッシュすると場合、LWFS_workフォルダの作業フォルダ内に
新しくswfファイルと(ファイル名)+.bitmap という名前のフォルダが生成されます。
作られていることを確認したら、.bitmapフォルダの中に入ってみましょう。
すると、制作したLWFで使用されている画像が入っています。
コチラのサンプルLWFのbitmapフォルダの中は↓のようになっています。
これらの画像を↓のような一枚の画像にしたいと思います。
このように１枚の画像にまとめる機能を持ったアプリは、主に下記のようなものがあります。
・Adobe Flash CS6以降のバージョン
・TexturePacker (シェアウェア)
今回は、上記の2種類のアプリのうちFlashを使用した方法をメインに紹介していきます。
【Flash CS6以降】
まずは新規ファイルを開きます。
そして、ライブラリの中に.bitmapフォルダ内にあるすべての画像を読込ましょう。
読み込みが完了したらライブラリ内の画像を全て選択し右クリックで「スプライトシートを作成」
を選択しましょう。
すると↓のような画面が出てくると思います
ボーダーやシェイプの余白は2pxほど空けておきましょう。
また、画像のサイズは1024×1024を超えないように注意してください。超えてしまうと端末によっては動作に支障をきたしてしまいます。
書き出し先はflaと同階層で、適当な名前(英数字のみ)のファイル名で書きだしてください。
あと、必ずデータ形式は「JSON」にしてください。その他の形式を選ぶと使用出来ません。
また、その下にある回転やカットにはチェックを入れないでください。
そして、書き出しを完了すると１つになった画像ファイルと、その画像に関する情報が収まっている
.jsonファイルが出力されます。そしてこのjsonファイルの文字コードを変える必要があるので、文字コードを指定して保存できるエディタ(TeraPad, K2Editor等)で開き、文字コードをUTF-8Nにして上書き保存してください。(BOM付きはNGです)
そうすると、LWFSが自動で変換をしてくれます。変換完了後にLWFS_work_outputフォルダの該当の場所を見てみると、1枚にまとめた画像のみがファイルに入っていると思います。
この状態で実際動いていることを確認したら、完了となります。
【TexturePacker】
こちらは、シェアウェアとなりますがFlashと比べて細かい部分で高機能となります。
http://www.codeandweb.com/texturepacker
(様々な配置アルゴリズムや、画像サイズを2の自乗以外でも計算してくれる等)
書き出す際にはData Formatは「JSON Hash」を選択してください。
また、rotateやTrimには対応していないのでAllow rotationは無効。Trim modeはNoneにしてください。
こちらはjsonを書きだした後に文字コードを変更する必要はありません。
容量削減のために画像の減色などを行いたい場合は、まとめた画像に対して行なってください。
サンプルに使用したLWFはこちらになります。
・webkitcss
・canvas
・webgl
次回は、ダイナミックテキストの装飾や整列機能について触れていきたいと思います
スプライトシートに纏めて読み込むファイル数を減らすことでことで、纏める前に比べて高速なローディングを実現することができます。
まずは、普通にLWFのコンテンツを作りLWFSで書き出してみましょう。
LWFを作ってパブリッシュすると場合、LWFS_workフォルダの作業フォルダ内に
新しくswfファイルと(ファイル名)+.bitmap という名前のフォルダが生成されます。
作られていることを確認したら、.bitmapフォルダの中に入ってみましょう。
すると、制作したLWFで使用されている画像が入っています。
コチラのサンプルLWFのbitmapフォルダの中は↓のようになっています。
これらの画像を↓のような一枚の画像にしたいと思います。
このように１枚の画像にまとめる機能を持ったアプリは、主に下記のようなものがあります。
・Adobe Flash CS6以降のバージョン
・TexturePacker (シェアウェア)
今回は、上記の2種類のアプリのうちFlashを使用した方法をメインに紹介していきます。
【Flash CS6以降】
まずは新規ファイルを開きます。
そして、ライブラリの中に.bitmapフォルダ内にあるすべての画像を読込ましょう。
読み込みが完了したらライブラリ内の画像を全て選択し右クリックで「スプライトシートを作成」
を選択しましょう。
すると↓のような画面が出てくると思います
ボーダーやシェイプの余白は2pxほど空けておきましょう。
また、画像のサイズは1024×1024を超えないように注意してください。超えてしまうと端末によっては動作に支障をきたしてしまいます。
書き出し先はflaと同階層で、適当な名前(英数字のみ)のファイル名で書きだしてください。
あと、必ずデータ形式は「JSON」にしてください。その他の形式を選ぶと使用出来ません。
また、その下にある回転やカットにはチェックを入れないでください。
そして、書き出しを完了すると１つになった画像ファイルと、その画像に関する情報が収まっている
.jsonファイルが出力されます。そしてこのjsonファイルの文字コードを変える必要があるので、文字コードを指定して保存できるエディタ(TeraPad, K2Editor等)で開き、文字コードをUTF-8Nにして上書き保存してください。(BOM付きはNGです)
そうすると、LWFSが自動で変換をしてくれます。変換完了後にLWFS_work_outputフォルダの該当の場所を見てみると、1枚にまとめた画像のみがファイルに入っていると思います。
この状態で実際動いていることを確認したら、完了となります。
【TexturePacker】
こちらは、シェアウェアとなりますがFlashと比べて細かい部分で高機能となります。
http://www.codeandweb.com/texturepacker
(様々な配置アルゴリズムや、画像サイズを2の自乗以外でも計算してくれる等)
書き出す際にはData Formatは「JSON Hash」を選択してください。
また、rotateやTrimには対応していないのでAllow rotationは無効。Trim modeはNoneにしてください。
こちらはjsonを書きだした後に文字コードを変更する必要はありません。
容量削減のために画像の減色などを行いたい場合は、まとめた画像に対して行なってください。
サンプルに使用したLWFはこちらになります。
・webkitcss
・canvas
・webgl
次回は、ダイナミックテキストの装飾や整列機能について触れていきたいと思います
登録:
投稿 (Atom)