前回は、ランダムに動く粒子それぞれの間にバネのような力を与えてアニメーションさせた。すると、粒子は互いに集まっては離れることを繰り返す、という面白い動きになった（再掲第6回図3⁠）⁠。ここまでのコードは、以下のjsdo.itに掲げてある（第6回コード2⁠）⁠。 第6回 図3　オブジェクトがひと固まりに集まっては離れる（再掲） オブジェクトが引合う力の範囲をかぎる 互いに離れれば離れるほど、引き戻す力は強まるというのがバネの性質だ。ただし、それを単純に当てはめたために、仲間から外れた粒子の激しい動きが止められず、しかも仲間はずれは次第に増えてしまうというのが前回の問題だった。 もともと、バネはいくらでも伸び縮みするものではない。むしろ、その動きを正しく保てる範囲はかぎられる。そこで、この粒子のアニメーションでも、互いの間に引合う力が及ぶ距離を決めてしまおう。2点の座標からその間の距離を導くに

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

ID部の藤岡です。 弊社も案件で使っている「SpriteStudio」にはHTML5書き出しの機能があります。 書き出したデータをSpriteStudio専用のHTML5 Playerで再生することで、ブラウザ上でSpriteStudioで制作したアニメーションを再現することができるようになってます。 今回これを応用し、専用のHTML5 Playerを使わずにCreateJSでSpriteStudio書き出しデータを読み込むライブラリを自作して、簡単なミニゲームを作ってみました。 →別タブで開く （[P]キーでパンチ、[K]キーでキック、左右の[←→]キーで移動） ワンテンガーはSpriteStudioからの書き出しを自作ライブラリを通じてCreateJSで読み込み、それ以外はCreateJSで普通に画像を読み込んでます。 最適化はしてませんが、スマホでもひとまず動作します。（操作はタップ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? var FPS = 60; var canvas = document.getElementById("testCanvas"); var stage = new createjs.Stage(canvas); if (createjs.Touch.isSupported()) { createjs.Touch.enable(stage, false, false); } createjs.Ticker.setFPS(FPS); createjs.Ticker.addEventListener("tick", handleTick);

この記事のURL http://www.dango-itimi.com/blog/archives/2013/001186.html どちらかのサイトで同じような問題の記事を見たことがあったような気がしますが、メモする意味で記述します。 Toolkit for CreateJS にて入れ子状態のムービークリップを出力後、スクリプトから制御しようとした所、入れ子内部のムービークリップに gotoAndStop 命令が効かない、という現象が発生しました。 解決方法としましては、大本のムービークリップに対して gotoAndStop or gotoAndPlay 命令を記述すればよし、となりました。 詳細は以下となります。 CreateJS バージョン 検証で利用した CreateJS のバージョンは以下となります。 easeljs-0.6.1 tweenjs-0.4.1 movieclip-0

経緯 先日、初めてcreatejs使ったスマホ向けwebアプリ作ってリリースした。 まあ、予想通り、createjs、canvasにいろいろハマった。 はまったところは、gistにメモしておいたので、ここにも整理して乗っけておく。 なお、類似blog記事多数あり、俺もほとんど8割位それらの記事で助かりました。 ここで、参考にlink貼った記事書かれた方々に感謝します。 そして、次にcreatejs使う人のために、 既出の物、あまり他の記事に見ない物も、まとめて書いておきます。 参考までに。 概要 以下の現象の原因と対応について書いていきます タッチイベントがずれる staging環境で画像click時にエラーに retinaでcanvasがぼやける (android)canvasが2つ出てきた (android)でcanvasに1clickすると2clickした事になってる (androi

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

CoffeeScript には簡単にクラスの継承を実現できる機能が備わっていますが、こと CreateJS のクラスを継承する際には従来とは少し異なる手法で実装するがあるので、注意が必要です。 知ってしまえば大したこと無いのですが、ちょっとクセのあるテクニックなのでサンプルを交えてその方法を紹介します。 例) createjs の Bitmap クラスを継承してみる 従来の継承 通常、CoffeeSctript でクラスの継承をするには以下のように記述します。 Animal クラス class Animal constructor: (@name) -> alive: -> false Dog クラス class Parrot extends Animal constructor: -> super("Parrot") dead: -> not @alive() Animal クラスを継承

