[備忘録] Webpack で CreateJS（EaselJS） などを読み込むための設定（+ ES2015設定 & WebStorm設定） - Qiita
Webpack 自体が初めてな人は、ここ の React チュートリアルから始めてみるとスムーズに Webpack を使い始められるかも。 Webpack の基本的な使い方やローダーの概念については、ここ が役立ちました。 準備 作業ディレクトリの作成＆移動。 mkdir プロジェクト名 cd プロジェクト名 CreateJS は Bower 経由でインストールすることとします。 npm install -g bower bower init bower install --save EaselJS また、webpack のほかに、exports-loader と imports-loader が必要となります。 npm init -y npm install --save-dev webpack imports-loader exports-loader webpack.config.j
![[備忘録] Webpack で CreateJS（EaselJS） などを読み込むための設定（+ ES2015設定 & WebStorm設定） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/46752e211bbf6a41902ce462bd78227b898a4ba5/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGOTY0MDAlMkZwcm9maWxlLWltYWdlcyUyRjE0NzM3MDY4NzU_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9YThmMTYyYWYxMDQxN2ZkN2UxMDRkOGVhMTkzMTc1MmM%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D6b94b2defd96b261d4ed8ea1b82356e7%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUU1JTgyJTk5JUU1JUJGJTk4JUU5JThDJUIyJTVEJTIwV2VicGFjayUyMCVFMyU4MSVBNyUyMENyZWF0ZUpTJUVGJUJDJTg4RWFzZWxKUyVFRiVCQyU4OSUyMCVFMyU4MSVBQSVFMyU4MSVBOSVFMyU4MiU5MiVFOCVBQSVBRCVFMyU4MSVCRiVFOCVCRSVCQyVFMyU4MiU4MCVFMyU4MSU5RiVFMyU4MiU4MSVFMyU4MSVBRSVFOCVBOCVBRCVFNSVBRSU5QSVFRiVCQyU4OCUyQiUyMEVTMjAxNSVFOCVBOCVBRCVFNSVBRSU5QSUyMCUyNiUyMFdlYlN0b3IlRTIlODAlQTYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz05M2E4MGVlZWJlMDBmMDhiZmY3ZmUzNzFlNjdlODlmZQ%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBBbm5QaW4mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1hYzVmMWVhNjI4NWU5ZGVlM2NmYThlYTVhNjczMjIzZQ%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D6d41c23946887c5873d7b4fa959b08b6)
いろんなところで役に立ちそうなPreloadJSをさわって使い方をまとめてみた
* version 0.3.0を使用 * 何ができるか PreloadJSを使うと"ファイルの読み込みが終わってから何かする"という方法に一貫性を持たせることができるようになります。 利用シーンとしてはアニメーションの開始前に必要なファイルを確実に読み込ませたいとか色々考えられそうです。 使い方 画像の読み込みが完了してから処理を行う loadFile()の記述方法いろいろ loadManifestで複数ファイルを一括で登録する completeイベント itemのもつプロパティ ファイルの種類を判定して処理を行う 登録したアイテムをqueueから削除する 使い方 PreloadJSのサイトからダウンロードします。*執筆時点の最新は0.3.0* http://www.createjs.com/#!/PreloadJS APIドキュメント http://www.createjs.com/Do
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
[CreateJS] 炎のパーティクル | にゃあプロジェクト
ParticleEmitterJS を使ってみちゃうよ。 :boy: 詳しくは「HTML5 Canvasでパーティクル表現！パーティクルエンジンParticleEmitterJS | ClockMaker Blog」 :check: 「ParticleEmitterJS | Purple Monkey Studios」 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>炎のパーティクル | CreateJS</title> <script src="js/easeljs-0.8.1.min.js"></script> <script src="js/tweenjs-0.6.1.min.js"></script> <script src="js/movieclip-0.8.1.min.js"></sc
![[CreateJS] 炎のパーティクル | にゃあプロジェクト](https://cdn-ak-scissors.b.st-hatena.com/image/square/32261c1726f96df85ea9112db9b9c5e2c00ffaad/height=288;version=1;width=512/http%3A%2F%2Fblog.project-nya.jp%2Fogp_default.png)
HTML5 Canvasでパーティクル表現！パーティクルエンジンParticleEmitterJS | ClockMaker Blog
にゃあプロジェクトさんに教えてもらったのですが、HTML5用のパーティクルエンジン「ParticleEmitterJS」が面白そうだったので試してみました。次のような表現がビジュアルエディターを使ってHTML5で簡単に作ることができます。 Demo (Require the browser supported HTML5 Canvas) Demo (Require the browser supported HTML5 Canvas) ParticleEmitterJS は CreateJS のフリーの拡張ライブラリで、簡単にパーティクルエフェクトを作ることができます。パーティクルエフェクトはゲームやコンテンツ表現の演出強化や、雲や炎などのシミュレーションにも利用できます。パーティクルは基本的に数値演算を利用するためプログラマの領分という印象が強いですが、ParticleEmitterJS
CreateJSを使用した際に一部のAndroid4端末でおこる不具合に関して – 水玉製作所
これはCreateJSを使用した際にAndroid4を搭載した一部のスマートフォンで発生する不具合に関する報告である。 概要 CreateJSを使用した際にAndroid4を搭載した一部のスマートフォンで、不具合が発生することがいくつかのブログで報告されている。問題報告と同時に解決策を提示してるブログもある為、それを検証した結果を報告する。 本件に関するブログ 本件に関して触れているブログとして以下のものがある。 (1)まるちゃんブログ CreateJSでハマったこと (2)1 pixel｜サイバーエージェント公式クリエイターズブログ Flashで作るスマフォブラウザゲーム向けアニメーション (3)しょぶろぐ Android4.0とCanvasアニメーションの話 不具合の起こる端末 実際に不具合の起こる端末として以下の名前が挙げられている。[]内の数字は上記のブログの番号を示すものである。
Toolkit for CreateJS 1.2の新機能紹介 | ClockMaker Blog
Flash ProfessionalからHTML5に書き出す機能であるToolkit for CreateJSの最新版Version 1.2が公開されました。前回のリリースが2012年9月だったので8ヶ月ぶりのバージョンアップとなります。 Flash to HTML5 | Learn more about the CreateJS toolkit ※追記(2014/01/26) : Flash Professional CC 13.1以降では、拡張機能Toolkit for CreateJSは廃止され、同等の機能が「HTML5 Canvasドキュメント」としてFlash Pro CCに組み込まれました。 今回のバージョンアップにおける新しい機能は、リリースノートや試してみたところによると新しい機能は次の通りです。 モーションガイドのサポート マスクのサポート 最新版CreateJSバージョ
HTML5デモ「日本全国花粉飛散マップ」を作って分かったCreateJSとTypeScriptでの効率的な開発手法 - ICS MEDIA
HTML5デモ「日本全国花粉飛散マップ」を作って分かったCreateJSとTypeScriptでの効率的な開発手法 2013年3月15日に開催されたCreateJS勉強会（第2回）で発表したWebサイト「日本全国花粉飛散マップ」ですが、CreateJSとTypeScriptを使って制作しました。 今回の作品のポイントとしては、次の3点があげられます。本記事では次を具体的に説明します。 HTML5で制作、デスクトップだけでなくスマートフォンやタブレットでも再生可能 CreateJSで、DOMではできないHTML5 Canvasならではの表現 TypeScriptを用いて低学習コストで効率的な制作の実現 スマートフォンやタブレットでも閲覧可能 このWebサイトは環境省が提供している資料を元に、過去9年分の花粉の飛散量をパーティクルを用いてビジュアライズしたものです。花粉の量に比例して、パーティ
Android × Canvas の即死ポイントとその回避策 | buccchi.jp
CreateJS を使ったWebアプリをいくつか作ったのですが、iPhone はサクサクでも Android でやたらハマる。 Android 2.3 で最適化したつもりのものが 4.0 の標準ブラウザで落ちたりする。 機種や OS のバージョンにより動作がさまざまなため確認しきれない。 というとこでハマったポイント3つを共有します。 誰かもっとよい解決策を教えてくれるとありがたい。 即死ポイントその1 Android 4.0.4 で Canvas をリサイズするとブラウザが落ちる 回避策 Canvas 領域を広めにとっておき、Canvas ではなく Container 側をリサイズ。 はみでた部分は css でトリミング。 これで落ちなくはなるが全体的にボケる。 2013.7.7 追記 その後、以下の方法を試したところ落ちずに動作すことが確認できました。 描画とかGPUアクセラレーション
CreateJSを使ってインタラクティブなHTML5デモを作ってみた - ICS MEDIA
CreateJS勉強会の参加応募数からも関心の高さがうかがえるCreateJSですが、弊社でも研究をしており今回は制作したデモをいくつか紹介します。 有名な絵画っぽいもの CreateJSとCSSを用いたデモです。カーソルをキャンバス上で動かすと絵が描け、ドラッグするとちょっと3Dっぽい動きをします。絵の描画はCreateJS、3Dっぽい動きはCSSで作っています。絵の描画は重ね塗りし続けると負荷が増大するので、毎フレームキャッシュし描画するコストを減らし最適化しています。 デモはこちらから Box2D Drop CreateJSと物理演算ライブラリ「Box2D」を組み合わせたデモです。マウスでアイコンをドラッグ＆ドロップすることで投げることができます。Box2DライブラリはActionScript版とほとんど同じAPIで用意されているので、ActionScriptのノウハウを活用できます
FN1212001 - EaselJSのつぎのバージョンにEventDispatcherクラスが加わる - HTML5 : テクニカルノート
本稿改訂時、CreateJSサイトにはつぎのバージョンのリリース候補が公開されています。EaselJSライブラリには新しいイベントモデルが備わるようです(「EventDispatcher」参照)。新たにEventDispatcherクラスが加えられ、DisplayObjectインスタンスからEventDispatcher.addEventListener()メソッドを呼出してイベントリスナーが登録できるようになります。 01 イベントリスナーによるイベントの捉え方 イベントリスナーも、イベントハンドラと同じように、イベントが起こったときに予め定めた関数を呼出す仕組みです。イベントハンドラは、インスタンスのイベントにハンドラとなるコールバック関数を定めます。それに対して、イベントリスナーはインスタンスへのEventDispatcher.addEventListener()メソッドの呼出しによ
EaselJSのEventDispatcher.jsを借りてJavaScriptでaddEventListener
EaselJSにEventDispatcher.jsが追加された様子。 https://github.com/CreateJS/EaselJS/ JavaScriptで困ってたのがカスタム・イベント作成と通知。 無いと困るのでオレオレ実装でだましだましやってきたけど、もっと信頼できる仕組みを作りたいと思ってました。 そんな時の、この良いお知らせ。 まじめにお仕事していると良いことがあるなぁ〜。 年末のステキなプレゼントです。 EventDispatcher.jsのソースはgithubでご覧になって下さい。 ActionScript 2, mx.events.EventDispatcher に似た仕組みを持っているようです。 使い方もかなり似ています。 jQueryを使用しています。 var EventDispatcher = createjs.EventDispatcher; functi
CreateJSでスマフォ向けwebアプリを作りました | buccchi.jp
CreateJSを使って「ぬりぬり育成 ジェルミィ」という mixi アプリを制作しました。 のでその感想なんかを。 結論から言うと CreateJS 最高です。 上記QRコードよりスマフォでアクセスしてください。 ※ mixi へのログインが必要となります。 ログインメンドイ！って人はPC体験版をどうぞ。 http://vaseline.jp/nurinuri/ CreateJS でなにができるのか CreateJS には、大きく4つのライブラリが含まれています。 EaselJS canvas を as 的に扱える。as になれてる人ならすんなりいける。 TweenJS アニメーションを制御。なにかしらのトゥイーンライブラリを使ったことがあればすんなりいける。メソッドチェーンで記述できるので直感的。 SoundJS 音を制御。今回は見送り、独自に実装。 PreloadJS 外部ファイルの
EaselJS学習 - W2U開発wiki
W2U開発wiki トップページページ一覧メンバー編集 EaselJS学習 最終更新： w2u_dev 2011年05月16日(月) 17:44:30履歴 英語できません。機械翻訳と実践でなんとか解読します・・・ 公式サイト→http://easeljs.com/ API一覧→http://easeljs.com/docs/ ※protected、privateなフィールドは無視します。 クラス一覧 クラス階層 DisplayObject Container Stage Shape Text Bitmap BitmapSequence? Ticker Graphics Command Matrix2D MouseEvent Point Rectangle Shadow SpriteSheet? SpriteSheetUtils? UID クラス概要 スーパークラス DisplayObjec
ActionScript入門Wiki - TweenJS
<script src="http://code.createjs.com/easeljs-0.4.1.min.js"></script> <script src="http://code.createjs.com/tweenjs-0.2.0.min.js"></script> window.onload = function() { // div要素で作った矩形 var div = document.createElement("div"); div.style.width = "50px"; div.style.height = "50px"; div.style.position = "absolute"; div.style.backgroundColor = "#000000"; document.body.appendChild(div); // divの幅を200pxに変更。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://createjs.jp/?p=169
kudox.jp
日本全国花粉飛散マップ Pollen Map in Japan - ICS
http://www40.atwiki.jp/spellbound/pages/1905.html
ActionScript入門Wiki - PreloadJS