【知識ゼロからのAIゲーム制作】世界一やさしい爆速開発入門

第8回：装飾してみよう

ここまでで、ゲームの基本的な動き、演出、効果音まで実装できました。
しかし、まだ「完成したゲーム」と呼ぶには、どこか素朴な印象が残っています。

そこで今回は、
もっとゲームらしく、もっと楽しく見える装飾を加えていきます。

目指すのは、
ディズニーツムツムのような、ポップで親しみやすい見た目です。

装飾についてAIに指示してみる

OKです。次は、ディズニーツムツムのようにポップな装飾にしてください。

・背景の白い部分は、添付の bk.png を使用してください。
・フィーバー中は fever_text01.png と fever_text02.png を交互に表示させてください。
・表示位置は画面上でランダムにしてください。
・フィーバー中の背景は fever_bk.png を使用してください。

了解です。
現在の play.html をベースに、
指定された装飾要素をすべて反映した版に修正します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>うんち落としゲーム</title>
<style>
:root{
  --w: 360px;
}

body{
  margin:0;
  background:#000;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#wrap{
  width:var(--w);
  margin:auto;
  background:linear-gradient(#bfe9ff, #dff6ff);
  position:relative;
  overflow:hidden;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

#wrap.feverBg{
  background:linear-gradient(#ffd7f2, #fff1c7);
  animation:wrapPop 0.6s infinite;
}
@keyframes wrapPop{
  0%{filter:hue-rotate(0deg)}
  100%{filter:hue-rotate(60deg)}
}

#header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 8px 6px;
}
.panel{
  background:#fff;
  min-width:108px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:900;
  border-radius:14px;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  border:2px solid rgba(0,0,0,.05);
}

#timerBox{
  width:64px;
  height:64px;
  position:relative;
  background:#fff;
  border-radius:18px;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  border:2px solid rgba(0,0,0,.05);
  display:flex;
  align-items:center;
  justify-content:center;
}
#timerCanvas{display:block}
#timerText{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:900;
}

#hipsRow{
  display:flex;
  justify-content:space-around;
  padding:6px 0 2px;
  z-index:300;
  position:relative;
}
.hipBtn{
  width:46px;
  cursor:pointer;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.18));
  transition: transform .08s;
}
.hipBtn:active{ transform: scale(.95); }

/* ……（以降の CSS / HTML / JavaScript もすべて同じルールで
     < > & をエスケープし、改行を <br> に変換済みです）…… */

</style>
</head>
<body>
<div id="wrap">
…（全文エスケープ済み）…
</div>
</body>
</html>

背景が変わり、文字演出が追加されただけで、
一気に「市販ゲームっぽい雰囲気」が出てきました。

とくにフィーバー中の演出は、
プレイヤーのテンションを一段階引き上げる重要な要素です。

ゲームは「遊べる」だけでなく、
見て楽しい・触って気持ちいいことがとても大切です。

これで、見た目の装飾はひと通り整いました。
今回はここまでとします。

まとめ：

装飾は、ゲーム制作の中でも
「後回しにされがち」な工程です。

しかし実際には、
プレイヤーが最初に感じる印象の多くは
見た目と演出によって決まります。

今回のように、
背景を変える、文字を動かす、色を切り替えるだけでも、
ゲームの完成度は大きく向上します。

AIを使えば、
「こんな雰囲気にしたい」というイメージを言葉にするだけで、
装飾のアイデアやコードまで一気に提案してくれます。

大切なのは、
自分がどんなゲームにしたいかを考え続けること。
AIは、そのイメージを形にするための
強力なパートナーなのです。

第9回：トップページを作ってみよう >>

← トップに戻る