ParaDraw覚書index描いてみよう〜入門> 背景画像

chapter1
描いてみよう〜入門編
背景画像を描く/家具を描くアイテムを描く
パーツを描くup/ロゴを描く/タイトル画像を描く
 
  ++ 脱出ゲーム作りのこと  ++
[アクションスクリプト]
いよいよ、実際にゲームに使う画像を描いていきます。
その前に、ゲーム作りに関していくつかのポイントを。

ParaFla!を使って作る、flash ゲーム〜ここでは、脱出ゲームやポイントクリックゲームですが〜は
Action Script (AS)というスクリプト言語を使って構築します。
ParaFla!は、いわば、ASを知らなくても、flash コンテンツが作れる、オーサリングソフトなのです。
実際に作っていくと、スクリプトを記述する必要にせまられますが、
そこらへんについては、WANPA 工房さんが、かなりわかりやすい講座を開いてらっしゃいます。
私も、一(いち)から、こちらで勉強させてもらいました。
ですから、私がASや ParaFla の操作にふれるのは、最低限にとどめておきます。

[ゲームを作る前に]
どんな手順でゲームを作るのか〜は、人それぞれです。
私の場合は、気に入った画像を見つけたのが、直接のきっかけでした。
これの中に、カギが入っていて〜と、構想(妄想?)がどんどんふくらんできて、
気がついたら、アクマの男の子が、勝手にうろつきまわっていた・・・って感じです。
なので、ストーリーも構成もなく、家具やアイテムも、必要の都度、書き足していくという
まこと、いきあたりばったりなゲーム制作でした。

さすがに、スクリプトを書き始めてからは、フローチャートを書きました。

フラグって何??というヒトだったもので。
WANPA さんの講座のサンプルを一回ずつDLしては、実際の動きと照らし合わせ、
わからなければ質問し(WANPA さんは、とてもていねいに答えてくださいました)
今、画像を描き始めるのに、ストーリーやフローチャートは、なくてもいいのですが、
大きなイメージ(舞台や絵柄や色使いやナゾ解きなど)は、持っていた方がいいと思います。
絵を描いていて、思いつくこともたくさんあると思いますよ。

[ゲームに必要な画像あれこれ]
[背景画像]〜室内なら部屋、屋外なら地面や山や道や森
        必要に応じて、物かげや、家具の裏や家具の上下などのアップ画像。
[家具]〜脱出のドア、窓、たんす、いす、机、たな、テーブル、ソファ、ベッドなど。
[アイテム(取得後、使用する)]カギ、ハンマー、ドライバー、カッター、懐中電灯、電池、鉛筆
[アイテム(参照するもの)]〜カード、箱、ヒントの紙切れ、本、地図、ポスター、手紙、看板
[アイテム(オリジナル)]〜そのゲームのストーリー展開上、独自に必要となるもの。キーアイテム
[各種ボタン]〜方向指示ボタン、アイテム参照ボタン、アイテム選択する枠、サブ画面を閉じるボタン
        クリックポイント、パス用の数字カード、スタート、・スキップ・オープニングなどのボタン
[各種画像]〜タイトル画像、オープニング用画像、エンディング用画像

これらの描き方を、少しずつ解説しながら連載していく予定です。
ブログにアップして、順にウエブページにまとめます。
乞うご期待♪
  ++ 1、背景画像を描く  ++
 
[サイズの設定]
これから作るゲームのサイズを決めます。
全体の大きさと、アイテムウインドウとメッセージウインドウの配置・大きさで
背景が必要となる、メインウインドウの大きさが決まります。
ここは、WANPA 工房さんと同じ、400 × 300 とします。
ParaDraw のキャンバスも 400 × 300 にします。
実際の表示がどこまでなのか、くっきりわかって描きたい人は、キャンバス外描画のチェックをはずします。
私は、キャンバスの外で、いろいろ作業するので、このチェックは入れてありますが、 ParaFla のプレビューで、下に白い空間があいていることを発見したりします。
太めの枠線を描いておくのが、無難ですが、デザインに影響しますしねえ。。。

とりあえず、線が黒、塗りが水色の [線と塗り] の通常の四角形を、画面いっぱいに描きます。
線の太さは 5pt、図は50%表示です。
これから描くのは、正面に壁、両側に側面の壁、床がみえている室内です。(天井は描かない)

床の台形を描きます。
[線と塗り]四角形 → 上の2個のアンカーを動かす

きれいな描線にしたいので、必ずグリッド線を表示させて描きます。
(みづらいので、2枚目以降はオフですが、実際は
表示させて描く → 消して確認 をしています)

正面と壁の境目の線を描きます
(わかりやすいように、赤の太線です〜実際は細線)
これは、「壁の色が同じ」「境目の線を描く」ためも手順です。
後で、壁の色を変えたり、グラデーションをかけるからです

正面の壁を四角形で描くと、上の辺(黄色い→)が重なり、線がすっきりしません
(パスを開く手もありますが、それは後日)
床の下線も同じことがいえますが、
ここを四角形じゃなくて、両脇の斜め線だけにすると、
色がつけられないので、台形なのです。
線の色を紺に、塗りの色を水色、グラデ色を薄い青緑にして、壁の部分のパスを [線形グラデ2] にしました。
床はグレーのベタ塗りです。
境目の線の色も、紺に直し、太さを3ptにしてあります。

右側は、両壁と床の境目に線を使わず、色の切り替えのみにしたものです。
左右の壁に、違う色の[塗りのみ] 台形を描きました。
ここの不透明度を下げると、自然な切り替えに見えます。 (図は、不透明度145)
このほかにも、いろいろな視点で背景を描くことができます。
床線を横一直線のみ〜という背景もあります。
廊下のようでもあり、広々とした研究所のようでもあり、これもひとつかなあ〜って思います。
限られた画面で、いかに広さを出すか〜も、私にとっての課題のひとつ。
遠近法や、アイテムの大きさとのバランスで、こちゃこちゃした室内にもなるし、広々とした空間にもなります。

[まか素材] ページに、天井あり、部屋の角の視点、などの背景画像をアップしてみました。
まねをして描くか、DLして、自分で色を変えてみてくださいね。

→ next ブログにも連載予定〜

初めてのParaDraw

私がゲームを作ろうと思い立ち、初めて描いたアイテムは
 「赤いたんす」
まかくんの、花瓶がのっている、3段のたんすです。
ラフな線のイラストが好きで、あんな手書き風になりました。
けっこう、タイヘンだった記憶が。。。(続き)

home このページTOP