2012年12月2日日曜日

gl.enchant.jsのTipsを2つほど

こんにちは。daishiです。

今日はenchant.js Advent Calendar 2012の1発目ってことで書いていきます。
(1日遅刻してしまいました。スミマセン)

では、私がここ数ヶ月のあいだに作ったgl.enchant.js関係のTipsについて紹介していきましょう。

DoGenchaのモデルデータをJSONPで読み込む


私の自作サービス「DoGencha」に投稿されているデータは、JSONPを使ってゲーム内に読み込むことができます。
やり方は、

  1. dogencha.enchant.jsをインポートしておく
  2. game.preload()関数でJSONPのURLをロードする
  3. game.assetsからデータを取り出して使用する
以上の3ステップだけです。簡単!

それでは具体的にやってみましょう。
まず、dogencha.enchant.jsですが、「http://static.dev7.jp/dogencha.enchant.js」に置いてあります。
これを<script>タグの中で指定してインポートします。
<script src="http://static.dev7.jp/dogencha.enchant.js"></script>
次に使いたいモデルデータを http://doga.dev7.jp/models から探して「JSONP URL」をコピーします。


コピーしたURLを、game.preloadを使ってロードします。
書き方は画像や音声素材を読み込むのと同じです。
game.preload("http://doga.dev7.jp/jsonp/daishi_hmr/robo/robo4.l3p.jsonp");
画像素材などと同じ。game.asset配列にSprite3Dオブジェクトとして格納されているので、取り出してSceneなどにaddChildします。
var robot = game.assets["http://doga.dev7.jp/jsonp/daishi_hmr/robo/robo4.l3p.jsonp"];
scene.addChild(robot);


これだけでだいたいOK。
DoGenchaに投稿されているモデルデータをゲームに登場させることができます。


タイムラインアニメーションをSprite3Dでも使えるようにする


v0.6からenchant.js本体に統合されたtl.enchant.js。
タイムラインアニメーションは非常に便利なのですが、Sprite3Dには対応していないのでそのままでは使えません。
そこでこういうものを作ってみました。

https://raw.github.com/daishihmr/enchant.js/feature/extension.gl.enchant.js/dev/plugins/extension.gl.enchant.js

これをインポートすると、Sprite3Dにもtlプロパティが追加され、Tweenが設定できるようになります。
<script src="extension.gl.enchant.js"></script>
robot.tl.moveTo(1.0, 1.5, -2.0, 60, enchant.Easing.BOUNCE_EASEOUT);
当然、3次元なので移動・拡大系(moveTo, moveBy, scaleXYZTo, scaleXYZBy)はパラメータの数が1個増え、Z軸について指定する必要があります。
また回転系(rotateTo, rotateBy)は回転量をクォータニオンで指定します。


↑赤い箱をクリックしてみて下さい。タイムラインアニメーションで動きます。

おわりに


そんなわけで、gl.enchant.jsに関する2つのTipsでした。
実際に動作するサンプルコードは http://static.dev7.jp/test/advcal2012.zip に上げておきます。
ぜひソースを読んでみてください。

次回はnaotaroさん、よろしくお願いします。m(_ _)m







2012年10月24日水曜日

WindowsXPでGitListが動いたよ

環境

Apache 2.2.17

PHP 5.3.9

Git 1.7.11-preview20120710

GitList 0.3


手順

1. apacheのhttpd.confを開き、

    LoadModule rewrite_module modules/mod_rewrite.so

の行をコメントインする


2. gitlist-0.3.tar.gzを解凍してhtdocsの下に移動


3. config.iniを以下のように修正


    [git]
    client = 'D:\~~\git\bin\git.exe' ; git.exeの場所
    repositories = 'D:\temp\repo' ; gitリポジトリを置く場所

4. gitlist\vendor\klaussilveira\gitter\lib\Gitter 以下のphpコードから

    "--pretty=format:'~~~'"

となってる箇所を見つけ出し、

    "--pretty=format:\"~~~\""

に修正

5. php.iniに以下の記述を追加

    date.timezone="Asia/Tokyo"

2012年9月22日土曜日

Camera3Dのchase使ってみた(gl.enchant.js)

「ボンバーさん」をリリースしたよ

1週間ほど前に9leapに新しいゲームを投稿しました。

9days challenge向けに作ってたのだけど、いろいろあって間に合わなかったので普通に投稿してます。

