ブラウザ上で動く2Dゲームのためのレトロ風ドット絵背景のデザイン
ブラウザ上で動く2Dゲームのためのレトロ風ドット絵背景のデザイン
近年switchなどコンシューマーゲームより、スマホゲームやソーシャルゲームが注目されている。スマホゲームやソーシャルゲームはガチャなどの課金要素が強く、純粋にゲームを楽しめなくなってしまったと感じる。
そこで、近年HD-2Dで注目されているドット絵を使って昔のゲームのように純粋にゲームを楽しめるようなドット絵のゲーム作品を制作する。
レトロ風のドット絵でできたゲーム
ハードウェア
┣pc(windows)
┣スマートフォン（iphone12)
ソフトウェア
┣Visual studio code
┣ミニドット絵メーカー
┣Illustrator
2024.4.12〜
前期
前期では調査を通して国内のゲーム業界の現状とゲームとは何か、ゲームの定義について知ることができた。ゲームの三大要素の「目的」、「ルール」、「敵」を意識したゲームの設定ができた。
レトロゲームを参考にドット絵のキャラクターを作成した。勇者はドラクエを参考に、スライムはドラクエに似ないようにしました。BGMもレトロゲーム風のピコピコ音の曲を作成できた。
前期では、ゲームの中身をあまり触れることができず、大半がテンプレートのままになってしまっている。これからToDoリストに書いたことをゲームに反映していきたいと思う。
後期
近年国内のゲーム市場は2020年には2兆円を突破し、高い市場規模を維持している。内訳はスマートフォンやパソコンを利用する「オンラインプラットフォーム（家庭用ゲーム機ソフト以外） 」が最も多く80パーセントを占めている。このことからオンラインプラットフォームがゲーム業界をけん引していることがわかる。
オンラインプラットフォームの内訳をみるとスマートフォン向けゲームアプリが最も大きくなっている。またゲームの課金方式で最も利用されているのが「基本プレイ無料（ゲーム内課金あり）の方式。
 |  |
javascript
HTML
CSS
-BGMをつくる
-レトロゲームのようなドット絵を制作する
--ゲームの設定を考える
-背景を作成する
海の背景と城の背景を作るためのマップチップを制作した。
ドット絵
 |  |
町の背景と草原の背景を作るためのマップチップを制作した。
ドット絵
 |  |
雪原の背景を作るためのマップチップを制作した。
ドット絵
砂漠の背景用に制作したマップチップを使用して背景画像を制作した。
砂山、サボテン、岩、砂岩のマップチップを作成した。
ドット絵
砂漠の背景に必要な砂のマップチップを作成した。
マップチップは砂だけのものを2つ、草が生えているものを1つ作成した。
ドット絵
googlefontsを使用してゲーム内の文字のフォントをドット絵のフォントに変更した。
https://fonts.google.com/specimen/DotGothic16?query=dot
今までHTMLとJavascriptのみで制作していたが、フォントを変更するためにCSSを追加した。ドット文字のフリーフォントに変更しようとしたがうまくいかなかったので後日相談する。
https://free-fonts.jp/category/dot/
ドット絵を制作した
作ったドット絵をphotoshopで組み合わせて背景の画像を作成し、差し替えた
草の部分は２種類のマップチップを市松模様のような感じで配置することで単調な感じを抑えることができた。
画像のサイズは640×1280の1：2にしてスマホにちょうどいいサイズにした。
ドット絵を制作した
https://drive.google.com/drive/folders/1-Ok2SP1mEMWR7SIub6EWMmor-5AX71Wy
研究の趣旨をプログラミングに焦点を当てていたが、進めていくことが難しくなったためドット絵に焦点をあわせた研究に路線変更する。
ドット絵製作ツール
https://takabosoft.com/edge
背景を制作して差し替えた、画像サイズなどまちがってしまったので、後日作り直す。
スケジュール
最終発表を受けて
SFCのゲームのドット絵を参考にする。
作品概要をillustratorで制作し、チェックをしてもらった。
Suno AIを使ってゲームにあうBGMを作った。1日に5回しか曲を作ることができないので何日もプロンプトを調整しながらイメージに合うものを生成できた。
プロンプト
8-bit, Chiptune, Bitcrush, alternative , Pulse Wave, kawaii, future, bass, game, RPG
倒せる敵のスライムを制作した。
タイトル
Timid Hero
Timidは「臆病な」 Heroは「勇者」
内容
主人公はとても臆病な勇者なので一番弱いスライムとしか戦うことができません。倒せない敵がいこつを避けながらスライムを倒してスコアを稼ぎましょう。
 |  |
 |  |
cocos2d-jsはJavaScriptによって動くオープンソースのゲームエンジンでweb上で動くような簡単なゲームの制作に向いている。