【3/18〜】Amazon、VMwareが語る『クラウドの未来』 スラッシュドット    はてなブックマーク  Yahoo!ブックマークに登録  印刷
連載インデックスへ
一撃デザインの種明かし一撃デザインの種明かし（3）

モデリング要らず！Google 3Dデータを使って、1日で街のゲームグラフィックを制作する方法

面白法人カヤック
古川西宏
2009/5/18
たった1日で簡単にできる3D。Google 3Dギャラリーで、斜めにオブジェクトを配置し、立体的に見せる「クォータービュー」グラフィックを制作しよう

Google 3Dギャラリーでゲーム風グラフィック

- PR -

　インターネット回線の高速化、パソコンのスペック向上などにより、数年前と比べるとユーザーのPC環境はがらりと変わりました。そのような状況の中で、いままでは、つくり手が避けていたような表現が再注目されています。

　その1つに、多くのグラフィック表現を駆使したゲーム風のリッチコンテンツもあると思います。例えばDRAGON QUEST SWORDSのように大画面にアニメーションや動画で演出をしているものです。

　今回は、簡単にできる『ゲーム風グラフィックの制作方法』を紹介したいと思います。

どんなものを作るのか？

　ゲーム風グラフィックといえば、どのようなものを思い浮かべますか？

　今回は中でも、斜めにオブジェクトを配置することで立体的に見せるグラフィックを制作していきます。

立派な町並みに見えます

　いわゆる「クォータービューグラフィック」です（アイソメトリックビューともいいます）。ゲームでいうと、MAXIS「シムシティ」、クエスト「タクティクスオウガ」、アートディンク「A列車で行こう」などがあります。

　最近のWebサイトでは、このクォータービューグラフィックを頻繁に見掛けるようになりました。参考として下記のWebサイトを見てみましょう。

　TOYOTA-FUTURE.COM

　Comcast Town

　プレイ！PRIME | docomo PRIME series

　3Dやドット絵で街を作り込んでいますね。

　ただ最初から、上記のような完成された表現を作ろうとしても、3Dのモデリングもできないでしょうし、イラストもパースに沿って一から描くのもなかなか難しいものです。

　それでは、この難しい部分をショートカットして、1日で街のゲームグラフィックを制作してみましょう。

どんなソフト、ツールを使用するのか

　使用したツールは以下のとおり。

　今回は複雑な3Dソフトを使わず、Google 3Dデータを使いクォータービューグラフィックを作ります。

　Google 3Dギャラリーでは世界各地のユーザーが制作したさまざまな3Dデータが共有されています。このデータは、実はGoogle Earthで使用するのが主な目的なのですが、今回はこれを利用して画面を作ります。これならモデリング作業をショートカットできますね。

＊　米商用利用の場合は、所有権や著作権の権利を各社に確認する必要があります

＊　今回は3DデータをPhotoshopで編集するためPhotoshop CS3 Extended 以上のシリーズが必要です

まずはパースを引いてみよう

　今回は1000px×700pxに収まるサイズを想定してグラフィックを作っていきたいと思います。まずはIllustratorで1000px×700px のアートボードを作りましょう。

　次に直線ツールを使用してパースを作っていきます。クオータービューでは、xyzの軸が平面上で120度になるように描かれたものなので、まずは30度の角度で線を引きます。アートボードからはみ出すくらいの長さを設定しておくと足りない長さを足さなくて済むので、大きめの値を入力しましょう。

Illustratorで1000px×700px のアートボードを作る


　30度の線が引けたらこれを複製していきます。その際、線と線の間が均等になるよう配置してください。

　今回は3Dを変形させるためのパースなので線幅は気にせず複製します。

30度の線が引けたら複製していく

　次にすべての線を選択してリフレクトツールで垂直にコピーします。

リフレクトツールで垂直にコピーしていく

　これでグラフィックの基本となるパースが引けました。これは後に3Dデータを変形させるための参考になるのでPhotoshopに読み込んでおきましょう。

グラフィックの基本となるパースができた

  1/2

　INDEX
一撃デザインの種明かし（3）　
モデリング要らず！Google 3Dデータを使って、1日で街のゲームグラフィックを制作する方法
Page1
Google 3Dギャラリーでゲーム風グラフィック
どんなものを作るのか？
どんなソフト、ツールを使用するのか
まずはパースを引いてみようよう
  Page2
3Dデータを探す
3Dデータをパースに合わせて変形
Illustratorで建物をトレース
トレースした建物にテクスチャを付ける
地面づくりは、変幻自在
建物を配置
クォータービューグラフィックの可能性

一撃デザインの種明かし バックナンバー 連載インデックスへ»


「デザインハック」コーナーへ


リッチクライアント & 帳票 フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

スキルアップ／キャリアアップ（JOB@IT）

＠IT Special -PR-
「いつかは壊れるサーバ」そんな故障に
迅速で安価に手軽に対応する方法とは？
New！
「特権ユーザー」の事件を防げ！
万能権限を持つユーザーの管理方法とは？
New！
仮想環境の構築とデータ保護の特効薬？！
実績と信頼性の高いパッケージで安心運用
仮想環境のバックアップもこれまでどおり
「まるごと取ってまるごと戻す」簡単運用
おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！
社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介
その数、なんと400台以上！ グループ内
サーバの「統合管理」によるメリットは？
美人!? まあまあ？ 気になる いやし系!!
PV急増で「美人時計」がとった手段とは？
進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か
運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

→＠IT Special ヘ

お勧め求人情報

キャリアアップ　〜JOB＠IT
＠IT Special -PR-
◆ 　 TomcatやJBossなどAPサーバ環境に関する
情報を集約！ “業務”用APサーバ大百科
New！
◆ 　 一気に解説！　最新のクラスタストレージ
「RAIDを超えたストレージ基準」……など
New！
◆ 　 クラウド的ユーザー体験の変化は脅威か？
仮想化技術を使いこなす運用管理術を紹介
New！

◆ 　 上司や部下、部署内メンバーとの情報共有
を“ガラッ”と変えるコラボツールとは？
New！
◆ 　 おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！
◆ 　 社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介

◆ 　 Twitterのアカウントはなぜ突破された？
メールによる新手の攻撃手法とその対策
◆ 　 もう仮想化のお試しフェイズは終わりだ！
Hyper-V 2.0が基幹システムも仮想化
◆ 　 美人!? まあまあ？ 気になる いやし系!!
PV急増で「美人時計」がとった手段とは？

◆ 　 クライアント企業から求められる人材
⇒IT技術と経営戦略を併せ持つ「戦略家」
◆ 　 .NET編集長が実践する「技術情報検索術」
サンプル・コードを簡単に探す“技”は？
◆ 　 業務効率と情報セキュリティ対策を両立！
手間なく確実に機密情報を守る方法とは？

◆ 　 進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か
◆ 　 運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

◆ 　 【CTC事例】約30の基幹システムを統合！
膨大なバッジジョブを制御した方法は？
◆ 　 仮想化すればコストは削減できるか？
仮想化に必要な「3つの視点」を解説する
◆ 　 その数、なんと400台以上！ グループ内
サーバの「統合管理」によるメリットは？

→＠IT Special ヘ