はじめに 最近、HTML5でゲームコンテンツを作ることが多いのですが 皆さんどのように制作されているでしょうか。 よく見かけるのは、HTML5開発のためのエンジン・ライブラリを用いつつ、アニメーションは アニメーターが頑張ってスクリプトを覚えて書く アニメーターが作ったアニメーションを、エンジニアが目コピしてスクリプトに落とす アニメーターが作ったアニメーションをそのまま使用できるようにシステムを組む などで対応する…といったスタイルなのですが、 ガラケー時代～ソーシャルゲーム全盛期においてAdobe Flash(※現在はAnimateと改名)を使い続けてきた身としては どうにかFlashだけで完結させたいんだよなー、と常々思案しております。 未だにアニメーションのオーサリングツールとしてはFlashの優位性は高いと思っていますし、 新たなエンジン・ライブラリを習得するコストもかかりますし

前回は、ランダムに動く粒子それぞれの間にバネのような力を与えてアニメーションさせた。すると、粒子は互いに集まっては離れることを繰り返す、という面白い動きになった（再掲第6回図3⁠）⁠。ここまでのコードは、以下のjsdo.itに掲げてある（第6回コード2⁠）⁠。 第6回 図3　オブジェクトがひと固まりに集まっては離れる（再掲） オブジェクトが引合う力の範囲をかぎる 互いに離れれば離れるほど、引き戻す力は強まるというのがバネの性質だ。ただし、それを単純に当てはめたために、仲間から外れた粒子の激しい動きが止められず、しかも仲間はずれは次第に増えてしまうというのが前回の問題だった。 もともと、バネはいくらでも伸び縮みするものではない。むしろ、その動きを正しく保てる範囲はかぎられる。そこで、この粒子のアニメーションでも、互いの間に引合う力が及ぶ距離を決めてしまおう。2点の座標からその間の距離を導くに

CreateJSでは、Adobe Animate CCなどで書き出したSpriteSheetをコマアニメーションのように表現できます。アニメーションの開発をしていると、全体のフレームレートは60fpsにしたいけど、個別のアニメーションは30fpsくらいに抑えたいということがあります。コンテンツ全体のfpsと個別のアニメーションのfpsを分ける方法を備忘録として残しておきます。 全体のフレームレートの設定 コンテンツを適度にヌルヌル動かすために60fpsを全体のフレームレートとして設定します。

こんにちは、取締役の青柳です。 2016年1月22日に中野ICTCOで開催された『第7回 CreateJS 勉強会』に参加してきました。私自身は CreateJS のことを「Webでグラフィックを扱いたいときに便利な JavaScript ライブラリ」程度にしか捉えていなかったのですが、勉強会に参加して CreateJS が 非常にパワフルで将来性のある ライブラリだとわかったので、その概要をお伝えしたいと思います。 なお、この記事は CreateJS をまだ知らない方に向けて「CreateJS とはなにか？」について書いたものです。技術的な詳細については、こちらのサイトをご覧ください。 CreateJS 公式サイト http://www.createjs.com/ CreateJS 入門サイト – ICS MEDIA（株式会社 ICS 様） https://ics.media/tutor

unFocus Projects – Kevin Newman and Ken Newman Home of Scripts 'n Styles for WordPress, Backstage2D and History Keeper! Adding HiDPI and Retina screen support to a CreateJS (Flash HTML5 canvas publish with EaselJS) is easy enough. Just add this code after where the stage is defined in your published html file (either inside the generated init function, or handleComplete if there are external asset

ID部の藤岡です。 弊社も案件で使っている「SpriteStudio」にはHTML5書き出しの機能があります。 書き出したデータをSpriteStudio専用のHTML5 Playerで再生することで、ブラウザ上でSpriteStudioで制作したアニメーションを再現することができるようになってます。 今回これを応用し、専用のHTML5 Playerを使わずにCreateJSでSpriteStudio書き出しデータを読み込むライブラリを自作して、簡単なミニゲームを作ってみました。 →別タブで開く （[P]キーでパンチ、[K]キーでキック、左右の[←→]キーで移動） ワンテンガーはSpriteStudioからの書き出しを自作ライブラリを通じてCreateJSで読み込み、それ以外はCreateJSで普通に画像を読み込んでます。 最適化はしてませんが、スマホでもひとまず動作します。（操作はタップ