「ネオ・クラシック」がテーマってことだったので、最初は平安京エイリアンとかどうかなー、とか軽く考えてました。
とりあえず基本的なゲームルールだけ再現したのがこれ
これにアイテムとか追加要素を継ぎ足したら面白くなるかなと思ってたのですが、いまいちピンと来なかったので、1から作り直すことにしました。
やはり何にしても3Dにした方がインパクトありますよね。

gl.enchant.jsをなるべくそのまま使おう

前作「ブレイブースト」ではシェーダーやら多関節やらアルファブレンディングやら、ノーマルのgl.enchant.jsを独自に拡張して利用しましたが、今回は出来るだけそのままの形で使ってみました(Sprite3Dのvisible属性など、若干独自拡張している部分もありますが)。

カメラで追え!

今回新たに使ってみたgl.enchant.jsのAPIに、Camera3Dクラスのchase()メソッドがあります。
chase(sprite, position, speed)
カメラの位置をSprite3Dに近づける.
公式ドキュメントにはこのように書かれています。
これがなかなか便利で、単純にカメラを移動させるだけではなく、緩急のついた動きをしてくれます。これでゲームをやると非常に「それっぽく」なるんですねー。



簡単に使えて便利なんですが、使い方のコツを掴むまでは少々理解しにくい挙動をします。
まず第1引数のsprite。これはまあわかりますね。カメラを近づける対象のオブジェクトです。
次の第2引数position。こいつがちょっと曲者。ここには数値を渡すのですが、これは「オブジェクトが向いている方向を軸とした座標」を表します。
chase(追いかける)の名のとおり、カメラはオブジェクトの背後(または前方)に位置するように移動するのですが、その地点がオブジェクトからどれだけ離れた位置なのかをpositionで指定するわけです。(オブジェクト進行方向を正とする数値で指定します)
そして第3引数speed。文字通りカメラの動くスピードです。この数値は大きければ大きいほどカメラの動くがゆっくりになります。
このメソッドはtl.enchant.js系のメソッドのように一度呼び出せばその後数フレームをかけてカメラの移動を行ったりはしません。どうするのかというと、以下のようにします。
game.addEventListener("enterframe", function() {
    camera.lookAt(target);
    camera.chase(target, -3, 20);
});
このように毎フレーム呼び出してやるわけですね。そうすると呼び出しのたびに少しずつカメラが移動していきます。

ただし、先ほど書いたように、これを使うとオブジェクトの真後ろをめがけてカメラが移動します。
大抵の場合、カメラをオブジェクトの真後ろに置いてしまうと視界がオブジェクト自体によって遮られてしまいます。
ジャマだよ!

これだとゲームのプレイに支障をきたすかもしれません。
そこで、chase()メソッド呼び出し後にカメラ位置をすこし調整します。

game.addEventListener("enterframe", function() {
    camera.lookAt(target);
    camera.chase(target, -3, 20);
    camera.y = target.y + 1; // 追加
});
カメラをちょっとだけ上にあげてみました。これでどうでしょう。
いいかも?
おお、ちょっと見通しが良くなったかもしれません。
chase()メソッドを使いたいけどカメラ位置の微調整もしたい、という場合はこの方法を使うといいでしょう。

ソースも公開してるよー

9leapからソースコードを落とせるようにしてあります。
興味のある方は読んでみてください。
全部で500行チョイです。

2012年7月15日日曜日

ハッカソン

拙作「ブレイブースト」がめでたくウィークリーランキング1位から転落したことでもあり、そろそろ正式版リリースに向けて本格的に動いて行こうと思います。

とはいえ、普段は仕事もあるのでなかなかまとまった時間が取れない現実。
ここはこの3連休を利用して一気に作業を進めたいところです。

そこで、聖地アキバのネカフェで徹夜プログラミングと洒落込むことになりました。

とりあえず電源の確保できるマクドナルド秋葉原駅前店で閉店までがんばり、それからアイカフェに移動して朝までバリバリやろうと思います。

目標はステージ3のボス撃破まで。
そこまで作ればリリース予定の7月30日までの時間を、演出の強化や難易度の調整に費やすことが出来ます。

がんばんぞー


2012年5月20日日曜日

OpenLeap投稿予定作品の予告ムービー作った




iMovieって便利だなあ!
まさかこんなに簡単に動画が作れるとは思わなかったよ

2012年4月28日土曜日

enchant.jsで爆発を生成

開発中のゲームのために作った。

原理的には、半透明なトゲトゲ玉を多数、徐々に拡大させつつ、放射状に移動させつつ、徐々に暗くしていってる。

