Ｇスカの適当に遊べ: 【第1回】メモ帳だけで作れる！？ブラウザで動く「マイクラ風」3Dゲーム制作ガイド（準備編）

あの「マイクラ」っぽいゲームを自分で作ってみよう！

皆さん、こんにちは！

世界中で大人気のサンドボックスゲーム「マインクラフト（Minecraft）」。

あの広大な3D世界を、実は「HTML」というウェブサイトを作る技術だけで再現できるって知っていましたか？

「プログラミングなんて難しそう…」

と思うかもしれませんが、大丈夫！

今回は特別なソフトは一切使いません。

パソコンに最初から入っている「メモ帳」だけで、マイクラ風の世界を爆誕させる方法を解説します！

準備するもの：たったこれだけ！

今回のゲームを作るのに高価な開発ソフトは不要です。

必要なのはこの2つだけ。

メモ帳（テキストエディタ）: Windowsなら「メモ帳」でOK。

ちなみに今回私はメモ帳と言っても「サクラエディタ」を使用します。

ダウンロード場所→ココ

ブラウザ: Google ChromeやMicrosoft Edgeなど、いつもネットを見ているソフト。

STEP1：魔法のファイルを作ろう

まずは、ゲームの「入れ物」を作るところからスタートです。

エクスプローラーで右クリックして、「新規作成」→「フォルダ」を選び、ゲーム用フォルダを作ります。

フォルダ名は何でもいいですが、ここでは分かりやすく my_craft にします。

次にそのフォルダを開き右クリックして、「新規作成」→「テキストドキュメント」を選びます。

ファイル名を決めます。

ファイル名は何でもいいですが、ここでは分かりやすく my_craft.html にします。

重要！

語尾の .txt を消して .html に書き換えてください（拡張子の変更）。

「拡張子を変更するとファイル使えなくなる可能性があります」と警告が出ますが、勇気を持って「はい」を押しましょう！

STEP2：世界を創り出す「コード」を書く

作成した my_craft.html を右クリックして「プログラムから開く」→「メモ帳」で開きます。

※htmlをブラウザで開く指定していない場合、ダブルクリックのあと何で開くか聞かれるので、テキストエディタを選んでしまっても構いません。

そこに以下の魔法の呪文（コード）をコピー＆ペーストしてください。

世界想像コード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>マイクラ風プロトタイプ</title>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-sky color="#87CEEB"></a-sky>

      <script>
        window.onload = () => {
          const scene = document.querySelector('a-scene');
          const range = 50; // 50x50の広さ
          const offset = range / 2;
          const colors = ['#4ca64c', '#8B4513', '#808080']; // 緑・茶・灰

          for (let x = 0; x < range; x++) {
            for (let z = 0; z < range; z++) {
              const block = document.createElement('a-box');
              const randomColor = colors[Math.floor(Math.random() * colors.length)];
              
              block.setAttribute('color', randomColor);
              // ブロックが歪まないように位置とサイズを調整
              block.setAttribute('position', `${x - offset} -0.5 ${z - offset}`);
              block.setAttribute('width', '1');
              block.setAttribute('height', '1');
              block.setAttribute('depth', '1');
              scene.appendChild(block);
            }
          }
        };
      </script>

      <a-entity position="0 1.6 0">
        <a-entity camera="fov: 50" look-controls></a-entity>
      </a-entity>
    </a-scene>
  </body>
</html>

STEP3：ブラウザにドロップして確認！

コードを貼り付けたら、メモ帳を「保存」して閉じます。

さあ、いよいよ運命の瞬間です！

保存した my_craft.html ファイルを、マウスで掴んでブラウザ（Chromeなど）の上にポイッとドロップしてみてください。

画面いっぱいに、ランダムな色で埋め尽くされた「50x50」のブロック平原が現れたら成功です！

おまけでマウスを動かすと視点も動くようにしてみました。

<a-entity camera="fov: 50" look-controls></a-entity>

というのが視点を動かすコードです。

フィールドの大きさを変えたい！

という場合、

const range = 50; // 50x50の広さ

というところの50を変更すれば変わります。

ブロックの色を変えたい！

以下の色コードを変更してみて下さい。

色は#の後の数字6桁を変更すると色が変えられます。

例えばこれ

#001122

00の位置は赤色、11の位置は緑色、22の位置は青色のカラーパレットになっています。

英数字は0～9となり、その後はA～F。ようするに16進数というやつです。

00は黒でFFは白。

カラーパレットはGoogle検索のを使うと楽かも？

ココをクリック→Googleカラーパレット

ブロックは↓このコードの場所を探して変えてください。

const colors = ['#4ca64c', '#8B4513', '#808080']; // 緑・茶・灰

次回予告：自分の足で歩いてみよう！

今のままでは、まだ景色を眺めることしかできません。

「これじゃあゲームじゃないよ！」と思ったそこのあなた、ご安心を。

次回の記事では、「プレイヤーが自由にフィールドを歩き回れるようにする機能」を追加していきます。

お楽しみに！

次回は14日予定！気になってくださった方はBloggerをフォローするか、Xをフォローするか…定期的に覗きに来てくださるといいかもしれません。

Ｇスカの適当に遊べ

2026年4月7日火曜日

【第1回】メモ帳だけで作れる！？ブラウザで動く「マイクラ風」3Dゲーム制作ガイド（準備編）

0 件のコメント:

コメントを投稿

不正行為を報告

応援メッセージ