カテゴリー:JavaScript

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

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

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

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

EaselJSのMatrix2Dクラスを使った変換行列の操作

EaselJSには、Matrix2Dクラスが用意されており、移動・回転・拡大/縮小・傾斜といったオブジェクトの変形を変換行列を使って行うことができます。ActionScript3.0のMatrixクラスと同様に3×3の正方行列なので、基本的な操作方法はFlashと似ていますが、オブジェクトへの適用方法など若干の違いはあります。今回は、いくつかのサンプルを通してEaselJSのMatrix2Dクラスを解説していきたいと思います。

EaselJSのPointクラスをFlashライクに拡張しよう

現在のEaselJSのPointクラスは、まだバーションが0.50であることもあり、必要最小限の機能しか定義されていません。JavaScriptは、定義済みのオブジェクトでもprototypeを通して拡張することができるので、勉強も兼ねてEaselJSのPointクラスをActionScript3.0と同様に扱えるように拡張してみました。ファイルをダウンロードできるようにしていますので、よろしければご自由にお使い下さい。

CreateJS用のリキッドレイアウトライブラリを作ったよ

CreateJS用のリキッドレイアウトライブラリを作ってみました。LiquidLayouter for CreateJSは、CreateJSを使ったフルcanvasのコンテンツをより簡単に実装するためのJavaScriptライブラリです。HTML5 canvasをサポートしたWindows, Macの各ブラウザだけでなく、iPhone, iPad, Androidでも動作確認しています。MITライセンスで公開していますので、商用でも無料でお使い頂けます。

バージョンアップしたCreateJSを試してみたよ

先日、CreateJSの新しいバージョンが公開されました。CreateJSのサイトからダウンロードできます。新しいCreateJSでは、バグフィックスと共に様々な新機能が追加されており、ますます便利になっています。今回は、バージョンアップにより変更された点や追加された新機能をレポートしたいと思います。

JavaScriptでのジェスチャーイベントを利用した拡大/縮小・回転

ジェスチャーイベントは、スマートフォンやタブレットのタッチパネルで複数の指によるタッチ操作を行った際に発生するイベントです。ジェスチャーイベントを利用することで、ユーザーがタッチパネル上で行った拡大/縮小や回転といった操作を簡単に取得することができ、より直感的なユーザーインターフェイスの構築に役立ちます。

意外と簡単!JavaScriptでタッチイベントを取得しよう

スマートフォンやタブレットでは、マウスでなくタッチパネルで操作を行います。ユーザーが行ったタッチ操作は、JavaScriptでタッチイベントとして取得することができます。タッチイベントは一見難しそうに思えるかも知れませんが、基本的にはマウスイベントと似ているので、それほど違和感なく取り組むことができます。

EaselJSのMouseEventを理解しよう

EaselJSには、MouseEventを処理するonClick, onDoubleClick, onMouseOver, onMouseOut, onPress, onMouseMove, onMouseUpといったイベントハンドラが用意されています。記述に関してはActionScript2.0に似ていますが、デフォルトでonMouseOver, onMouseOutが使用できない点やonMouseMove, onMouseUpの扱いなど、若干注意すべき点があります。

CreateJSでキラキラと輝くTwinkle表現に挑戦

CreateJSを使って、HTML5のcanvasでキラキラと輝くTwinkle表現に挑戦してみました。EaselJSのGraphicsクラスに用意されたdrawPolyStar()メソッドを使って星形のShapeインスタンスを作り、なんちゃってGlowFilterでcanvas上のテキストをキラキラと輝かせてみます。

2 / 41234