Skip to content

イカすスマホUIが作り放題! widget.enchant.js超入門

先日リリースされたwidget.enchant.js、もう試してみたかな?
けっこう盛りだくさんなライブラリなので、どこから手をつけていいのか四苦八苦してるご同輩も少なくないと思う。

そこでとりあえずwidget.enchant.jsを使ってみるにはどうすればいいのか、そして見た目をカッコ良くカスタマイズするにはどうすればいいのか、その方法を調べてみたりしたぞ。

こんかい作ったのはコレ↓

code.9leapですぐ試すことが出来るぞ。
code.9leapでのサンプルコードはこちら

まず、widget.enchant.jsとは何か?

長いので以後wejと呼ぶことにする。
wejはゲームが簡単につくれるenchant.jsで、同じくらい簡単にゲーム以外のアプリも作れるようにしよう、という目的のライブラリだ。

目的そのものはjQueryなどに近いが、どちらかというとスマートフォン寄りな、最近流行りの「モバイル・ファースト」な設計になっている。そのせいかPC向けのアプリで使うにはちと制約が多く感じるかも知れない。

目下のところ、出来立てほやほやの状態なのだ。

wejでは、コンファームやプロンプトなどのモーダルダイアログと、iOSネイティブのようなリストビューが用意されているのが大きな特徴だ。

wejは使い方によってはゲーム内のUIとしても便利に使えるはずだぞ!

まず見た目を変えたい、ということでダイアログの見た目を変えてみることにする。
ダイアログの見た目はdialog.pngで決まっている。これをカスタマイズするわけだが、enchant.jsには秘密があるのだ。

実はwejはAndroidなどで使われている「9-Patch(ナインパッチ)」という方式をサポートしている。ナインパッチを使うことで、サイズが変更されてもデザインが崩れないようにできるのだ。
四角形の周囲を透明なピクセルで覆い、サイズによって伸ばしたい部分を黒く塗りつぶすのだ。

うまく使うと四方が丸いダイアログや、グラデーションの掛かったものを作ることが出来るぞ。
ここでは、ダイアログはオレンジの周囲に白いラインを入れて見た。

確認ダイアログを表示するには、ConfirmSceneを作ってpushするだけ

	enchant.widget._env.dialogHeight = 120;
        var confirmScene = new ConfirmScene('This is sample code', 'yes', 'no'); // コンファームシーンを作成
        game.pushScene(confirmScene);

ここで新たにv0.5.0から導入された環境変数を使っているぞ。
環境変数enchant.widget._env.dialogHeightは、ダイアログのデフォルトの高さを決めることができる。
作ったconfirmSceneをgame.pushSceneでプッシュすれば、ダイアログの出来上がりだ。
実にenchant.jsらしい確認ダイアログでしょ?

同じ要領で、アラートやプロンプトも表示することが出来る。

ナビゲーションバーも同じようにグラデーションを掛けることが出来るぞ

これを表示するには以下のようなコードを書くのだ!

    	var navLabel = new Label("NavigationBar");
    	navLabel.color="#ffffff";
    	navLabel.textAlign="center";
        var navigationBar = new NavigationBar(navLabel); // ナビゲーションバーを作成
        game.rootScene.addChild(navigationBar);

ナビゲーションバーのコンストラクタには、テキストかLabelオブジェクトを指定できる。これが表示されるというワケ。
フォントのサイズや色を制御したいときはLabelオブジェクトを渡すのが正解だ。
ここではラベルの色を背景とマッチするように城にしている。

さて、wejの基本機能であり最も重要なUIであるリストビューは、iOSに倣って非常に高度なことが出来る自由度を備えている。

そのパワフルさは、いきなりドラッグ&ドロップ可能なリストを作れることでも理解頂けるだろう。
そもそも、wejを開発することになった動機は、既存のスマートフォン向けフレームワークではドラッグ可能なリストビューが手に入らなかったからだ。

wejではパラメータをtrueにするだけでドラッグ可能なリストボックスを作ることが出来るぞ。

リストビューにはリストアイテムを追加していくことでリストを作って行く。
リスト自体のスクロールはiOSと同じく、フリックで行うのだ。

リストアイテムを長押しすると要素をドラッグして順番を変えることもできるぞ。

