three.js/WebGLによる3Dプログラミング

three.js/WebGLを使って3Dゲームを作る計画を立てていて、あれこれと実験中。

上のスクリーンショットは、解像度320x240で、CSSによって２倍サイズ表示しているところ。three.jsによって、ライティングやシャドウを実現している。同時に、Physi.jsというammo.jsをベースにしたthree.js向けの物理エンジンによる物理演算も行なっている。これのせいか、少し古いPCでは動作がカクカクしてしまう。

こちらは、PlaneGeometryの各頂点の高さをランダムに変えて、でこぼこにしたところにフリー素材の草のテクスチャを貼りつけたところ。テクスチャの張り具合がアレなので、ここにもしキャラクターを置いたりしたら、巨大な草になってしまう感じだったので、あれこれ調整して草が大きくならないように頑張ってみた。

結果、テクスチャのRepeatを4x4にすることで、うまい具合の草の大きさになったかも。

そしてここに、プレイヤーキャラクターに見立てた直方体を置いて、WASD操作もしくはカーソルキー操作によって奥手前左右に動けるようにしてみて、背後からカメラで追いかけてみたところ。うまく地面に乗るようにする高さ調整を、キャラクター位置から地面に向かってRayを飛ばして衝突したポリゴンの衝突点のY座標で割り出して見てるんだけど、どうもうまくいかなくて、めり込んだり空中を飛んだりする。なんとかしたいところ。

ゲームシステムパターン

ゲームシステムパターン。

• ステージ
• 一方向型
• 自由選択型
• 階層型
• アイテム
• スキル
• 合成：アイテムやスキルの合成
• 収集：アイテムなどのコレクション要素
• プレイヤー
• 移動（４方向、８方向、サイドビュー左右方向＋ジャンプ）
• 敵キャラクター
• ミス／ゲームオーバー：ペナルティ
• 体力：このパラメータが無くなると大抵ミスという扱い
• 攻撃
• 打撃
• 射的
• 防御／回避
• 会話：専用ウィンドウ内で文が表示される
• 立ち絵：会話主の提示として表示される
• パズル盤面
• メニュー
• 各種パラメータの確認
• アイテム／スキルの使用
• 設定、セーブ
• 情報の表示
• 各種パラメータの確認
• 地図

ゲームにおける品質

ゲームにおける品質。

• コンセプト
• 意図が明確
• 「売り」が意図に基づいて選択されている
• ターゲティング（ターゲットに合わせた…）
• 雰囲気の調和
• 世界設定
• レベルデザイン
• ターゲットが意図に基づいて選択されている
• ユーザビリティ
• 操作がわかりやすい
• ゲーム世界の情報を理解しやすい
• ゲームプレイの目的が明白
• 「驚き最小の原則」
• ユーザー・エクスペリエンス
• 心地良い操作
• 「美しい」反応
• リソースの品質
• 絵・音楽・物語の品質（リソースの品質の評価軸はターゲットに依存する）
• ソフトウェアの品質
• 停止しない
• バグが無い
• 処理落ちしない
• リソースの読み込みに時間がかからない

創作活動における障壁

創作活動における障壁。

• 作業開始に手間がかかる
• 作業の手順を知らない
• 作る意図を[見つけていない|決めていない]
• 作る内容が決まっていない
• 作る内容を認めることができない
• 品質を保つ方法を知らない

以下は、作ること自体ではなく、その作ったものを他人に見せる、発表する、売り込むという面で見たときの障壁。

• 見せる、発表する、売り込む場を知らない
• 作ったものを知ってもらう機会を増やす方法を知らない
• 作ったものの魅力を伝える方法を知らない