CreateJSをはじめる人向けに、自分が使った時に手間取った所をまとめておきます。 ドキュメントには書いてあることだけど、英語わからなかったりすると意外と手間取るとこ。 CreateJSをかるく触ったことある人向け。 createJSのプロパティをグローバルから参照する createJSの各プロパティは、通常createjsオブジェクトから参照する必要があるが、 以下のようにすることで、グローバルに参照できるようになる。
iOSやAndroid, Windows 10のようなタッチデバイスでタッチ操作を制御するには、createjs.Touchクラスを使ってタッチ操作を有効に設定します。createjs.Touchクラスによって自動的にタッチイベントがマウスイベントに変換されるため、特別な処理を実装する必要はありません。 // ステージを作成 var stage = new createjs.Stage("myCanvas"); // タッチ操作をサポートしているブラウザーならば if(createjs.Touch.isSupported() == true){ // タッチ操作を有効にします。 createjs.Touch.enable(stage) } サンプルを再生する サンプルのソースコードを確認する ※enable()メソッドの詳しい使い方は「公式ドキュメント(英語)」を確認ください。 次の記事へ
今回から3回ほどにわたって、物理計算にもとづくアニメーションをつくってみたい。物理空間に置かれたものが、落ちたり互いにぶつかり合ったりしたときの位置や速度はライブラリで計算する。今回使うのは、さまざまな言語に移植されていて定評のあるBox2Dという2次元の物理演算エンジンだ。つぎのjsdo.itのアニメーションをお題とする。 Box2dWebを使う 「Box2D」はもともとC++で開発された2次元の物理演算エンジンだ[1]。重力と物体の質量や摩擦、弾性にもとづく位置と動きの物理計算を行い、シミュレーションしてくれる。ActionScript 3.0やJava、C#、Pythonなど、さまざまな言語に移植されてきた。JavaScriptのライブラリとしても、いくつか公開されている。その中でも対応するバージョンが新しく、解説(英文)も整っているBox2dWebを使ってみたい。 まずは、インス
CreateJSでは、画像ファイル形式のPNG画像/JPEG画像/GIF画像/SVG画像を画面に表示することができます。Adobe PhotoshopやIllustratorなどのソフトウェアでグラフィックや写真・イラストを作成することで、表現の幅が広がるでしょう。それらのソフトウェアで汎用フォーマットのPNG形式もしくはJPEG形式で保存しておきます。 CreateJSで画像を表示するにはcreatejs.Bitmapクラスを利用します。コンストラクターの引数には画像のURLを設定します。 書式 new createjs.Bitmap(画像のURL); サンプル var bmp = new createjs.Bitmap("sample.png"); stage.addChild(bmp); サンプルを再生する サンプルのソースコードを確認する ※このサンプルでは、createjs.Ti
このサイトは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">
今回のお題は、ランダムに動く粒子の間に相互作用を加えたアニメーションだ。ランダムな動きにオブジェクト同士のインタラクションを交えると、有機的なアニメーションになってくる。Jared Tarbell氏がかつて「Node Garden」という作品を発表された。Keith Peters氏はそのノード間にバネ運動を加えて、著書『ActionScript 3.0アニメーション』で解説している。本稿はその表現をCreateJSで書いてみようと思う。 ステージのランダムな位置に、ランダムな方向と速さで動く小さなオブジェクトをたくさん置く。それらのオブジェクトの間に引っぱり合うバネのような力を与え、さらに互いを線で結ぶ(図1)。できあがりのコードは、jsdo.itに上げてある(例によって後で書き直すかもしれないが)。 図1 ランダムに動くオブジェクトの間に引合う力を与えて線で結ぶ ランダムに置いた
CreateJSでHTML5 Canvasを操る 第1回 CreateJSとは 第1回目はCreateJSの概要と、おおまかな機能、またCreateJSの理解に必要な概念を解説します。簡単なデモを多く用意したので、まずはどんな表現ができるのかを実感してもらえるといいと思います。 CreateJSとは CreateJSは、Canvasを便利に扱うためのライブラリ群で、JavaScriptの知識があればHTML5のCanvasを直感的に制御し、コンテンツを作ることができます。CreateJSというと、Flash経験者のためのライブラリと捉えている人がいるかもしれませんが、JavaScriptでコードを書いた経験があれば、だれでも使いこなすことができます。 現在のところFlashがかつてになっていたウェブ上のダイナミックな表現を可能にするツールとしても注目されています。 これまで、ウェブの動的コ
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く