gl.enchant.js 入門 – Step00 gl.enchant.js のひな形を準備しよう!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

gl.enchant.js 入門 – ざっくりと作る流れをまとめてみました!!』の Step00 です.

gl.enchant.js のひな形を準備しましょう. gl.enchant.js 関連のスクリプトの読み込みと Game クラスのセットアップを行っています.

SAMPLE

今回制作するサンプルはこちら.

Game クラスを走らせているだけなので真っ黒な画面が表示されていれば ok です!!

CODE

今回作ったサンプル全体のコードです.

<!DOCTYPE html>

<html>
    
    <head>
        <meta charset="UTF-8">
        <title>gl.enchant.js Guide - Step00 gl.enchant.js のひな形を準備しよう!</title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
        </style>
        <script type="text/javascript" src="../js/gl.enchant.js/glMatrix-0.9.5.min.js"></script>
        <script type="text/javascript" src="../js/gl.enchant.js/enchant.js"></script>
        <script type="text/javascript" src="../js/gl.enchant.js/gl.enchant.js"></script>
        <script type="text/javascript" src="../js/gl.enchant.js/primitive.gl.enchant.js"></script>
        <script>
            // おまじない
            enchant();
            
            window.onload = function() {
                var game = new Game(640, 640);
                
                game.onload = function() {
                    // 3D 用シーン生成
                    var scene = new Scene3D();
                };
                
                game.start();
            };
        </script>
    </head>
    <body>
        <h1>gl.enchant.js Guide - Step00 gl.enchant.js のひな形を準備しよう!</h1>
    </body>
</html>

TIPS

glMatrix.js とは?

glMatrix.js とは, WebGL 用に行列を扱うために作られた JavaScript のライブラリです.

名前の通り行列を扱う処理はもちろんのこと, ベクトルやクォータニオンもサポートしています. 非常に便利なのでよく WebGL のサンプルにはセットで配布していたりします.

gl.enchant.js でも内部で glMatrix.js 内の処理を使用しているので必ず読み込んでください.

公式プロジェクトはこちら. Google Code で管理してたと思っていたのですが, 最近 Github に移ったみたいです.

enchant.js とは?

enchant.js はこのサイトでもお世話になっている JavaScript で作られたゲームライブラリです.

このページを見ている時点で知らない方はいないと思いますが...

enchant.js についての詳しい解説はこちら.

gl.encahnt.js とは?

enchant.js で WebGL を使えるようする拡張プラグインです. 今回のエントリーのメインとなるスクリプトです.

primitive.gl.enchant.js とは

primitive.gl.enchant.js とは, gl.enchant.js 上ですぐに表示できるプリミティブが定義されたプラグインです.

現状サポートしているのは

  • 平面(Plane) - ただの平面です.地面や壁の代用に使います.
  • ビルボード平面(Billboard) - 常にカメラの方を向く平面です. 3Dインターフェースやエフェクトなんかによく使います.
  • キューブ(Cube) - プレイヤーや敵の代替としてとりあえずこれを表示したりします.
  • スフィア(Sphere) - キューブ同様, プレイヤーや敵の代替としてとりあえずこれを表示したりします.

の4種類です.

これらを使えば, 3Dモデルデータをすぐに用意できない方でもすぐに作り始められます.

gl.enchant.js をセットアップしよう

基本的に enchant.js と同じですが, Scene3D という webgl 用のシーンを生成しています.

// 3D 用シーン生成
var scene = new Scene3D();

また, enchant.js の頃は Game クラスの生成時に渡すスクリーンの幅と高さを (320, 320) としていましたが 3D 表現だとどうしてもジャギるのでスクリーンのサイズを (640, 640) にしています.

var game = new Game(640, 640);

次回はライトの設定です.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT