あけましておめでとうございます! フリーランスの傍ら活動しているMogic株式会社にて新年らしく運試しゲームを作ってみました。
うさぎのスロット「USALOT(うさろっと)」 presented by Mogic株式会社
うさぎの耳を2本、0本、1本、1本と立たせて2011に揃えるというスロットのようなゲームです。難易度高め。一発で当たった人は今年かなりナイスなイヤーなんじゃないでしょうか。耳だけにね。イヤー。うふふ。
1.キャラクターを考える
イラストレーターさんはやはりスゴいですね。個性がありカワイイものが描けるってスゴいと思います。自分はそっちの才能はまだまだなのでいろんな作品を参考に下書きを重ねます。
いろいろ描いてみる
下書きの図。たくさん書いてあって気持ち悪いですね。
輪郭からしていろいろ考えます。丸、四角、楕円、その他にいろんな形があります。
目の大きさはどうしよう。キモカワイイを目指すか、スタンダートに可愛らしくするか。
手クセで描いてしまいすぐいつもの形になっちゃうので面白みに欠けてしまいます。ううむ。
キモいウサギが着想のきっかけに
なんだかキモいすね。でもこのウサギを参考に顔が垂れているような輪郭にすることにしました。そして歯を出さず、鼻先をぷくっとさせることに決定。せっかくなので輪郭からハミ出させちゃいます。
デジタル化
描いたイラストをスキャンしてイラストレーターでトレースします。左からパスの構成図、完成図、下絵です。
ドキュメントスキャナで簡単に
ちゃんとしたスキャンをする機会が減ってきたので自宅のスキャナーはCanonのimageFORMULA DR-150。小スペースだし助かっています。デザインしたラフ案をプリントして注釈を入れてからスキャンしてメールなどにも活躍してくれます。
Illustratorでトレース
1.イラストレーターにスキャンした画像を配置します。ファイル→配置。
2.そのままだとトレースしずらいので動かないようにロックし、さらに透明度を編集して薄く配置します。
レイヤーパレットをダブルクリックすると画面のように「レイヤーオプション」が表示されるので設定します。「テンプレート」にチェックを入れると自動的にロックされ画像の表示濃度も変更されるので便利ですよ。
※プリントされなくなるので下絵もプリントしたい場合はテンプレートのチェックをハズし個別に設定してくださいね。
もっと詳しく知りたい人はこちら! 執筆させていただいたイラストレーターの本を買ってね★ 初心者向けの内容ですよっ! えへへ。
2.全体イメージを考える
サイトはスタート画面、プレイ画面、クリア画面、ゲームオーバー画面の4つです。それぞれの画面イメージをイラストで描いていき頭の中のイメージを固めていきます。基礎であるゲーム中の画面を念入りに作り、トップとクリア、ゲームオーバーをそれに派生する形で描きます。
この時点で頭の中にあるイメージは月と夜空なのですが、それでは十五夜になってしまいます。ウサギ→跳ねる→月へ行くとするのが流れとしてキレイではあるのですが、今回は月じゃなくて初日の出がモチーフになるお正月。ラフ案を描きながら落しどころを模索しておきます。まだもやもやしていながらPhotoshopでの作業時に希望を託します。
Photoshopで画面モックを作る
これは後から後悔しました。Flashでリサイズなどを頭に入れるんだったらIllustratorで作るべきでした…。後からIllustratorでスクラッチすることに。Illustratorは透過の設定がPhotoshopと違い少しシームレスではないのでつい、Photoshopを使ってしまいました…。
Photoshopで作ったFlashゲーム画面モック
背景を正月らしく
月とウサギで十五夜らしくなるのを避けるために、正月らしい背景を一気に敷きました。背景を決めてしまえばある程度向かう方向は決まっていきます。しかも真っピンクですからね。十五夜に行きようもありません。
正月には独特のトンマナがあり、正月でしか使わない色、グラデ、背景、筆文字などがあります。もっと「いかにも」なテイストにしても良かったかもしれないな。と思いつつもウサギのデザインに合わせていくので今回はおあずけです。
Flashにオーサリング!
いよいよFlashにてオーサリングします。今回はとっても優秀な友人がお手伝いしてくれました! 28、29日という年の瀬までお手伝いしてくれて、本当にありがとう(´；ω；｀)
前節にあったように、手書きに注釈を付けて動きのイメージを伝えました。ですがFlashのアニメーションの部分とプログラムな部分をどう連携すべきが分からず友人には大変迷惑をかけました。Flashはバナーくらいしか作ったことが無いのでもっと勉強せねばならない箇所です。今回は自分でアニメーション部分を作ってそれを友人に渡して組み込んでもらう形をとりましたが、もっとここら辺のフローをちゃんとしたいですね。
また友人に依頼する際、仕様もおおまかでしかなく伝えきれてなかったのでそこも反省。ごめんなさい…。
恥ずかしい! 初歩的なミス!
今だにやってしまうのですが背景の処理を考えず作ってしまうコトが多々あります…。ううむ。
Photoshop上では1200pxのキャンバスに作っていきます。まず960pxのガイドを引き、コンテンツをそこに収め背景はリピートを考えつつ1200px以下で収まるようにするのですが、ここでたまにリピートを忘れてリッチなフッターを作ったりしちゃうんですね…。今回はウサギのいる青いステージ、黒いフッター部分背景としてリピートできるように作っていましたが、波の部分は切れてしまっているし、さらに青いステージ、フッター、背景などはゲームスタート画面からゲームプレイ画面に遷移する際に高さが変わります。ここら辺も原因上手くいきませんでした。未熟ですいませんっ!
フラッシュを固定幅にするためリデザイン
フルスクリーンはできなかったので960px内に収める形で作ります。ここで頭を悩ませたのが背景の処理です。Flash部分がページにポツンと浮ぶ形になるのでこれをどう「ごまかすか」。黒背景を単純に敷いてしまうと違和感バツグンです。これをなんとか上手い具合にしていきます。あまり理想的なフローではないですが、こういった処理も今までの経験がモノを言うところです。
問題をカバーするのもデザインの仕事!とか言ってみます。はうーん。
孤島になったFlashをwebページにうまく馴染ませるために作ったPhotoshopモック
webページをリデザインし、背景などをFlashと同様に構成することにしました。Flash自体を枠で囲い画面中央に配置し、下部を黒で埋めます。中段にFlashにもある青を使用することでフッター部分と背景とのクッションを作りました。これで背景とフッター部分がブツ切りじゃなくなります。
中段の背景が無いとブツ切りな感じ
さらにゲームタイトルを配置し、背景に日の出っぽい集中線でFlashとhtml側の連結している感じを出してみます。
タイトルはアニメーションGIFでカジノっぽくチカチカ。本当は集中線をゆっくり回転させたいところです。css3とjsにて制御できるらしいのですが、自分にはできませんでした。ぬぬぬ。
マークアップ!
Flashをど真ん中に配置するために上記のようにコードを書きます。
Flash部分のdivに「position: absolute」を使っているので普通に配置するとFlashのあった部分から要素が置かれていきます。
そのままだと具合が良くないので中段の背景やフッター部分などの位置も「position」を使い位置を合わせます。もにもに。
なんだか上手くいかないFlashの位置
borderで枠を囲っているのですが、Firefoxのみ余計な余白がでたりごにゃごにゃしていました。
flashを設置した際に出来る、下辺の余白 – CSS HappyLife
こちらの記事を参考にcssに書き足してみたのですが、記事にある上下の余白でなく左右の余白なのがネック。「vertical-align: top;」とるとボーダーがFlashの高さを認識しないなどもろもろ…。考えるにFlashをhtml上で縮小するときの比率がブラウザにより違うっぽいです。が、それらしい記事は見つかりませんでした。気のせい？？？ エキスパートさまヘルプっ!
音を入れました
最後になりましたがFlashゲームの音も欠かせない要素です。イメージ的には「勇者のクセになまいきだ」のようなほっこりした音にしたかったです。
とってもイメージにピッタリな音素材を見つけたので紹介します!
otosozai.com
魔王魂
こういったクリエーターさん達のおかげで自分は生きていられるのです。自分も見習って人の役に立つデータを配布したり、今年はやってみたいなー。
年賀状も合わせて
年賀企画なので年賀状も同じデザインでゲームへの誘導をしています。
最後にテーマみたいなことを
「うさろっと」はMogicでただの年賀状を作ったんじゃおもしろくない。という理由で2週間ほどの突貫で作りました。
年賀状やお歳暮などそういったコミュニケーションをwebで簡潔させず、「プラスα」とすることでさらに新しい楽しみやコミュニケーションを見出せたらなという思いです。今年はFlashゲームという形でしたが、来年はもっともっとアイデアの効いた内容を考えたいです。
ぜひチャレンジしてみてね!
Mogicから年賀状をもらった人はハガキにあるお年玉番号と諸情報を入力するとプレゼントが貰える仕組みです。もし届いた方はステキプレゼント目当てに頑張ってみてください! スロットは難しいですけど何回かチャレンジすればもしかしたら…？ ステキ(？)なプレゼントは見る価値ありますよー!
Posted in 制作実績 | 8 Comments »
イシジマミキにインタビューをする (the interviews)
▲ ページ上部へ戻る
