SpriteStudio for CreateJS | TENPURA - 1→10design Lab -
ID部の藤岡です。 弊社も案件で使っている「SpriteStudio」にはHTML5書き出しの機能があります。 書き出したデータをSpriteStudio専用のHTML5 Playerで再生することで、ブラウザ上でSpriteStudioで制作したアニメーションを再現することができるようになってます。 今回これを応用し、専用のHTML5 Playerを使わずにCreateJSでSpriteStudio書き出しデータを読み込むライブラリを自作して、簡単なミニゲームを作ってみました。 →別タブで開く （[P]キーでパンチ、[K]キーでキック、左右の[←→]キーで移動） ワンテンガーはSpriteStudioからの書き出しを自作ライブラリを通じてCreateJSで読み込み、それ以外はCreateJSで普通に画像を読み込んでます。 最適化はしてませんが、スマホでもひとまず動作します。（操作はタップ
WebGLのドローコール最適化手法―CreateJS勉強会/池田発表資料(後編) ― ICS LAB
本記事は2015年2月10日（火）に開催されたCreateJS勉強会 (第5回) の発表資料「CreateJSクリエイトジェイエスで制作するスペシャルコンテンツ」の後編となります。前編(CanvasとWebGLの比較)に続けて本記事ではWebGLウェブジーエルの最適化手法を紹介します。 WebGLのドローコールの最適化について 前編ではHTML5 CanvasとWebGLの使い分けについて紹介しましたが、ここからはWebGLの最適化手法の1つを紹介します。よく知られているテクニックですが、WebGLでは描画命令のドローコールを少なくすることが有効だと言われています。ドローコールが少なくなることで滑らかなモーション = 60fps(遅延なきRequestAnimationFrameの達成）を実現し、スマートフォンでの実行時の消費電力を抑えられます。 下図は複数の要素を画面に表示するときのWe
HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB
2015年2月10日（火）、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。 なお、前編（CanvasとWebGLの比較）と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト）は従
CreateJSのPreloadJSが1つずつしかロードしない爆遅仕様なので、並列ロードさせて速くさせる(maxConnection追記あり) - Qiita
CreateJSのPreloadJSが1つずつしかロードしない爆遅仕様なので、並列ロードさせて速くさせる(maxConnection追記あり)JavaScriptflashCreateJS 対象: CreateJSやり始めました的なひと。ロード遅いよねと思ってるひと です。 目標: 速くロードできるようになります です。 試したバージョンはPreloadJS 0.3.1 です。 PreloadJSの現状 = 驚愕の「1つずつロード」 びっくりすることにPreloadJSはデフォルトでは 1つずつ ロードされる。なぜかはわからない。 追記 setMaxConnectionがあると教えてもらいました！ LoadQueueクラスの最大接続数のデフォルトが1でした。 なので、1つずつしかロードしてませんでした。 ブラウザは一つずつ画像をロードしてたらチンタラすぎるので、普通は6つのリクエストを同時
BoxBlurFilter and AlphaMaskFilter Classes - jsdo.it - Share JavaScript, HTML5 and CSS
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」 第8回「ぼかしフィルタとアルファマスク」 http://gihyo.jp/design/serial/01/createjs/0008 コード3「クリックした座標を中心に円形のアルファマスクを塗り重ねてインスタンスに加える」 var stage; var wipingShape; var imageBitmap; var blurBitmap; var imageSize = new createjs.Point(); var radius = 40; var bitmapPoint = new createjs.Point(); initialize(); function initialize() { var canvasElement = document.getElementById
CreateJSのMotionGuidePluginでモーショントゥイーン - jsdo.it - Share JavaScript, HTML5 and CSS
CreateJSには、モーションガイド機能が追加されました。 http://www.createjs.com/Docs/TweenJS/classes/MotionGuidePlugin.html キャンバス上をドラッグすると、マウスの軌跡に合わせて線を描画し、その線上をモーショントゥイーンします。 var canvas, stage; var pointList =[]; var shape; //軌跡表示用 var arrow; //矢印 var oldPoint; //座標保持用 function init() { //いつもの canvas = document.getElementById("canvas"); stage = new createjs.Stage(canvas); createjs.Ticker.setFPS(24); createjs.Ticker.addEv
CreateJS勉強会（第3回）発表資料「CreateJSで作るモバイル向けビジュアル表現」 - ICS MEDIA
2013年5月10日（金）、日本マイクロソフト品川本社Seminar RoomでCreateJS勉強会（第3回）が開催され、80名を超える方にご参加いただきました。勉強会のフォローアップとして、発表資料の「CreateJSで作るモバイル向けビジュアル表現」のスライドを公開します。資料ではデモを制作した際の技術的なTipsなどを紹介しています。 発表資料へのリンク 今回制作したゲーム「Color Create」の動作デモの動画をご覧ください。 ゲーム「Color Create」のソースコードはGitHubにて公開しています。最新版のCreateJSでも動作するよう、2018年現在もメンテナンスしており、PWAとして公開しています。 CreateJS作例のゲーム「Color Create」のソースコード
FN1209003 - EaselJSのフィルタColorMatrixFilterでイメージをセピア調に変える - HTML5 : テクニカルノート
DisplayObjectインスタンスを新たなCanvasに描き、時系列で続く描画にもそのイメージを用いる。すると、動かない子インスタンスをたくさんもつ親インスタンスや込入ったShapeオブジェクトなど、変化の少ない複雑なコンテンツは素速く描ける。tickイベントのたびにコンテンツを描き直さなくて済むためである。 キャッシュしたDisplayObjectインスタンスは、移動したり回転したり、フェードイン・アウトもできる。しかし、中身が変わったときは、DisplayObject.cache()あるいはDisplayObject.updateCache()メソッドを呼出して描き直さなければならない。キャッシュする領域は、左上角のxy座標および幅と高さで定める。この矩形領域の座標は、参照するDisplayObjectインスタンスにもとづく。
JS5 :HTML5向けjavascriptフレームワークのチュートリアルサイト » 重なったEaselJSエレメントの合成方法まとめ
オブジェクトの合成 ある二つのオブジェクトが重なっていた時、その描画方法を決めるのがcompositeOperationプロパティです。このプロパティはTextオブジェクトやShapeオブジェクトなどに設定出来ます。設定できる値はCanvasの標準仕様に準拠していますが、サンプルから見てみましょう。 サンプル 設定値の説明 右上のドロップダウンを変更すると、描画された矩形とテキストの見た目が変わるのが分かるかと思います。それではcompositeOperationプロパティに設定する各項目の説明です。基本的にsourceで始まるものは最前面のオブジェクトを前面に描画し、destinationで始まるものは最背面のオブジェクトを前面に描画させます。 以後は、もともと存在しているオブジェクトを「合成先」、追加するオブジェクトを「合成元」と呼ぶことにします。 source-over(defaul
X-LABO: Toolkit for CreateJS & Haxe : html5 シューティングゲームサンプル
この記事のURL http://www.dango-itimi.com/blog/archives/2013/001158.html Toolkit for CreateJS 1.1 と Haxe を用いて、html5 canvas で動作するシンプルなシューティングゲームの制作を行いました。リンク先には QR コードを配置しています。スマートフォンでの動作確認にご利用ください。 http://www.dango-itimi.com/html5/1/ ローディング画面は制作していないため、初めは少々真っ暗な画面が表示されたままとなります。 サウンド再生周りに関して Windows7 上では、html5 audio タグによるサウンド再生周りは以下の様な結果になりました。左に行くほど良い結果となります。 IE9 > Opera > Google Chrome > Firefox なんと音周り
TweenJSを使ったアニメーションとマウスイベントの扱い - CreateJS Workshop
お品書き 01 EaselJSでCanvasに星形を描く 01-01 CanvasにStageオブジェクトをつくる 01-02 Stageオブジェクトに加えたShapeインスタンスに星形を描く 02 TweenJSでオブジェクトをトゥイーンアニメーションさせる 02-02 Tweenクラスでオブジェクトにトゥイーンを定める 02-03 TickerクラスでStageオブジェクトを繰返し描き替える 02-04 トゥイーンに待ちとフェードアウトを加える 03 EaselJSでマウスイベントを扱う 03-01 オブジェクトをクリックしたら回す 03-02 オブジェクトをドラッグ&ドロップする 日本時間2013年2月14日に公開されたCreateJSの新バージョンにもとづいて解説する。このレジュメをもとに解説したCreateJS勉強会のUSTREAM録画は「第一回勉強会フォローアップ」で公開されて
CreateJSを使ってインタラクティブなHTML5デモを作ってみた - ICS MEDIA
CreateJS勉強会の参加応募数からも関心の高さがうかがえるCreateJSですが、弊社でも研究をしており今回は制作したデモをいくつか紹介します。 有名な絵画っぽいもの CreateJSとCSSを用いたデモです。カーソルをキャンバス上で動かすと絵が描け、ドラッグするとちょっと3Dっぽい動きをします。絵の描画はCreateJS、3Dっぽい動きはCSSで作っています。絵の描画は重ね塗りし続けると負荷が増大するので、毎フレームキャッシュし描画するコストを減らし最適化しています。 デモはこちらから Box2D Drop CreateJSと物理演算ライブラリ「Box2D」を組み合わせたデモです。マウスでアイコンをドラッグ＆ドロップすることで投げることができます。Box2DライブラリはActionScript版とほとんど同じAPIで用意されているので、ActionScriptのノウハウを活用できます
X-LABO: モバイルブラウザ サウンド再生周り調査: HTML5 audio, Web Audio API, SoundJS
この記事のURL http://www.dango-itimi.com/blog/archives/2013/001154.html Android や iOS のブラウザ上ではサウンド再生周りに制限がある、という情報は以前から少々目にしていましたが、まずは深くは考えず PC 優先で CreateJS にてサンプルゲーム制作を進めていました。 大まかな形になってきた所で、Android nexus7 にて動作確認をしてみたところ、案の定まったく音が再生されないという状況に。 何が問題なのかを理解するために、現時点での Android と iOS 端末のブラウザ上では サウンド再生に関する制限事項がどのようなものなのか、サウンド再生用ライブラリ SoundJS を通じて調査を行いました。 次期バージョンドキュメント 現在の SoundJS のバージョンは 0.3.0 です。次期バージョン 0
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://sharetheforce.target.com/hub
CreateJS勉強会（第4回）発表資料「CreateJSとToolkitで納品レベルまで最適化・高速化する方法」 - ICS MEDIA
GitHub - elsassph/createjs-def: CreateJS Toolkit definitions generator
color.hailpixel.com
CDNで提供されているCreateJSのオールパッケージ版のJSファイル、たった29.4KB。各種ライブラリを個別にインポートするよりこれで十分かしら。 #createjsjp
130215_Toolkit for CreateJSで作るリッチコンテンツ.pptx - Microsoft PowerPoint Online
Google Code Archive - Long-term storage for Google Code Project Hosting.