JavaScriptライブラリー「ParticleJS」を公開しました。「ParticleJS」は大量の粒子（パーティクル）の表現を行うためのライブラリーで、ゲームの演出やスペシャルコンテンツなどの表現制作に役立ちます。HTML Canvasとして動作するので、デスクトップ・モバイルを問わずどのブラウザーでも動作します。 また、「Particle Develop」という専用のデザインツールも用意しています。このツールを使うと直感的な操作でデザインでき、出力したパラメーターを「ParticleJS」にコピペで読み込めます。デザイナーが作成したパーティクル演出をエンジニアが利用するといった連携を想定してます。 MITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントはすべてGitHubにて公開していますので参照ください。 ParticleJ
このサイトは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">
先日行われたCreateJS勉強会 (第5回)にてPreloadJSで「悩ませないローディング」の作り方というテーマでライトニングトークさせていただきました。時間の関係でお伝えできなかった部分も含め本記事でまとめました。みなさまのローディング作りのご参考になれば幸いです。 PreloadJSとは？ PreloadJSとは、CreateJSのライブラリモジュールの1つで外部ファイル（画像・音声・JSONなど）の読み込み処理を担当しています。読み込み状況をイベントで監視して読み込み率（0.0〜1.0）を取得できます。その読み込み率を演出用のJavaScriptに渡してあげることで、読み込み状況に合わせた演出を実現できます。 ソースコード PreloadJSで外部ファイルを読み込むソースコードです。今回はLoadQueueクラスを使って拡張子の違うファイルをまとめて読み込んでいますが、同じ勉強会
ちなみにAPIはここから参照することができますので、この記事を読んで興味が湧いた人はぜひ覗いてみてください。 では、画像を後読みして、読み込みが完了したあとにbodyに追加するというサンプルを見ながら使いかたを書いていきます。(今回は楽をするためにjQueryも合わせて使っていきます) まずは一つだけ画像を読み込む場合です。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サンプル</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://code.createjs.com/preloadjs-0.3.1.min.js"></script> <script> jQuery(f
CreateJS触ってみたいなーということで、 ドキュメントとサンプルコードを見ながらもまったり書いていこうと思います。 2日目 TweenJS https://github.com/CreateJS/TweenJS/ 上のURLの飛び先からZIPボタンを押してダウンロードしてきます。 展開するとlibフォルダの中にtweenjsが入っています。 現時点での最新版v0.4.0を使います。 TweenJSはCreateJSのライブラリ群の一つです。 指定した時間で、現在値から指定した数値までオブジェクトのプロパティの値を変化させてくれる Tweenを簡単に作成することができます。 同じライブり群のEaselJSに依存していますので、 先にEaselJSを読み込んだ後にTweenJSを読み込むようにしましょう。 事前にTickerクラスでsetFPSを呼び出し、 FPSを設定しておくことができ
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アクセラレーション
この記事のURL http://www.dango-itimi.com/blog/archives/2013/001158.html Toolkit for CreateJS 1.1 と Haxe を用いて、html5 canvas で動作するシンプルなシューティングゲームの制作を行いました。リンク先には QR コードを配置しています。スマートフォンでの動作確認にご利用ください。 http://www.dango-itimi.com/html5/1/ ローディング画面は制作していないため、初めは少々真っ暗な画面が表示されたままとなります。 サウンド再生周りに関して Windows7 上では、html5 audio タグによるサウンド再生周りは以下の様な結果になりました。左に行くほど良い結果となります。 IE9 > Opera > Google Chrome > Firefox なんと音周り
CreateJSのコードを組み込んでみた 前提、ともかく現在の仕事においてアニメーションの導入という要件が出てきて、JavaScript書いてる者としてどのように解決しようかと相談した結果、下記の状況・前提からFlashのToolkit for CreateJSを利用することに決めた次第。 自分でアニメーションの動きを作ったことない アニメーターな方がFlasher 取り急ぎカッコ良く動いて欲しい が、今後を考えるとCSSでFlashの動きから書き起こすのダルい という理由から下記のソリューションを導入する方向になりました。（今の時点で本当にデプロイまで至れるかは、まだ手探りなので参考までに） CreateJS | A suite of Javascript libraries and tools designed for working with HTML5 Flash to HTML5
GraphicalWeb Advent Calendar 2012 の 25日目の記事です。 CreateJS を構成するライブラリーの一つに、TweenJS があります。TweenJS は、アニメーションのタイムラインや tween を仕込むことができる機能を有しています。 EaselJS と TweenJS の組み合わせCreateJS を構成する EaselJS と TweenJS を組み合わせてアニメーションを実現するなら、次のようなコード (抜粋) で可能です。 createjs.Tween.get( circle, { loop: true } ) .to( { x: 300 }, 1000, createjs.Ease.quadOut ) .wait( 300 ) .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) .
今回はEASELJSとTWEENJSで遊んでみようと思います。 EASELJSはCANVASを使っての描画周りを助けてくれるライブラリ、TWEENJSはトゥイーン作成を簡単にしてくれるライブラリで、どちらもCREATEJS SUITEの一部です。CREATEJS SUITEには他にはSOUNDJS、PRELOADJSというライブラリがあります。 今回は、画像をくるくる回転させながら表示させてその後徐々に透明にして消すサンプルを作ってみます。 まずは、EASELJSを使ってオブジェクトを配置させます。今回は外部から画像を読みこんで表示させるだけなので大した事はしませんが、APIがASに近いのでASに慣れた人ならすぐに複雑な事も出来るようになるのではないでしょうか。 まずはbodyにcanvasを作っておきます。 <body> <canvas id="mycan" width="640" he
2012年9月24日にサンフランシスコでAdobeの開いたイベント「Create the Web」のセッションが、ビデオで公開されました(英語)。その中からGrant Skinner氏による「CreateJS: Creating Rich, Interactive Experiences for HTML5」について、スクリプティングに関わる部分のスライドの文章を邦訳して、コードを掲載しました。また、日本語の参考ドキュメントもリンクで加えています。 EaselJS リッチでインタラクティブな2Dグラフィックスをオープンなwebに作成できる拡張性のあるプラットフォーム an extensible platform for creating rich, interactive 2D graphics on the open web 機能 features しっかりと階層化された表示リスト ro
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
