+プラスラボ ~創って学ぶメディア~

学びの紹介

画面をバラバラに叩き割ってやる!(プログラムで)

画面をバラバラに叩き割ってやる!(プログラムで)

※この記事は、神戸電子ブログで2017年03月10日に掲載されたものを転載・加筆しています。※

ゲームソフト分野は「ゲーム業界一直線!」を合言葉に、1年生の時からプログラミングに特化したカリキュラムを実践しています。
また、1年次から作品制作に力を入れて取り組みゲーム業界への就職を目指すことになります。

みなさんも様々なゲームで遊んだことがあると思うのですが、ゲームの面白さを決める要素はたくさんあります。
プレーヤーを引き込むために重要な要素としてストーリーやシステムなど、様々ありますが、そのうちの一つが「演出」です。
今回は3Dプログラミングでの演出テクニックを解説してみましょう。

演出テクニックはゲームの面白さを決める重要な要素

さて、ここに3Dの一機の飛行機が飛んでいます。

3Dの一機の飛行機

この3D空間を描いたこういう画面を……

割れた画面

バリバリっと割っちゃうのです。

静止画ではわかりにくいので、まずは動画を観てみてください。

立体空間が表現された3Dの映像をどのようにして割っているかわかりますか?
動画の中でも少し解説していますが、専門知識がない人でも想像がつくよう、できる限り噛み砕きながら説明してみます。

3D映像を割るにはこうする!

3D空間がわかる図

普段はゲームに必要なものを直接、3D空間に描いています。

破片となるポリゴンが3D空間に存在

しかし画面が割れた後は、破片となるポリゴンが3D空間に存在していて、それまでの3D映像は1枚の絵として破片の上に描かれているわけですね。
また、破片が目立つよう、背景は黒色で塗りつぶしています。

裏画面

これを実現するため、割れた瞬間にプレイヤーには見えない「裏画面」に今までの内容を描きます。
あとで使うために一時的に別の場所に描いておく、というのはプログラマーがよく使う手です。

では、破片の方はどうやって作っているのでしょうか。
文章では説明が大変なので、図を描いてみました。
(と言いつつ、この図を作るのもめちゃくちゃ大変でした)

手順

それぞれの角を基点にするのは、角をまたぐと四角形になってしまうからです。
ポリゴンというのは三角形単位なので、破片がそれ以外の形になると手間が増えるんですね。
どうすれば目的の処理が実現できるのか、仕様を理解しているプログラマーが判断していくのです。

破片ポリゴンに貼ります

最後に、さきほど描いておいた裏画面の映像を、破片ポリゴンに貼ります。
(ポリゴンに貼り付ける画像のことを「テクスチャ」と呼びます)

ここまで来れば峠は越えましたね。実現できるかどうかわからない、といった不安はもうありません。

実は一番大切な「それっぽく見えるような動きの追加」

あとは「それっぽく見える」よう、動きを追加しています。実はこれが一番大切かもしれません。

3Dの一機の飛行機

割れた瞬間、破片を少しだけズラして一定時間止め、破壊された衝撃を印象付けます。
いきなり飛び散るより、「バリン!」という瞬間を見せた方がショックが伝わりますね。

また、破片がいろいろな方向に飛び散るよう、破片ごとにランダムな方向・速度でジャンプさせ、しかも回転させています。
(回転の中心が各三角形の重心位置になるよう、細かい計算もしています!)

「どんな風に作っているのか?」興味を持つことが大事

解説が長くなりましたが、実際にはこの記事を読む時間の何倍もの時間をかけて完成しています。
プレイヤーが見るのは一瞬でも、実現には長い時間とたくさんの手間がかかっているんです。

今回の演出は「割れる」というネガティブな表現なので、ゲームで使うなら「フィールド上で敵と遭遇した」ときや「ゲームオーバーになった」ときに使うとよさそうですね。

市販ゲームをプレイするとき、「どんな風に作っているのだろう」という視点で遊ぶようにしてみてください。
そこに興味が持てるなら、クリエイターになれる素質がありますよ。