意地でもCreateJSでWebGLを使ってみよう―CreateJS勉強会/川勝発表資料 - ICS MEDIA
CreateJS勉強会 (第6回)でのライトニングトーク「意地でもCreateJSでWebGLを使ってみよう」（発表者：川勝）の発表内容を記事としてまとめました。CreateJSのWebGL機能は高いパフォーマンスが得られるものの、表現の制約があります。本記事ではCreateJSのWebGL機能を拡張することで、その制約を超えて望みの表現を実現する方法を紹介します。 CreateJSではWebGLレンダリングに対応 CreateJSの中で、描画機能を提供しているEaselJSはWebGLでのレンダリングに対応しています。WebGLではレンダリングにGPUを使用できるため、高速に描画が可能です。CreateJSではWebGLを使用すると、従来のContext2D形式に比べて環境によっては最大51倍もの高速化が見込めます（参照「WebGL Support in EaselJS - Create
HTML5モーション制作のテクニックとデータ最適化の必要性―CreateJS勉強会/池田発表資料 - ICS MEDIA
2015年9月4日（金）、CreateJS勉強会 (第6回） がICTCOで95人の定員規模で開催されました。勉強会のフォローアップとして、発表資料「HTML5モーション制作のテクニックとデータ最適化の必要性」（発表者：池田）のスライドを一部抜粋して記事という形で公開します。 バナー広告にみるFlash(SWF)の衰退とHTML5の隆盛 HTML5モーションコンテンツの代表的な活用分野として「ウェブページ」「ゲームコンテンツ」、そして「広告」があります。今回は「広告」をテーマとして最近の話題から紹介します。2015年9月1日にリリースされたGoogle Chrome 45からウェブページ内の主要でないFlash(SWF)コンテンツがブロックされるようになりました（参考記事「In June, we announced (https://goo.gl/TF7dmD) that Chrome w
CreateJSとNode.jsを使ってサーバーサイドでCanvasを扱おう–ICS LAB
HTML5 Canvasのフレームワーク「CreateJS」(基本的な使い方は入門サイトをご覧ください）について、2015年2月10日に開催されたCreateJS勉強会 (第5回) でライトニングトーク「CreateJSとNode.jsを使ってサーバーでCanvas要素を使おう」を発表しました。今回はそのスライドを元に、サーバーサイドでCreateJSを使うメリットを紹介します。 デモ 今回紹介するnode-easelを使ったデモです。スマホ画面にTwitterのアイコンが、PC画面には白い矩形が表示されています。スマホで選んだTwitterのユーザーのアイコンがPC側でアニメーションします。画像加工はサーバーサイドで動くCreateJSを使って行われています。 Section1. Node.jsとモジュールについて Node.jsはブラウザではなくサーバーサイドで動くJavaScript
CreateJSを使ったアニメーション表現の基礎
動くサイトにプログラムが必要な時代は終わった。〜デザイナー歓喜のAnimate CCとSpineの紹介utweb
『ガールフレンド（仮）におけるボーンアニメーション実装』
はじめまして。 ガールフレンド(仮)でアニメーションを担当しています。峯岸と申します。 本日はガールフレンド(仮)のぷちガールアニメーションの制作に関してご紹介したいと思います。 ぷちガールちゃんとは？ ガールフレンド(仮)ではぷちガールちゃんという機能があり、ゲーム内でバトルをしたりイベントに参加したりするときに応援してくれる小さなガールがいます。 "会いに行く"機能では、ぷちガールちゃんにアニメーションをつけて可愛く動くよう実装されています。 ボーンアニメーションとは？ 体にボーンを階層的に設置してゆき、その骨格のつなぎ目を基準にキーフレームで動きをつけてアニメーションをつけていく技法のことです。 スケルタルアニメーションや、スキンドメッシュアニメーションとも呼ばれています。 ガールフレンドでは、アニメーション制作にFlashを使用しているため、ガールの各パーツを関節ごとにムービークリ
HTML5 Canvasを始めよう：EaselJSとTweenJSでテキストエフェクト | ClockMaker Blog
HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」と「TweenJS」を使ってデモを作ってみました。 demo 今回のブログ記事では「EaselJS」と「TweenJS」の使い方をデモの作り方を通して紹介します。 ライブラリの紹介 「EaselJS」と「TweenJS」はFlashのエンジニアとして著名なGrant Skinner氏が開発しているJavaScriptライブラリです。「EaselJS」がHTML5 CanvasをFlashライクに使うためのライブラリで、「TweenJS」が汎用的なトゥイーンライブラリです。 ▲EaselJS HTML5のCanvas要素はHTML上に自由に描画することのできる新しい要素で、工夫することでFlashのように豊かな表現を作ることができます。ただCanvasではJavaScriptでちょっと
TweenJSでアニメーションしてみる2（EaselJSも使ってみる） | 株式会社エイチ・オー・エス
こんにちは。受託開発担当のMasaです。 前回 TweenJSの記事の続きで、今回はテキストのアニメーションを紹介します。 前回の予告では TweenJS を拡張した JSTween プロジェクトの TextTween を紹介すると書きましたが、コンストラクタを呼び出すだけで終わってしまうため、EaselJS + TweenJS でのテキストアニメーションを紹介することにしました。 有名なフレームワークなので説明は省略します。尚、現在の最新バージョンは v7.0 なのでこれを使用します。 とりあえず何かテキストを表示します。 canvas は必ず必要です。Stage は最上位のコンテナで、update することで子オブジェクトを描画します。 <!DOCTYPE html> <head> <script src='easeljs-0.7.0.min.js'></script> <script
CreateJSでHTML5 Canvasを操る | 第1回 CreateJSとは
CreateJSでHTML5 Canvasを操る 第1回 CreateJSとは 第1回目はCreateJSの概要と、おおまかな機能、またCreateJSの理解に必要な概念を解説します。簡単なデモを多く用意したので、まずはどんな表現ができるのかを実感してもらえるといいと思います。 CreateJSとは CreateJSは、Canvasを便利に扱うためのライブラリ群で、JavaScriptの知識があればHTML5のCanvasを直感的に制御し、コンテンツを作ることができます。CreateJSというと、Flash経験者のためのライブラリと捉えている人がいるかもしれませんが、JavaScriptでコードを書いた経験があれば、だれでも使いこなすことができます。 現在のところFlashがかつてになっていたウェブ上のダイナミックな表現を可能にするツールとしても注目されています。 これまで、ウェブの動的コ
EaselJS のマウスイベント処理 - akihiro kamijo
EaselJS の DisplayObject には、いくつかマウスイベントを扱うためのメソッドがあります。今回は、それらを利用したマウス操作への対応方法を紹介します。 利用できる関数は以下の 5 つです。名前も使い方も AS2 のイベント処理に良く似ています。 onClick : ユーザーがマウスボタンをクリックした onPress : ユーザーがマウスボタンを押した onDoubleClick : ユーザが表示オブジェクト上でダブルクリックした onMouseOut : マウスポインタが表示オブジェクトの外に移動した onMouseOver : マウスポインタが表示オブジェクト上に移動した 見てのとおり、Flash Player のマウスイベントと比べると数は少ないです。もっとも、この辺りの仕様は、CreateJS が出荷されるときには変わっているかもしれません。 イベント発生時に呼び
JS5 :HTML5向けjavascriptフレームワークのチュートリアルサイト » EaselJSで円を描いてみよう！
まずは概要から さて、前回のチュートリアルでEaselJSを動かす環境は出来ました。 EaselJSで開発する環境を整える 次は描画の基本となる材料を揃えて実際に絵を描いてみましょう。EaselJSでお絵かきを行うには少なくとも一つのcanvasタグが必要です。そして、その上にレイヤー状のオブジェクトを重ねていくことで描画を行っていきます。図にすると以下のようなイメージです。 ここに書かれているStageオブジェクトとelementがEaselJSの担当範囲。 とはいえものは試しです。実際に組んでみましょう。 HTML部分 <div id="wrapper"> <canvas></canvas> </div> できました。簡単すぎますね。ここにEaselJSは様々なモノを描いていくわけです。次にCSSでスタイルを整えます。 CSSでcanvasをWindow全体に広げる ここでは画面全体
FlashデベロッパーのためのCreateJS：第1回 CreateJSとは何か──そのメリットからFlashとの違いまで | デベロッパーセンター
CreateJSは、HTML5でリッチコンテンツを制作するためのJavaScriptライブラリのスイート（特定用途のソフトウェアを詰め合わせたパッケージ）です。Flashデベロッパーとして著名なGrant Skinner氏（gskinner.com）が開発を行っており、MITライセンスのオープンソースソフトウェアとして商用でも無償で利用できます。 急激に拡大している利用 2013年5月4日～8日に開催されたAdobe MAX 2013における、Grant Skinner氏のセッション「CreateJS: Building Rich Interactive Experiences in HTML5」によると、CDNにホスティングされているCreateJSライブラリのヒット数が急激に増加しており、現在では2億ヒット（月間）を超えています。 その中でも、日本からの利用は世界で第2位を記録しており
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 の canvas 要素を base64 文字列化し画像として保存する方法まとめ - Qiita
http://clockmaker.jp/blog/2016/01/tutorial-createjs/
http://matsu4512.jp/blog/2012/04/20/easeljs02/
http://www40.atwiki.jp/spellbound/pages/1905.html
http://kudox.jp/java-script/createjs-easeljs-eventlistener