単純だけどけっこういい感じですな。



2012年4月26日木曜日

enchant.jsゲームのmavenアーキタイプ

普段Mavenを使ってるJavaラーがenchant.jsでゲームを作る時に便利なアーキタイプを作ったよ。

collada.gl.enchant.jsなどの一部のプラグインは、動作させるためにWebサーバー上にリソースを配置しておく必要があるんだけど、ふだんPHPとかを書かない畑の人は自分の開発マシンにApacheとかが都合よく入ってないこともある。

そんな時にこのアーキタイプを使うとわりと楽勝で開発を始められるかもしれない。

  1. 以下のコマンドでプロジェクトを作成
    mvn archetype:generate \
      -DarchetypeGroupId=jp.dev7 \
      -DarchetypeArtifactId=enchant-game-archetype \
      -DarchetypeVersion=0.4.4 \
      -DarchetypeRepository=http://maven.dev7-enchant-doga.googlecode.com/hg
    
  2. Webサーバー起動
    mvn exec:java -Dexec.mainClass={package}.Main
    
  3. src/resources/web 以下に入ってるhtmlやjsファイルを編集してゲームを作る

JavaSE6以上が必要ですよ~。

2012年4月24日火曜日

WebGLでシェーダーをうまく使う練習

gl.enchant.jsでそのうちカスタムシェーダーが使えるようになるということを某所で聞いたので練習。

シェーダーの中でクォータニオンを計算してみた。

jsdo.itにソース上げた。


パーリンノイズ作ったりとか出来そうだね。

2012年4月23日月曜日

enchant.js meetup! 東京 vol.2でLTしてきた

昨日(2012.04.21)、enchant.js meetup! 東京 vol.2でLT発表してきました。

[スライド]

発表内容はDoGA CGA Systemを使ってgl.enchant.js用のモデルを簡単に作ろう! というもの。
もちろんDoGAのデータファイルがそのままgl.enchant.jsで使えるわけはないので、DoGAデータ→JSON変換用のWebサービス(doga.dev7.jp)と、その読み込み用のプラグイン(doga.gl.enchant.dev7.js)を作りました。
まだまだアルファ版程度の完成度なので、使ってみようという方は用心してください。

変換エンジン自体はJavaで開発してます。
GitHubで公開してるんでよかったらForkしてください。


イベント後の懇親会にも参加させてもらいました。
gl.enchant.jsの開発者である高橋さんをはじめ、いろんな方とお話ができて嬉しかったです。

enchant.jsで3Dゲーム作りが流行るといいですね。


2012年4月5日木曜日

sbtの依存ライブラリをsnapshotリポジトリから取得する方法

毎回ダウンロードしたい場合はこうするようだ。
libraryDependencies += "jp.dev7" % "dev7-l3c-converter" % "4.3-SNAPSHOT" changing()
changing() をつけるといいらしい。

2012年3月14日水曜日

テスト投稿

ブログ始めてみた。

Google Code Prettifyを入れてみた。便利。

package app;

import java.awt.Desktop;
import java.awt.FlowLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.net.URI;

import javax.swing.JButton;
import javax.swing.JFrame;

import org.eclipse.jetty.server.Server;
import org.eclipse.jetty.server.handler.HandlerList;
import org.eclipse.jetty.server.handler.ResourceHandler;

public class Main implements ActionListener {

 public static void main(String[] args) throws Exception {
  
  new Main().start();
  
 }

 private Server server;
 
 public void start() throws Exception {
  
  HandlerList handlerList = new HandlerList();
  
  ResourceHandler resourceHandler = new ResourceHandler();
  resourceHandler.setResourceBase(getClass().getResource("/web").toExternalForm());
  
  handlerList.addHandler(resourceHandler);
  
  server = new Server(12345);
  server.setHandler(handlerList);
  server.start();
  
  JFrame frame = new JFrame("ローカルWebサンプル");
  frame.setSize(200,100);
  frame.setLayout(new FlowLayout());
  JButton button = new JButton("終了");
  frame.add(button);
  button.addActionListener(this);
  frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  frame.setVisible(true);
  
  Desktop.getDesktop().browse(new URI("http://localhost:12345"));
 }

 public void actionPerformed(ActionEvent e) {
  try {
   server.stop();
  } catch (Exception e1) {
   e1.printStackTrace();
  }
  System.exit(0);
 }
}

続きはまた明日。