title-2b
Design

一日でゲームデザインをする

こんにちは!新人森田です。

皆様『イケメンばかりにチョコは渡さない』は楽しんでいただけていますか?
今回はゲーム制作の裏話をデザイナーサイドから書いてみたいと思います。
デザイナーサイドとかニヤニヤしちゃう響きです。

ゲームの素材を作る

まずはどんなゲームを作るか、企画会議です。

バレンタイン前々日に山形師匠の発案によりゲーム制作が決まり、色々とアイデアを混ぜ込んでゲームの仕組みを考えました。
…てことは制作期限1日ですか!
使用ツールはPhotoshopでどこまでいけるかやってみます!

世界観づくり

ゲームの企画が固まったら、どんなビジュアルにするかイメージを膨らませます。
登場人物はイケメンと女の子。場所は多分日本。時代はなう。

0214-4

手書きで色々とスケッチしてみました。お色気オネーサマはボツです。

0214-3

スケッチを元にPhotoshopで清書ってほどでもないラフを書きました。

でも今回のゲームはドット絵を使いたいので、本番はこれからです。

ドット絵を作る 1

ドット絵と言われても、にわか知識しかないしちゃんと作るのはこれが初めてです。
期限内に出来上がるのかも怪しいところ。

でもとにかくやらなきゃ始まらない、ということでここからは面白法人カヤックさんのデザイナーブログを参考にしました。

0214-5

まずさきほどのラフを縮小して荒くします。

その上にレイヤーを作って1ピクセルの鉛筆ツールで清書します。
普通に絵を描く感覚でなぞってから、いらないドットを消すという感じで作業しました。
0214-6

ブログ通りにやっただけでもうそれっぽくなってきました。

輪郭線のレイヤーの下に色塗り用のレイヤーを作って色を塗っていきます。
以前どこかで「ドット絵はビビットな色の方がいい」的な情報を見かけたような気がするので、一度色を置いてから彩度を上げました。あと、子供向け戦隊モノみたいに一定の色相を使った方がキャラのイメージが湧くかなと思って、ある程度系統を決めて塗ってみました。

0214-7

青系コーデにピンクのシャツで女子力アッピルです。
ビビットな塗り分けの為、陰は焼き込みカラー、ハイライトはオーバーレイに設定してあります。

見よう見まねでしたが、なんとか出来ちゃいました。
人間やろうと思えば出来るんですね。

ドット絵を作る 2

この子が歩いてくれなければゲームになりません。
先ほどのドット絵とにわか知識を元に動きをつけてみます。

0214-8

こうして大きくすると粗さが目立ちますすみません。

歩くのは足の動きが一番大事ですが、頭の高さや肩の高さ(=チョコの高さ)、髪の揺れを表現すると歩いてる感が出るかなとやってみました。微妙に頬のテカリなども変えてあります。
この辺は昔からのゲーマー気質が功を奏しました。
この調子で他のキャラも1〜2ピクセルずつパーツをずらして動きを作りました。

けど、ゲーム内では動きが速すぎてあんまり分からないというかなしみ。

背景を描く

キャラが出来たら背景を作ります。
背景は師匠の一言で「吊り橋」と決まっていたので吊り橋を描きます。
背景に取りかかった段階でもうあまり時間がなく、というかキャラはまだしも背景なんて全然描いたことがなくて、それでもなんとか間に合わせられないものかと頭をフル回転させました。

背景を描く上で大事なのは、「それっぽさ」を出すことかなと思いました。
そんなにしっかり書き込まなくてもそれっぽさがあれば人が勝手に脳内補完してくれる。はず。

0214-10

まずペン先を平たくした適当な太さのラインを引きます。

0214-9

あとは矢印の通りにざっくざっく描いていったら出来上がり。
木の質感はペン先を平筆にして木目っぽくしています。
ほとんどひたすら縦線を描くだけという突貫工事でごり押しました。

0214-11

一番しっかりしてる背景の雲はフリーのブラシ素材です。
「リアルな雲 ブラシ」あたりのワードで検索すると色んなブラシが出てくると思います。
使うか分からないけど一応DLしておいたのが役に立ちました。

各パーツを作る

その他に作ったものは以下の通りです。

  • タイトル兼スタートボタン
  • 得点の背景パーツ
  • 制限時間の背景パーツ
  • 結果表示の背景パーツ

このあたりはほとんど一発描き…
プログラミングと同時進行で足りないパーツを教えてもらって作る、という連携プレイでなんとか1日で仕上がりました。

ドット絵公開

最後に、作ったドット絵を大公開しちゃいます。
地味に表情とかこだわってたりします。
意外と悲しい顔と嬉しい顔って使い回せることも判明。

girl-blueboy

girl-pink

それぞれ「通常・チョコ渡せた・チョコ渡せなかった」バージョンです。

今回も本当に良い勉強になりました。
これで簡単なゲーム作りはばっちこい!と思いたいです!

『イケメンばかりにチョコは渡さない』

http://www.halenohi.jp/

標準
title-2b
Releases

バレンタイン特別企画:イケメンばかりにチョコは渡さない

こんにちは!新人森田です。
しんしんと雪が降り積もるホワイトバレンタイン、皆様いかがお過ごしでしょうか。

寒いし家から出たくない!

でもチョコが欲しい!

そんなあなたに朗報です!
ハレノヒバレンタイン特別企画ゲームを本日リリースいたしました!
その名も、

『イケメンばかりにチョコは渡さない』

http://www.halenohi.jp/

タイトルがタイトルなのと、昨日の予告画像を見た限りではどんなゲームか予想がつかないと思うので、こちらでゲームの内容をご紹介します。興味が湧いたら是非プレイしてみてください。

ゲームスタート

0214-0

ゲームの読み込みが終了したらスタート画面が表示されます。
タイトルをクリックするとゲームスタートです。

プレイ画面

0214-1b

ルールは簡単!

  1. ゲームがスタートしたら、画面左からチョコを持った女の子がイケメンに向かって歩いてきます。
  2. 女の子をクリックすることでイケメンに渡されるはずだったチョコを奪い取れます。
  3. 制限時間50秒の間にどれだけチョコを奪い取れるか?!

内気そうな女の子がチョコを奪われて泣いて帰ったり、チョコを渡せて顔を赤らめているのを見るとちょっと心が痛む場面もあるかもしれません。女の子をいじり倒してチョコを奪いまくるもよし、キラキラのイケメンスマイルを眺め続けるもよし、自由にゲームを楽しんでいただけたらと思います。

—ラスト20秒から、あなたは衝撃の展開を目の当たりにするでしょう

リザルト画面

0214-2

結果画面はこのように表示されます。
「もう一度遊ぶ」ボタンでリトライ出来るので、満足いくまで遊んじゃってください。

(面白いと思ってもらえたらシェアしていただけるととても嬉しいです!)

ちなみにハレノヒメンバーはまだ誰もコンプリート(イケメンにチョコを1つも渡さない)出来ていません。コンプリート出来たら、どんな風に達成出来たかご指南ください。

ハッピーバレンタイン!

それでは男子も女子もイケメンのかたもそうでないかたも、
「イケメンばかりにチョコは渡さない」をプレイしてハッピーなバレンタインをお過ごしください!

『イケメンばかりにチョコは渡さない』

http://www.halenohi.jp/

標準