いわゆるソーシャルゲームのゲーム画面で、FlashCC の HTML5 書き出しを使って演出部分を制作し、アプリケーション側との繋ぎ込みを行った際のメモ。 どのゲームかはあんまり大きい声で言えない？ので、もし知りたければ twitter で聞いてもらえば。 今回は基本中の基本で、そもそも FlashCC がどういう形の CreateJS のコードを書き出すのかを細かく書いている。全3回くらいでお送りする予定です。 サンプルコードと言ってもただ MC を数個配置しただけだが一応 Github においてある。 サンプルでは test.fla というファイルを作り、とりあえず4つの各種インスタンス(ムービークリップ、ボタン、グラフィック、ビットマップ)を配置する。(今回は描画部分のみにフォーカスするのでサウンドについては省略) また、合わせてCreateJSの公式ドキュメントにも一通り目を通す、

SoundJS has added support for Audio Sprites, available immediately in the NEXT version of SoundJS on GitHub. For those unfamiliar with audio sprites, they are much like CSS sprites or sprite sheets: multiple audio assets grouped into a single file. Benefits of Audio Sprites More robust support for older browsers and devices that only allow a single audio instance, such as iOS 5. They provide a wor

FlashCC でパブリッシュした CreateJS ファイルで callback 付きの gotoAndPlay を実現するJavaScriptflashCreateJS ご世間様はアレに夢中な中で、CreateJSさんのニッチな話題です。 簡単な機能要件 必須 TARGET_LABEL を再生したとき、TARGET_LABEL_end まで辿り着いた瞬間に callback が発火すること Flash 内のスクリプトの動作に影響を及ぼさないこと CreateJS 本体の改造は出来る限りしないこと。ただし、後から prototype を拡張したり弄ったりするのは OK とする（した） Flash 内スクリプトでも、外部のスクリプトからでも呼べるようにすること 努力目標 再生中、任意のタイミングで gotoAnd(Play|Stop) もしくは同メソッドが呼ばれた場合は、callback

Twitterでコラ画像が流行すると、大体数日で○○の画像ジェネレータみたいなものがリリースされます。 この画像ジェネレータ系のサービスはGDかImageMagickを使っているのかと思っていましたが、最近はcanvasでつくられているようです。 私もこういうものを作ってみたいと思っていたので、ちょっと調べて簡単な画像ジェネレータを作ってみました。 canvasを扱う場合はCreateJSを使うのが便利なようです。 今回はアニメーションの処理はないため、CreateJSの中のEaselJSのみを使用しました。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

業務ではじめてToolkit for Createjs使いました。 その所感というか、ハマったところ・気をつけなければならないことも多々あったのでメモ。 flash内の画像ファイル名やインスタンス名には気をつけよう flash内で画像ファイル名やインスタンス名が日本語だと、パブリッシュで生成されるjsファイル内に２バイト文字が混ざることになる。これは最悪。 今回はデザイナーさんにflashでアニメーションをつくってもらったあとにそのことに気づいてしまったので、お手数ながたリネームしてもらったということがあったので、以後デザイナーさんにToolkit for Createjsでアニメーションをつくってもらうときは注意が必要。 画像読み込みについて 画像のファイル数は比較的多くなりがちになるのだと思うけど、 地獄の“大開発者”養成ブログ — クレイジー極まりないToolkit for Crea

2013年7月26日（金）、日本マイクロソフト品川本社 Seminar RoomでCreateJS勉強会（第4回）が開催され80名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSとToolkitで納品レベルまで最適化・高速化する方法」のスライドを公開します。 発表資料へのリンク 資料では最適化がなぜ必要なのかという理由を説明したうえで、最適化のさまざまな手法を紹介しています。なお、この資料の方法でどれだけ最適化できるのかわかるビデオを撮影しましたのでこちらの動画をご覧ください。