CreateJS入門サイト - ICS MEDIA
このサイトはHTML5 Canvasのフレームワーク「CreateJS」の入門サイトです。初学者から学べるように基本的なCreateJSの使い方から解説しつつ、発展的な内容までまとめています。このサイトを通して、webでのインタラクションデザインについて学んでいきましょう。 導入編 webのリッチコンテンツを作るためのフレームワーク「CreateJS」。どのような場面で利用されるのか、どういった表現が可能なのかという点を中心に、概要と導入方法を説明します。 CreateJS とは CraeteJS の事例 簡単なサンプルを試そう ブラウザの開発ツールの使い方を抑えよう CDNのURL 次のコードをHTMLファイルに記述することでCreateJSが利用可能になります。 <script src="https://code.createjs.com/1.0.0/createjs.min.js">
[備忘録] 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)
SpriteStudio for CreateJS | TENPURA - 1→10design Lab -
ID部の藤岡です。 弊社も案件で使っている「SpriteStudio」にはHTML5書き出しの機能があります。 書き出したデータをSpriteStudio専用のHTML5 Playerで再生することで、ブラウザ上でSpriteStudioで制作したアニメーションを再現することができるようになってます。 今回これを応用し、専用のHTML5 Playerを使わずにCreateJSでSpriteStudio書き出しデータを読み込むライブラリを自作して、簡単なミニゲームを作ってみました。 →別タブで開く （[P]キーでパンチ、[K]キーでキック、左右の[←→]キーで移動） ワンテンガーはSpriteStudioからの書き出しを自作ライブラリを通じてCreateJSで読み込み、それ以外はCreateJSで普通に画像を読み込んでます。 最適化はしてませんが、スマホでもひとまず動作します。（操作はタップ
高機能なモーション制作用JSライブラリGSAP/TweenMaxを使ったタイムリマップ表現 | ICS MEDIA
皆さんはHTMLでモーションを作るときにどのトゥイーンライブラリを使用していますか？ GSAP（グリーン・ソック・アニメーション・プラットフォーム）は、Flash全盛時代から存在する歴史あるトゥイーンライブラリです。 GSAPはCSS/HTML Canvas/WebGLなどさまざまなアニメーション作成に利用できます。類似トゥイーンライブラリよりも高機能であり、かつ実行パフォーマンスも優れているのが魅力的です。GSAPの詳しい使い方は次の記事で解説しているので、使い方を知りたい方は以下の記事から参照ください。 GSAP入門（前編） - 基本的な使い方 GSAP入門（後編） - タイムライン機能など この記事では、GSAPのタイムスケールという機能を中心に解説します。 作成したモーションデモを紹介 今回はGSAPの機能の1つ「タイムスケール」を使って、3Dの表現を試してみました。まずは次の2つ
WebGLのドローコール最適化手法―CreateJS勉強会/池田発表資料(後編) ― ICS LAB
本記事は2015年2月10日（火）に開催されたCreateJS勉強会 (第5回) の発表資料「CreateJSクリエイトジェイエスで制作するスペシャルコンテンツ」の後編となります。前編(CanvasとWebGLの比較)に続けて本記事ではWebGLウェブジーエルの最適化手法を紹介します。 WebGLのドローコールの最適化について 前編ではHTML5 CanvasとWebGLの使い分けについて紹介しましたが、ここからはWebGLの最適化手法の1つを紹介します。よく知られているテクニックですが、WebGLでは描画命令のドローコールを少なくすることが有効だと言われています。ドローコールが少なくなることで滑らかなモーション = 60fps(遅延なきRequestAnimationFrameの達成）を実現し、スマートフォンでの実行時の消費電力を抑えられます。 下図は複数の要素を画面に表示するときのWe
createjs,canvasでハマるところ2014 - lxyuma BLOG
経緯 先日、初めてcreatejs使ったスマホ向けwebアプリ作ってリリースした。 まあ、予想通り、createjs、canvasにいろいろハマった。 はまったところは、gistにメモしておいたので、ここにも整理して乗っけておく。 なお、類似blog記事多数あり、俺もほとんど8割位それらの記事で助かりました。 ここで、参考にlink貼った記事書かれた方々に感謝します。 そして、次にcreatejs使う人のために、 既出の物、あまり他の記事に見ない物も、まとめて書いておきます。 参考までに。 概要 以下の現象の原因と対応について書いていきます タッチイベントがずれる staging環境で画像click時にエラーに retinaでcanvasがぼやける (android)canvasが2つ出てきた (android)でcanvasに1clickすると2clickした事になってる (androi
X-LABO: CreateJS 製コンテンツを Android WebView で表示するも問題発生
この記事のURL http://www.dango-itimi.com/blog/archives/2013/001197.html 記事タイトルの内容のことを行ってみるも、問題が解決しなかったためメモします。以下主な流れです。 (1)CreateJS にてスマートフォンブラウザからでも遊べる html5 canvas ゲームを作成 (2)Adobe AIR を用いて iOS, Android アプリ化にする事に (3)Adobe AIR製の Android アプリにて viewport の問題発生 (4)Java製の Android WebView アプリを作成する事で viewport の問題を解決 (5)Android WebView では CreateJS 製コンテンツが意図通り動作しない箇所が発覚 html5 canvas ゲームをアプリ化 スマートフォンのブラウザで遊べる Cr
FN1401003 | EaselJS次期バージョンでWebGLを使う | HTML5 : テクニカルノート
2014年1月28日付CreateJS Blogに「WebGL & EaselJS: a Technical Intro」という記事が投稿されました。EaselJSの次期バージョンがサポートするでWebGLレンダラをどのように使うかの入門的な解説です。現在、EaselJS次期バージョンはパブリックプレビューがGitHubに公開されています。本稿はblog記事にもとづいて、新しいWebGLレンダラについてご紹介します。なお、次期バージョンに備わる機能については、「EaselJSがWebGLをサポート」をお読みください。 01 はじめに これまで試されたかぎりでは、一般的に使うWebGLレンダラをEaselJS向けに開発する意味はないと考えられていました。最近のCanvasの実装は、すでにさまざまな2DコンテンツをGPUで適切に描くことができます。それも、ネイティブコードにより、重い仕事をこな
CreateJS Blog
The latest version of TweenJS (1.0) has a completely rebuilt plugin model, and ships with a much more robust set of plugins. … Continue reading → Scaling and Stretching with the ScaleBitmap Class We are always looking for ways to optimize, simplify, or create better workflows in CreateJS, and the ScaleBitmap is a great example of this. Using an old Flash approach, the ScaleBitmap class, shipped in
CreateJSの新バージョンがリリース
CreateJSの新バージョンが公開されました。機能が拡張し、バグは修正されるとともに、APIの安定化もはかられています。CreateJS Blog「New version of CreateJS released!」にもとづいて、その中身をご紹介します。 このバージョンでイベントモデルは大きく改められて、イベントがバブリングするようになりました。他にも、アニメーションは扱いやすくなり(たとえば、フレームレートはSpriteオブジェクトごとに定められます)、矩形領域が得られ、APIは安定化しました。 その他のライブラリにも、改善や新たな機能が加えられています。たとえば、SoundJSではオーディオプロパティがトゥイーンできます。問題の修正とともに、新たな機能も加えました。FirefoxベータバージョンのWebAudioのサポートなどです。 ライブラリごとの細かな変更や追加は、GitHubの
いろんなところで役に立ちそうな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のCanvasでつくるダイナミックな表現―CreateJSを使う 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2025 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
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」のソースコード
SoundJSのSoundInstance.completeイベントでSoundInstance.play()メソッドがサウンドを再生しない
SoundJSでサウンドを再生し終わると、SoundInstance.completeイベントが起こります。そのイベントリスナーでSoundInstance.play()メソッドを呼出しても、サウンドが再生されないという話しを聞きました。「SoundInstance Class」のドキュメントの「Example」を参考に試してみたら、本当に再生されませんでした。 With the SoundJS library the SoundInstance.complete event is fired when playback completes. However the SoundInstance.play() method does not seem to play sound in its event listener. テストしたのは、つぎのようなごく簡単なコードです。ほぼ、ドキュメント
Flashspritejs by mach3
Load and play sprite animations made by Flash CS6+ View the Project on GitHub mach3/flashspritejs Download ZIP File Download TAR Ball View On GitHub FlashSprite.js これはなに クイックスタート メソッド オプション イベント インスタンス これはなに Adobe Flash CS6+ で出力されたスプライトアニメーションシートを再生するjQueryベースのライブラリ。 Flash自体にはCreateJS形式等で書きだす機能がありますので それらを使えば用のないライブラリですが、 あまり色々ライブラリを読み込みたくない 宗教上の理由でどうしてもjQueryで再生したい などのご要望にお応えする物です。 クイックスタート 1. スプ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FN1309001 | EaselJSのDisplayObject.mouseEnabledプロパティで直後のマウスイベントが止められない | HTML5 : テクニカルノート
第4回CreateJS勉強会での発表資料「実際にSoundJSを使ってみて分かったこと」を公開しました - 448.jp blog
CreateJS × Android でハマったこと - Qiita
http://createjs.jp/?p=169
はじめてのCreateJS＋パーティクル | CreateJS勉強会 (第3回)