ブラウザで遊べる・動かせる。「p戦略Simu」と「3D モデリング」を公開しました
今日はお知らせが 2 つあります。ブラウザで遊べる無料のウォーシミュレーション「p戦略Simu」と、Blender で組み立てた 3D モデルをブラウザで動かせる「3D モデリング」のページです。どちらもインストールは要りません。画面をたっぷりお見せしながら紹介します。
- p戦略Simu：ブラウザで遊べる、無料のターン制ウォーシミュレーション
- 3D モデリング：Blender で組み立てた 3D モデルを、ブラウザで動かして見られるページ。第 1 弾は攻撃ヘリ AH-64E アパッチ
どちらもページを開くだけで、インストールは要りません。パソコンでもスマホでも動きます。前半で p戦略Simu、後半で 3D モデリングを、画面をたくさん使って紹介します。
p戦略Simu：27 種のユニットで CPU と戦う
p戦略Simu は、マス目の地図の上でユニットを動かして戦う、ターン制のウォーシミュレーションです。あなたは赤軍、CPU は青軍。赤軍が動いて、青軍が動いて、それで 1 日が終わります。
勝ち方は 2 つ。敵の首都を占領するか、敵のユニットを全滅させるかです。工場・空港・港でユニットを作り、都市を占領して資金を増やしながら、じわじわと前線を押し上げていきます。
マップは 7 面。入門から大海戦まで
マップは、入門用の「はじまりの平原」から、海と島ばかりの「大洋の覇権」まで 7 面あります。どのマップも赤軍と青軍が点対称になるように作ってあるので、有利・不利はありません。
| マップ | 大きさ | 初期資金 |
|---|---|---|
| はじまりの平原（入門） | 15×10 | 3000G |
| 大河の戦い | 20×14 | 5000G |
| 山岳の要塞 | 24×16 | 5000G |
| 島々の海峡 | 20×14 | 5000G |
| 市街地の決戦 | 22×14 | 4000G |
| 湾岸の攻防 | 24×16 | 5000G |
| 大洋の覇権 | 26×16 | 6000G |
ユニットを選ぶと、行ける場所と相性が出る
自軍のユニットを選ぶと、移動できるマスが青く光ります。移動先にカーソルを合わせると、通る道が矢印で出ます。
移動したあとは、攻撃・占領・補給・乗る・降ろす・潜航・浮上・待機から行動を選びます。攻撃先を選ぶと、与えるダメージと反撃の予測も出るので、「殴りに行ったら返り討ち」を避けられます。
工場・空港・港でユニットを作る
工場では陸のユニット、空港では航空機、港では艦船を作れます。資金は毎ターン、持っている拠点 1 つにつき 1000G 入ります。都市を占領するほどお金が増えるので、序盤は歩兵で都市を取りに行くのが定石です（占領できるのは歩兵とバズーカ兵だけ）。
| 区分 | おもなユニット |
|---|---|
| 陸（工場）15 種 | 歩兵 1000G・バズーカ兵・偵察車・軽戦車 7000G・主力戦車・重戦車 16000G・自走砲・ロケット砲・巡航ミサイル車・対空戦車・補給車・装甲兵員輸送車 ほか |
| 空（空港）6 種 | 攻撃ヘリ 9000G・対戦車ヘリ・輸送ヘリ・戦闘機 20000G・攻撃機・爆撃機 22000G |
| 海（港）6 種 | 駆逐艦 10000G・巡洋艦・戦艦 28000G・潜水艦・輸送艦・空母 30000G |
航空機は毎ターン燃料を使い、0 になると墜落します。潜った潜水艦は駆逐艦・巡洋艦・潜水艦からしか攻撃されません。自走砲やロケット砲のような遠くから撃つユニットは、動いたターンには撃てません。
攻撃するとカットインが入る
攻撃すると、左に攻撃側、右に防御側の絵が帯になって出て、撃ち合いの演出が入ります。発射の炎、着弾、爆発も 1 コマずつドット絵で描いています。
自分の手番ごとに盤面は自動で保存されるので、途中でブラウザを閉じても、タイトルの「続きから」で再開できます。勝敗は戦績としてタイトルに出ます。
絵柄は 3 案から選んだ
ユニットの絵は、最初に歩兵とバズーカ兵を 3 つの画風で描き比べて決めました。
選んだのは、いちばん重厚な案A。戦車や戦艦が並んだときに「強そう」に見えることを優先しました。司令官も、赤軍と青軍で 1 人ずつ、表情を 3 つずつ用意しています。
ゲームエンジンなしで作った
P麻雀と ZAGBIS は Godot で作っていますが、p戦略Simu はゲームエンジンを使わず、TypeScript とブラウザの Canvas（絵を描く機能）と Web Audio（音を鳴らす機能）だけで作りました。地図や地形はコードで描き、BGM 6 曲もコードで作曲・合成したチップチューンです。効果音は CC0（自由に使える）素材と、コードで合成した音を組み合わせています。
作り方はいつもと同じで、ぱにかるが仕様を決めて遊んで確かめ、Claude Code が設計と実装、テストを担当しました。キャラクターやユニットの絵は画像生成で作っています。CPU どうしを何度も対戦させて、勝率を集計する仕組みも用意してあります。
3D モデリング：AH-64E アパッチを、ブラウザで飛ばす
もう 1 つのお知らせは、新しいコーナー「3D モデリング」です。Blender（3D ソフト）で組み立てたモデルを、ブラウザでそのまま回したり、拡大したり、動かしたりできます。
第 1 弾は、米陸軍の攻撃ヘリ AH-64E アパッチ・ガーディアン。眺めるだけでなく、エンジンをかけて離陸し、操縦して飛び回れます。
形は整備マニュアルの寸法から
形は目分量ではなく、米陸軍の整備マニュアルの図面（機体の位置を表すステーション図）と、メーカーの公表値から決めました。図面の PDF を大きな画像にして、線の位置を読み取って寸法に換算しています。分からなかった値は「推定」と書いて残しました。
Blender は手で操作せず、Python のプログラムで部品を 1 つずつ組み立てています。胴体、エンジン、ローター、武装、脚、機首のセンサー、注意書き……と担当のファイルを分け、組み立てたあとは主ローターの半径やレドームの高さなど 8 項目を自動で測って、寸法どおりかを確かめます。
最初の版はこんな姿でした。胴体だけで、ローターも脚も武装もありません。
色や質感の目標には、画像生成で作った「写真風の絵」を使いました。ただし生成画像は縦横の比率が実機と合わない（胴体が 3 割ほど高い）ので、形には使っていません。あくまで見た目の目標です。
武装はフル装備で、翼の下にヘルファイアとロケット弾ポッド、機首の下に 30 mm 機関砲を付けています。機番や「NO STEP」などの注意書き約 85 か所は、陸軍の塗装とマーキングの規定の文言・字の高さ・位置に合わせて置きました。
ブラウザで見られるもの
ページでは、ボタンで 9 つの視点を切り替えられるほか、ドラッグで回転、ホイールで拡大できます。
汚れは「きれい・ふつう・ひどく汚れた」の 3 段階。ひどく汚れたにすると、排気の煤、泥はね、雨だれ、足場の塗装の剥げまで出てきます。
時間帯は昼・夕方・夜。夜は投光器や誘導路の青い灯、ヘリパッドの縁の灯、管制塔の灯台が点きます。
エンジンをかけて、離陸する
「エンジン始動」を押すと、約 3 秒で点火し、ローターが約 9 秒かけて回転数 100% まで上がります。回っているブレードは、回転数に合わせて残像の円盤に変わっていきます。
パソコンなら Space で上昇、W/S で前後、A/D で旋回。スマホでは画面の下に操作の棒が 2 本出ます。キーを離すと、その場でホバリングします。
計器は、ローターの回転数・高度・対地速度・昇降率・方位。飛行場から 6 km、地面から 1500 m まで飛べます。低く飛ぶと、吹き下ろしで砂ぼこりが舞います。音も録音ではなく、ブラウザの中でタービンやブレードの音を合成しています。
こんなところで苦労しました
- 窓が白く曇る：操縦席の窓が白く濁って中が見えませんでした。原因は、傾いた窓が曇り空を表と裏で 2 回映していたこと。映り込みを表の面だけにして解決しました。
- のっぺりした塗装：均一に塗ると粘土のように見えます。補修塗りのまだらと、細い継ぎ目の溝を入れたら、ぐっと本物らしくなりました。
- 泥が雪に見える：汚れを明るくしすぎると、塩や雪の粒のように見えてしまいます。下地より少し明るい程度に抑えました。
- 文字の大きさ：Blender の文字の大きさの指定は「字の高さ」ではなく、機番が規定より小さくなっていました。実際に測って直しています。
こちらも Claude Code と一緒に作りました。Claude Code が Blender を Python で動かして部品を組み立て、描画した画像を見ながら形を詰めていく、という進め方です。開くときに約 6 MB を読み込むので、スマホでは Wi-Fi をおすすめします。
おわりに
12 月 20 日の P麻雀・ZAGBIS の発売に向けた準備のかたわらで、「ブラウザでさっと触れるもの」を 2 つ形にしました。p戦略Simu はじっくり作戦を練る遊び相手に、3D モデリングは眺めるだけでも、飛ばして遊んでも楽しめると思います。
感想やリクエストは X（@panical） までどうぞ。