リストビューを使うサンプルコードは次のような感じだ。

       /*
        * new ListView(width, height, draggable)
        * ListView オブジェクトを作成する。
        * 横幅、縦幅、項目をドラッグ可能かを設定する。
        */
        var listView = new ListView(320, 320 - navigationBar.height, true); // リストビューを作成
        listView.y = navigationBar.height;

        // 項目を20個作成する
        for (var i = 0; i < 20; i++) {
	   var bear = new Sprite(32,32); //クマをアイコンとして使う
	    bear.image = game.assets['chara1.png'];
 	    bear.frame=i;
            var item = new ListItem(320, 48,"frame:"+i,bear); // リストアイテムを作成
            item.ontap = function(){ //項目がタップされたとき
                        this.icon.tl.moveBy(100,0,30,enchant.Easing.QUINT_EASEOUT);
            listView.addChild(item); // リストビューに項目を追加
        }
        game.rootScene.addChild(listView);

リストアイテムのコンストラクタは次のようになっている。

    /**
     * List elements.
     * Icons and leftmost buttons can be set.
     * Use {@link enchant.widget.ListItemVertical} to set items lined up vertically.
     * @param {Number} width Element width.
     * @param {Number} height Element height.
     * @param {*} [content] ListItem content.
     * @param {enchant.Sprite|enchant.Surface} [icon] ListItem icon.
     * @param {enchant.Sprite|enchant.Surface} [icon] ListItem right side icon.
     * @see enchant.widget.ListItemVertical
     * @constructs
     * @extends enchant.widget.ListElement
     */
    initialize: function(width, height, content, icon, rightIcon) {

つまり、幅、高さ、内容(テキストまたはラベル)、アイコン、右アイコン、の順。
アイコンは指定しなくてもいいが、指定する場合はSpriteかSurfaceを指定することになる。

Spriteを指定するのが便利なので、ここではクマのアイコンを指定している。

それぞれのアイテムがタップされた場合は、「tap」というイベントが取得できる。
item.ontapにtapイベントのリスナーを追加すると(0.5.0からaddEventListenerよりもonenterframeやontouchendなどを使うスタイルが推奨されるようになった)、タップされたときの動作を指定できるというわけだ。

ここではアイコンのtlを使って簡単なアニメーションをさせているが、ここで別のシーンをpushしたりすることももちろん可能だ。

たとえば

	        item.ontap=function(){
		        var scene = new Alert('OMG! Frame is '+this.icon.frame); 
        		game.pushScene(scene);
	        };

こうするとタップした場所のフレーム番号をアラート表示する。

さらに面白いのは、トランジションがサポートされていること。
トランジションとは、スムーズな場面転換を意味する。

シーンとシーンのつなぎを、スムーズなアニメーションでつないでくれるのだ。
シーンをトランジションさせたい場合は、transitionPushとtransitionPopを使う。

まず、トランジションさせたいシーンを先に作ろう。
bigBearSceneという大きなクマが画面の真ん中にでてくるシーンを作る。

		//巨大なクマだけがでてくるシーン
		bigBearScene = new Scene();
		var bigBear = new Sprite(32,32);
		bigBear.image = game.assets['chara1.png'];
		bigBear.frame=0;
		bigBear.scaleX=4;
		bigBear.scaleY=4;
		bigBear.x=150;
		bigBear.y=150;
		bigBear.ontouchend=function(){
			game.transitionPop();
		}
		bigBearScene.addChild(bigBear);

次に、リストアイテムがタップされたら、そのフレームが大きなクマに反映されるようにして、transitionPushすることにしよう。

	        item.ontap=function(){
				this.content="touched";
				this.icon.tl.moveBy(100,0,30,enchant.Easing.QUINT_EASEOUT);
				bigBear.frame=item.icon.frame; //bigBearのフレームをタップしたアイテムと同じに
				game.transitionPush(bigBearScene); //プッシュする
	        }

するとずりずりとしたアニメーションでシーンが切り替わるのが解るはずだ。
今現在のところトランジションのアニメーションは固定だが、将来的には他のアニメーションを追加したり、自分でカスタマイズしたりできるようになるだろう。

他にもいままでenchant.jsになかった入力系の機能など、widget.enchant.jsにはまだまだ沢山の機能が入っているのだけど、ひとまず「超入門」としてはここでおしまい。

自分なりの使い方を見つけたり「もっとこういう機能が欲しい」という要望があれば、どんどん#enchant.jsタグで呟やいて欲しい!

ではまた!

このエントリーをはてなブックマークに追加
はてなブックマーク - イカすスマホUIが作り放題! widget.enchant.js超入門
Post to Google Buzz
Share on GREE

Related posts:

  1. enchant.js v0.5.0がついにリリース! Canvas強化とwidget追加でゲーム以外のアプリもお任せ!?
  2. 続・Ruby×enchant.jsへの挑戦 / イベントドリブンモデルの実現
  3. Ruby on enchant.js : Groupクラスの追加
  4. enchant.js がネットゲーム開発に対応!「socket.enchant.js」β版リリース
  5. Ruby on enchant.js / RubyでHTML5ゲームを作ってみる

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*