タグ:canvas

Filters for EaselJSにDropShadowFilterを追加したよ

こんにちわ、ドラクエ8クリア目前のkudoxです。前回のGlowFilterに続き、今回はEaselJS用のDropShadowFilterを作ってみました。このDropShadowFilterは、inner, knockout, hideObjectといったオプションにも対応しており、ActionScript3.0のDropShadowFilterと同等の機能を持っています。public domainで公開しますので、商用でもご自由にお使い下さい。

EaselJS用のGlowFilterを作ったよ

メリークリスマス!最近、サンタさんとご縁のないkudoxです。現在のEaselJS 0.7には、まだGlowFilterが実装されていません。Shadowクラスでグローに似た効果を得ることもできますが、Shadowクラスはcacheされないため処理負荷が高く、またChromeがバグを抱えていたりします。そこでEaselJS用のGlowFilterを作ってみました。public domainで公開しますので、商用でもご自由にお使い下さい。

EaselJS ver 0.7で変更されたイベント処理を理解しよう

こんにちわ、ドラクエ8の誘惑に負けたkudoxです。少し時間が経ってしまいましたが、先日CreateJSの新バージョンがリリースされ、EaselJSのバージョンは0.7.xとなりました。EaselJS 0.7では、様々な機能追加や仕様変更が行われましたが、その中でもイベント関連の変更が目立ちます。そこで、EaselJS 0.7のイベント関連の変更点を簡単なサンプルと共に紹介したいと思います。

BitmapData for EaselJS ver1.00 リリースのお知らせ

こんにちわ。まだiPhone5の分割払いが39000円残ってるけど、5sが欲しくてたまらないkudoxです。先日、BitmapData for EaselJS ver1.00をリリースしました。こちらからダウンロードして頂けます。ver1.00では、新たにapplyFilter, expand, perlinNoiseメソッドを追加しています。今回は、これら新規に追加したメソッドの使い方を簡単に紹介したいと思います。

BitmapData for EaselJSの使い方

こんにちわ。最近、梅干しを1日1個食べることを日課にしているkudoxです。今回は、先日公開したBitmapData for EaselJSの使い方を簡単なサンプルと共に紹介したいと思います。BitmapData for EaselJSは、基本的にActionScript3.0に合わせて作っているので、Flashをやられている方は違和感なく使うことができると思います。

ピクセル職人に捧ぐ – BitmapData for EaselJS –

久々のブログ更新になってしまいました。最近、首の痛みに悩まされているkudoxです。現在のEaselJSには、BitmapDataクラスが定義されていないため、canvasのピクセルを操作するには低レベルのHTML5 Canvas APIを使う必要があり、非常に手間がかかります。そこでEaselJSにActionScript3.0と同様のインターフェイスを備えたBitmapDataクラスを追加する「BitmapData for EaselJS」を作ってみました。MITライセンスで公開していますので、商用でも無料でお使い頂けます。

新しくなったPreloadJSのLoadQueueクラスで外部ファイルを読み込もう

PreloadJSは、画像・音声・XML・JS・CSSなどの外部ファイルの読み込みをサポートしてくれるJavaScriptライブラリです。CreateJSのサイトからダウンロードできます。以前の投稿「PreloadJSで外部ファイルを読み込む」では、PreloadJS 0.1.0時点の使い方を紹介しましたが、先日公開された新バージョンPreloadJS 0.3.xでは仕様が大幅に変更になりました。そこで新しくなったPreloadJSの変更点や基本的な使い方をレポートしたいと思います。

新しくなったCreateJSのイベントリスナーを理解しよう

少し遅くなりましたが、先日CreateJSの新バージョンが公開され、EaselJSのバージョンは0.6.0となりました。新バージョンのEaselJSには様々な新機能が追加されていますが、その中で最も大きな変更点は、EventDispatcherクラスの追加と共にイベントリスナーの仕組みが導入された点でしょう。今回は、いくつかのサンプルを通してEaselJSのイベントリスナーの使い方をご紹介したいと思います。

EaselJS用のVector3Dクラスを作ったよ

3Dの勉強も兼ねて、EaselJS用のVector3Dクラスを作ってみました。Vector3D for EaselJSは、JavaScriptファイルを読み込むだけで、EaselJSにActionScript3.0と同様のVector3Dクラスを追加することができます。ライセンスフリーで公開していますので、商用であっても無料でお使い頂けます。

CreateJSでドラッグして回転させる動きに挑戦

CreateJSを使って、中村勇吾さんがFlashで作られたintentionalliesのドラッグして回す動きをHTML5 canvasで作ってみました。中村勇吾さんは、私が最もリスペクトするクリエーターで、初めてこのサイトを見たとき、どうやって処理しているんだろうという好奇心とその動きの気持ち良さに暫く没頭して操作していたのを覚えています。

123