スマホだけで簡単に始めるゲームの作り方｜初心者向け完全ガイド
スマートフォンの普及に伴い、多くのゲーム開発アプリが登場し、簡単にゲームを制作できるようになりました。
パソコンや専門的なソフトウェアがなくても、スマホ一台でゲーム制作が可能です。
本記事では、初心者向けに「スマホだけでゲームを作る方法」を詳しく解説します。
スマートフォンだけでゲームを作る方法｜概要
近年、スマートフォンゲームの進化は目覚ましく、誰でも手軽にゲームを楽しめるようになりました。
ゲームで遊ぶだけでなく、自分で作ってみたいと考える人も増えています。
ただ、ゲーム制作には高性能なパソコンや、ソフトウェアの環境構築、プログラミングなどの専門知識が必要で、敷居が高いと感じる人も多いでしょう。
しかし、スマートフォンゲームだけを使って簡単にゲームを作ることができるツールや方法が存在します。
こちらは、ゲーム開発未経験の筆者が、スマートフォンのみで制作したブロック崩しゲームのスクリーンショットです。
本記事では、ブロック崩しゲームの作り方を通じて、ゲーム制作の経験がない方でも、スマホ一台で簡単にゲームを作る方法を解説します。
スマートフォンだけでゲームを作るための準備
スマートフォンでゲームを制作するにあたって、事前に知っておいた方が良い知識を紹介します。
ゲームを作るために必要なもの
ブロック崩しゲームを作るにあたって、高性能なPCや、専門的なソフトウェアは必要ありません。
ゲームを制作するために、必要なものは以下の通りです。
スマートフォン
高性能なスマートフォンでなくとも。ブロック崩しゲームを作ることができます。
ただし、最新のOSがインストールされたスマートフォンが望ましいです。
Androidの場合は、Android 14以上が推奨されます。
iPhoneの場合は、iOS 17以上が推奨されます。
筆者がゲーム制作に使用したスマートフォンは、iPhone SE（第3世代）で、iOSバージョンは17.5.1です。
インターネット接続
ゲーム制作に必要なアプリケーションや、ツールをダウンロードするためには、インターネット接続が不可欠です。
App StoreやGoogle Playからダウンロードする際には、安定した接続が求められます。
キャリアのモバイルデータを使用せずに、接続の安定したWi-Fiを利用するのが望ましいです。
ゲーム制作アプリ
スマートフォンだけでゲームを作る方法には2つあります。
・ノーコードアプリを使用する方法プログラミングの知識が不要で、直感的な操作でゲーム作成が可能です。
・プログラミング言語とコードエディターを使用する方法
より高度なカスタマイズが可能ですが、プログラミングスキルが必要です。
どちらの方法も専用アプリがあるので、後ほど詳しく解説します。
ゲームデザイン
ゲームデザインとは、ゲームの内容や、ルールのデザインの工程を指します。
プレイヤーが楽しめるゲーム体験を作り上げるための基礎となる部分です。
ゲームジャンル
ゲームのジャンルを決めることは、デザインの方向性を定める上で重要です。
ジャンルによって、必要な要素やゲームプレイの仕組みが大きく異なります。
ゲームのジャンルとして、アクションゲームや、パズルゲーム、アドベンチャーゲームなどが代表的です。
今回、制作するブロック崩しゲームは、アクションパズルゲームの一種です。
ゲームの目的
ゲームの目的は、プレイヤーが達成すべき目標やミッションを定めるものです。
明確な目的があることで、プレイヤーはゲームに集中しやすくなります。
ブロック崩しゲームの主な目的は、ボールを操作して、画面上のすべてのブロックを壊すことです。
レベルデザイン
レベルデザインは、ゲームにおけるレベル（ステージ、マップ、ミッションなど）の作成に関するゲーム開発の工程です。
ゲームの難易度調整や、ステージ構成などがレベルデザインに含まれます。
ブロック崩しゲームのレベルデザインでは、初級レベルで単純なブロック配置とゆっくりとしたボール速度を設定します。
上級レベルでは、壊れにくいブロックを配置し、ボール速度を徐々に速くします。
スマートフォンでゲーム制作を始めるのにおすすめのアプリ
スマートフォンだけでゲーム制作を始めるのに、おすすめのアプリを紹介します。
アプリにはプログラミング言語を書かないノーコードアプリと、自分でプログラミング言語を書くコードエディターの二種類があります。
Springin｜ノーコードアプリ
Springin'は、子供から大人まで幅広い年齢層に向けた、直感的なゲーム制作アプリです。
プログラミングの知識がなくても、簡単にゲームを作ることができます。
直感的な操作
オブジェクトをドラッグ＆ドロップで配置し、簡単にゲームを作成できます。
スマホやタブレットのタッチスクリーンを活用し、操作が直感的で使いやすいです。
多彩なコンテンツ
簡単なアクションゲームやパズルゲームなど、様々なジャンルのゲームを作成できます。
ゲーム以外にも、絵本やアニメーションなど、さまざまなコンテンツを作成できます。
教育目的にも最適
初心者向けに順を追ったガイドやチュートリアルが用意されており、すぐにゲーム制作を始められます。
Springin'
Epic Game Maker: Sandbox Craft｜ノーコードアプリ
引用：https://apps.apple.com/jp/app/epic-game-maker-sandbox-craft/id1403717791
Epic Game Maker: Sandbox Craftは、スマートフォンで簡単にゲームを制作できるサンドボックス型のアプリです。
プログラミングの知識がなくても、直感的な操作でゲームを作成できるため、ゲーム制作初心者にも適しています。
簡単な操作
豊富なテンプレート
コミュニティ機能
Epic Game Maker: Sandbox Craft
Spck Editor｜コードエディター
Spck Editorは、モバイルデバイス向けの高機能なコードエディターで、特にウェブ開発に適しています。
軽量で直感的なインターフェースを持ち、さまざまなプログラミング言語をサポートしています。
多言語対応
Spck Editorは、HTML、CSS、JavaScript、Python、PHP、Java、C、C++など、さまざまなプログラミング言語に対応しています。
ウェブ開発からスクリプト作成まで幅広く利用できます。
オートコンプリート
コードの入力を効率化するためのオートコンプリート機能があります。
よく使うコードや変数名を自動的に補完してくれます。
プレビュー機能
ウェブ開発に便利なライブプレビュー機能を備えており、ブラウザでリアルタイムに変更を確認できます。
Spck Editor
スマートフォンだけでゲームを作る方法｜実践
実際にスマートフォン一台でゲームを作る方法を解説します。
スマートフォン一台でゲームを作る方法は、2つあります。
一つ目は、SpringinやEpic Game Maker: Sandbox Craftなど、ノーコードでゲーム制作ができるアプリを使用する方法です。
二つ目は、コードエディターを用いて、ゲームを制作する方法です。
以下に、スマートフォン一台でゲームを作る際のメリットとデメリットを表にまとめました。
| 方法 | メリット | デメリット |
|---|---|---|
| ノーコードアプリを使用 | プログラミング言語を知らなくてもゲームを制作できる | ゲーム制作の自由度が制限される |
| コードエディターを使用 | 自由度の高いゲームを作れる | プログラミング言語の理解が必要 |
本記事で紹介するのは、コードエディターを使用して、ゲームを作る方法です。
筆者がゲーム制作に使用した環境は、iPhone（第三世代）と、スマートフォン用のコードエディターであるSpck Editorです。
プログラミング言語は、JavaScriptを使用します。
Spck Editorは、iOSとAndroidともに、以下のリンクからインストールできます。
Spck Editor
Spck Editorの設定と使い方
アプリをインストールして、起動すると以下の画面が表れます。
右上の×が書かれたアイコンをタップすると、game.jsファイルが開きます。
このファイルは、テンプレートとして、最初からプリインストールされているスネークゲームのコードです。
今回作るブロック崩しゲームには使用しません。
左上にある三本の線が引かれたアイコンをタップして、サイドバーを開きます。
次に、紙飛行機のアイコンをタップします。
そして、ワークスペースを開きます。
ワークスペースの右上にあるプラスボタンをタップして、テンプレートの中から、No Frameworkを開きます。
制作するゲームは、ブロック崩しゲームのため、プロジェクト名を「Block-breaking game」として、作成アイコンをタップします。
以下の画面が表示されたら、設定は完了です。
Spck Editorを使用してブロック崩しゲームを作る
Spck Editorを使用したブロック崩しゲームの作り方を解説します。
左上の三本線のアイコンをタップして、＋マークが書かれたファイルアイコンをタップします。
ファイルパスと書かれた欄に、それぞれ「index.html」「script.js」「style.css」と入力し、確認ボタンをタップします。
以下のようなディレクトリの構造で、ファイルが作成されていれば準備完了です。
各ファイルに、下記のコードを入力します。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ブロック崩しゲーム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="myCanvas"></canvas>
<button id="pauseButton">Pause</button>
<script src="script.js"></script>
</body>
</html>
script.js
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const pauseButton = document.getElementById("pauseButton");
let ballRadius = 10;
let x, y, dx, dy, paddleX;
const paddleHeight = 10;
const paddleWidth = 75;
let rightPressed = false;
let leftPressed = false;
let paused = false;
const brickRowCount = 3;
const brickColumnCount = 5;
const brickWidth = 75;
const brickHeight = 20;
const brickPadding = 10;
let brickOffsetTop = 30;
let brickOffsetLeft;
let brickColors = ["#FF5733", "#33FF57", "#3357FF", "#FF33A1", "#A133FF"];
let bricks = [];
initializeBricks();
function initializeBricks() {
bricks = [];
brickOffsetLeft = (canvas.width - (brickColumnCount * (brickWidth + brickPadding) - brickPadding)) / 2;
for (let c = 0; c < brickColumnCount; c++) {
bricks[c] = [];
for (let r = 0; r < brickRowCount; r++) {
bricks[c][r] = { x: 0, y: 0, status: 1, color: brickColors[Math.floor(Math.random() * brickColors.length)] };
}
}
}
function resizeCanvas() {
const width = window.innerWidth > 335 ? 335 : window.innerWidth - 20;
const height = width * 16 / 9;
canvas.width = width;
canvas.height = height;
x = canvas.width / 2;
y = canvas.height - 30;
dx = 2;
dy = -2;
paddleX = (canvas.width - paddleWidth) / 2;
initializeBricks(); // サイズ変更時にブロックの位置を再計算
draw();
}
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
canvas.addEventListener("touchstart", touchHandler, false);
canvas.addEventListener("touchmove", touchHandler, false);
pauseButton.addEventListener("click", togglePause, false);
window.addEventListener("resize", resizeCanvas, false);
resizeCanvas();
function keyDownHandler(e) {
if (e.key == "Right" || e.key == "ArrowRight") {
rightPressed = true;
} else if (e.key == "Left" || e.key == "ArrowLeft") {
leftPressed = true;
}
}
function keyUpHandler(e) {
if (e.key == "Right" || e.key == "ArrowRight") {
rightPressed = false;
} else if (e.key == "Left" || e.key == "ArrowLeft") {
leftPressed = false;
}
}
function touchHandler(e) {
const touchX = e.touches[0].clientX - canvas.getBoundingClientRect().left;
paddleX = Math.max(0, Math.min(canvas.width - paddleWidth, touchX - paddleWidth / 2));
e.preventDefault();
}
function togglePause() {
paused = !paused;
if (!paused) {
draw();
}
pauseButton.textContent = paused ? "Resume" : "Pause";
}
function collisionDetection() {
for (let c = 0; c < brickColumnCount; c++) {
for (let r = 0; r < brickRowCount; r++) {
let b = bricks[c][r];
if (b.status == 1) {
if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {
dy = -dy;
b.status = 0;
}
}
}
}
if (allBricksCleared()) {
initializeBricks();
}
}
function allBricksCleared() {
for (let c = 0; c < brickColumnCount; c++) {
for (let r = 0; r < brickRowCount; r++) {
if (bricks[c][r].status == 1) {
return false;
}
}
}
return true;
}
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
ctx.fillStyle = "#FFA500"; // オレンジ色に変更
ctx.fill();
ctx.closePath();
}
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function drawBricks() {
for (let c = 0; c < brickColumnCount; c++) {
for (let r = 0; r < brickRowCount; r++) {
if (bricks[c][r].status == 1) {
let brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;
let brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop;
bricks[c][r].x = brickX;
bricks[c][r].y = brickY;
ctx.beginPath();
ctx.rect(brickX, brickY, brickWidth, brickHeight);
ctx.fillStyle = bricks[c][r].color;
ctx.fill();
ctx.closePath();
}
}
}
}
function draw() {
if (paused) return; // ポーズ中は描画を停止
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBricks();
drawBall();
drawPaddle();
collisionDetection();
if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
dx = -dx;
}
if (y + dy < ballRadius) {
dy = -dy;
} else if (y + dy > canvas.height - ballRadius) {
if (x > paddleX && x < paddleX + paddleWidth) {
dy = -dy;
} else {
document.location.reload();
}
}
if (rightPressed && paddleX < canvas.width - paddleWidth) {
paddleX += 7;
} else if (leftPressed && paddleX > 0) {
paddleX -= 7;
}
x += dx;
y += dy;
requestAnimationFrame(draw);
}
draw();
style.css
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f3f3f3;
}
canvas {
border: 1px solid #000;
width: 90%; /* 画面幅の90%を使用 */
max-width: 335px; /* iPhone SE3の幅から少し余裕を持たせる */
height: auto;
}
#pauseButton {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
background-color: #0095DD;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#pauseButton:active {
background-color: #007BB5;
}
各ファイルにコードを入力し終えたら、右上の三角のアイコンをタップします。
アイコンをタップして、以下のような画面が表示されれば完成です。
ブロック崩しゲームを実際にプレイして、遊ぶことができます。
まとめ｜スマートフォンだけで始めるゲーム制作
スマートフォン一台で、ブロック崩しゲームを作る方法を解説しました。
高性能なパソコンや専門のソフトウェアがなくても、スマホ一台でゲームのアイデアを形にすることが可能です。
ノーコードでゲームを制作できるアプリを使用すれば、初心者でも直感的にゲームを作成できます。
Springin'やEpic Game Maker: Sandbox Craftなどのアプリは、簡単な操作でゲームデザインやプログラムの設定を行うことができ、楽しみながら学ぶことができます。
これらのツールを活用することで、子供から大人まで、誰もがゲーム開発のプロセスを体験できます。
さらに、Spck Editorのようなコードエディターを使用することで、より高度なカスタマイズやプログラミングの学習が可能です。
リアルタイムのデバッグを行いながら、より複雑なゲームを開発ができます。
GAMEMOでは、ChatGPTを活用して、プログラミングの知識がなくてもゲームを制作できる方法も紹介しています。
ぜひそちらも参考にして、ゲーム制作の第一歩を踏み出し、あなたのゲームのアイデアを具体化させてください。
おすすめの記事
Recommended Articles![]()
ゲーム企画の伝え方 〜より良い企画を作成するために抑えるべきポイント〜
2024.02.13
![]()
【完全版】ChatGPTを使いこなすための汎用プロンプト16選
2024.03.22
![]()
ChatGPTを使ったゲーム企画書の書き方｜すぐに使えるプロンプトと実例
2024.03.22
引用：https://www.springin.org/