var FPS = 60; var canvas = document.getElementById("testCanvas"); var stage = new createjs.Stage(canvas); if (createjs.Touch.isSupported()) { createjs.Touch.enable(stage, false, false); } createjs.Ticker.setFPS(FPS); createjs.Ticker.addEventListener("tick", handleTick); stage.addEventListener("stagemousedown", mouseDown); stage.addEventListener("stagemousemove", mouseMove); stage.addEventListener(

この記事のURL http://www.dango-itimi.com/blog/archives/2013/001186.html どちらかのサイトで同じような問題の記事を見たことがあったような気がしますが、メモする意味で記述します。 Toolkit for CreateJS にて入れ子状態のムービークリップを出力後、スクリプトから制御しようとした所、入れ子内部のムービークリップに gotoAndStop 命令が効かない、という現象が発生しました。 解決方法としましては、大本のムービークリップに対して gotoAndStop or gotoAndPlay 命令を記述すればよし、となりました。 詳細は以下となります。 CreateJS バージョン 検証で利用した CreateJS のバージョンは以下となります。 easeljs-0.6.1 tweenjs-0.4.1 movieclip-0

経緯 先日、初めてcreatejs使ったスマホ向けwebアプリ作ってリリースした。 まあ、予想通り、createjs、canvasにいろいろハマった。 はまったところは、gistにメモしておいたので、ここにも整理して乗っけておく。 なお、類似blog記事多数あり、俺もほとんど8割位それらの記事で助かりました。 ここで、参考にlink貼った記事書かれた方々に感謝します。 そして、次にcreatejs使う人のために、 既出の物、あまり他の記事に見ない物も、まとめて書いておきます。 参考までに。 概要 以下の現象の原因と対応について書いていきます タッチイベントがずれる staging環境で画像click時にエラーに retinaでcanvasがぼやける (android)canvasが2つ出てきた (android)でcanvasに1clickすると2clickした事になってる (androi

スマフォ向けに描画が終わったらtickイベントをとめたい イベント初期化 こんな感じでtickイベントが始まるとします。 var stage = new createjs.Stage($('canvas').get(0)); createjs.Ticker.addEventListener('tick',stage);

CoffeeScript には簡単にクラスの継承を実現できる機能が備わっていますが、こと CreateJS のクラスを継承する際には従来とは少し異なる手法で実装するがあるので、注意が必要です。 知ってしまえば大したこと無いのですが、ちょっとクセのあるテクニックなのでサンプルを交えてその方法を紹介します。 例) createjs の Bitmap クラスを継承してみる 従来の継承 通常、CoffeeSctript でクラスの継承をするには以下のように記述します。 Animal クラス class Animal constructor: (@name) -> alive: -> false Dog クラス class Parrot extends Animal constructor: -> super("Parrot") dead: -> not @alive() Animal クラスを継承

いわゆるソーシャルゲームのゲーム画面で、FlashCC の HTML5 書き出しを使って演出部分を制作し、アプリケーション側との繋ぎ込みを行った際のメモ。 どのゲームかはあんまり大きい声で言えない？ので、もし知りたければ twitter で聞いてもらえば。 今回は基本中の基本で、そもそも FlashCC がどういう形の CreateJS のコードを書き出すのかを細かく書いている。全3回くらいでお送りする予定です。 サンプルコードと言ってもただ MC を数個配置しただけだが一応 Github においてある。 サンプルでは test.fla というファイルを作り、とりあえず4つの各種インスタンス(ムービークリップ、ボタン、グラフィック、ビットマップ)を配置する。(今回は描画部分のみにフォーカスするのでサウンドについては省略) また、合わせてCreateJSの公式ドキュメントにも一通り目を通す、

SoundJS has added support for Audio Sprites, available immediately in the NEXT version of SoundJS on GitHub. For those unfamiliar with audio sprites, they are much like CSS sprites or sprite sheets: multiple audio assets grouped into a single file. Benefits of Audio Sprites More robust support for older browsers and devices that only allow a single audio instance, such as iOS 5. They provide a wor

FlashCC でパブリッシュした CreateJS ファイルで callback 付きの gotoAndPlay を実現するJavaScriptflashCreateJS ご世間様はアレに夢中な中で、CreateJSさんのニッチな話題です。 簡単な機能要件 必須 TARGET_LABEL を再生したとき、TARGET_LABEL_end まで辿り着いた瞬間に callback が発火すること Flash 内のスクリプトの動作に影響を及ぼさないこと CreateJS 本体の改造は出来る限りしないこと。ただし、後から prototype を拡張したり弄ったりするのは OK とする（した） Flash 内スクリプトでも、外部のスクリプトからでも呼べるようにすること 努力目標 再生中、任意のタイミングで gotoAnd(Play|Stop) もしくは同メソッドが呼ばれた場合は、callback

Twitterでコラ画像が流行すると、大体数日で○○の画像ジェネレータみたいなものがリリースされます。 この画像ジェネレータ系のサービスはGDかImageMagickを使っているのかと思っていましたが、最近はcanvasでつくられているようです。 私もこういうものを作ってみたいと思っていたので、ちょっと調べて簡単な画像ジェネレータを作ってみました。 canvasを扱う場合はCreateJSを使うのが便利なようです。 今回はアニメーションの処理はないため、CreateJSの中のEaselJSのみを使用しました。