これは筆者がWebGL製の３Ｄシューティングゲーム「ファンタスティック トリノワールド」を制作する過程で蓄積されたであろうコードや知識のまとめ作業をしてみる取り組みです。内容はゲームでの使用を前提としたサンプルプログラムと解説のコレクションです。
なお、読者には多少の３ＤＣＧのプログラミングの経験がある方を想定しています。WebGLでゲームまたはサイトを１つでも作った経験があれば問題なく読んでいただけると思います。
筆者：柏崎ワロタロ
./tips 以下に各ソースコードのフォルダがあります。フォルダを開くか、同フォルダの README.md のリンクからアクセスできます。使用言語はTypeScriptです。
ソースコードを先にご覧になる場合は、以下の２点のみ先にお読みください。
-
数値の型を明確にするためTypeScriptの機能でfloatなどを記述できるようにしています。また、Arrayの使用目的を明確にするために別名としてList、Dictionaryを定義しています。これらはconversion.tsに記述してあります。
-
基礎的な部分は１．基盤技術 編の「TypeScriptによる基本的なWebGLプログラミング」のページで説明し、他のページでは基礎部分の説明は省略しています。
各フォルダのREADME.mdにライブデモへのリンクがあります。またはGithub Pages からアクセスすることも可能です。
一部のプログラムはElectronやNode.jsの機能を使用してファイルの書き込みを行います。それらはライブデモではファイルへの出力のかわりにHTMLに出力するようになっています。
Visual Studio 2017 Communityは個人ならある程度まで無料で使用できます。インストーラがありますので簡単に導入できます。ただし対応ＯＳはWindowsのみとなります。
インストーラで「ASP.NET と Web開発」を選択すればASP.NETなどとともにTypeScriptの開発環境もインストールされます。
プロジェクトを開くにはptw_tips.slnをダブルクリックするか、Visual Studioから開きます。
全てのソースコードが一度にビルドできるTypeScriptプロジェクトが開きます。
Visual Studio 2015 Communityからダウンロード可能です。
インストーラでTypeScriptにチェックを入れてインストールしてください。
Atomを使うと、ほとんどのＯＳでTypeScriptの開発環境が簡単に構築できます。ただし筆者はがテストしているのはWindows環境のみです。
Atomをインストール後、メニューから
File -> Settings -> Install
と画面を進み、検索欄で
atom-typescript
で検索するとatom-typescriptがあるはずですので、それをInstallボタンでインストールします。数分ほど時間がかかります。画面の変化が少ないため不安になりますが待ちましょう。インストール完了後、念のためAtomを再起動するとTypeScriptが使用可能になります。
プロジェクトを開くには、メニューから
File -> Open Flolder
でtsconfig.jsonが入っているフォルダを開くと、プロジェクトを開いた状態になります。F6またはファイル保存でtsファイルがコンパイルされます。
プロジェクトを閉じるには、画面左のプロジェクトのツリーのルートにあたる項目でコンテキストメニュー（右クリック）から閉じることができます。
Electronを使うとGoogle Chromeとほとんど同じ実行環境が用意できます。node.jsの機能も使用可能です。 インストールするにはElectronのホームページからzipをダウンロードして解凍します。 この文章の作成時ではトップページ (http://electron.atom.io/)から
Release -> 1.4.2 -> electron-v1.4.2-win32-x64.zip
とリンクをたどるとダウンロード可能です。リンクがたくさんあるので迷いますが50MBくらいのサイズのファイルがそれです。
インストールはzipを解凍すれば完了です。
基本はコマンドラインから実行ですが、Windowsの場合ショートカットを作っておくと便利です。package.json が含まれるフォルダを指定するとプログラムを実行できます。
MacやLinuxの場合については、環境がないため試せていません。おそらく同じようなことが可能に違いないと信じて進めております。
筆者はApacheでローカルにWebサーバを立てています。Electronで実行できますので必須ではありませんが、ネット上での公開に近い環境でテストするためにおすすめします。
解説サイトが既に多数ありますのでApache等についてはここでは説明しません。
なお推奨ブラウザはGoogle Chromeです。