ICON公式ブログ

ICON公式ブログ

静岡大学コンテンツ制作サークルICONの公式ブログです

弾幕STGの「レーザー」を作ってみた【アドベントカレンダー2019 3日目】

f:id:iconcreator:20191228185744j:plain

この記事は ICON Advent Calendar 2019 3日目の記事です。

はじめに

こんばんは、プログラミング班班長の鈴木です。

サムネイルの雰囲気をいつもと変えてみました。

前回の記事を書いてからもう半年近く経ったんですね。早いものです。

前回はゲーム紹介ということで「アトリエシリーズ」の紹介をさせていただきましたが、この記事を読んで知人が実際にアトリエを始めてみてくれました。ありがとうございます、書いた甲斐がありました。

前回書いた記事はこちら(まだアトリエシリーズを知らない方はこちらも是非)

さて、今日はゲーム制作関連の記事です。といっても前から自分がやってみたかったことを試してそれを記事にするだけですが(

色々用事が立て込んでいてあまり時間が取れないので前回とは打って変わってかなりコンパクトな記事になってしまいますがよろしくお願いいたします。(その分ササっと読めますね!)

今回作る物ですが、弾幕STGなどに出てくる「レーザー」を作ってみたいと思います。

今回も↓の記事のようにプログラムは載せず、作り方のみを簡単にまとめるだけの記事になっていますので、どの言語・ツールを使って作る際にも応用できるかと思います。(少々急ぎ足で書いているのでうまく伝わるように書けるかはわかりませんが。。。)

ちなみに僕がまともにプレイした事があるSTGは東方だけです。4年くらい前にEASYがクリアできない状態から始めて、現在やっとHARDがノーコンクリアできるようになってきました。ハードシューター寄りのノーマルシューターといったところでしょうか...

弾幕ゲーをプレイしていると自分でも弾幕を作ってみたくなってきますよねー、僕も何度(作りかけの)弾幕ゲーを作ったことか...*1

そもそもレーザーって?

弾幕STGの普通の弾幕と言ったらこんな感じですよね。(以下の画像は僕が最近適当に作ったSTGです)

f:id:iconcreator:20191228161716p:plain

レーザーと言うのはこのような丸い弾ではなく、線状の弾になります。

早速ですが作ってみました。こんな感じですね。

f:id:iconcreator:20191228161713p:plain

レーザーはただの線なので単純に見えますが、弾と違って当たり判定が長いので大きく動くと当たりやすく、移動範囲がかなり制限されてしまいます。目の前の弾は避けられても避けた先のレーザーに当たる、なんてこともよく起こりますね。

レーザーと弾を組み合わせると下のようになります。密度自体は低いですが、レーザーで移動が制限されてしまうので見た目以上に難しくなりますね。

f:id:iconcreator:20191228162219p:plain

レーザーの仕組み

さて、レーザーの作り方に入っていきます。

先ほどの画像で気づいた方もいるかもしれません。

画像右側の「Bullet」という数字は画面内の弾の数を表していますが、下の画像ではレーザーが数十本しか見えないのに対し、弾数は320と大幅に多くなっていますよね。

f:id:iconcreator:20191228164234p:plain

 そうなんです、実はこのレーザー、ただの1つの長い弾に見えますが、小さい弾がたくさん連なってできているんです!

連なっている様子を分かりやすく表してみました。一番上の画像を上から順に3,5,10個重ねた様子です。(加算合成で重ねています)

5個だとちょっとだけ不自然ですが、10個重ねると自然なレーザーに見えますね。

f:id:iconcreator:20191228165909p:plain

 このように小さな画像をたくさん重ねる理由は次が挙げられます。

・弾を消したときも弾消し範囲外のレーザーは残る

STGでは被弾したりボムを使ったりしたタイミングで弾が消えることがありますよね。

この時に1本の長い画像をレーザーとして使ってしまうと、それを消しただけでそのレーザーが全て消えてしまいます。

しかし、たくさんの弾を重ねることで、弾消し範囲に入ったレーザーだけを自然に消すことができます。

例を見てみましょう

f:id:iconcreator:20191228171253p:plain

白線より上の部分は1枚の画像,下の部分は10枚の画像でレーザーを作っています。

楕円部分に弾消し効果が発生したときを考えましょう。

1枚の画像で作った場合は1個しかない弾を消すことになるので全て消えてしまいますが(特に、弾消し範囲に入っていない右側まで消えてしまうのは不自然ですね)、10枚の画像で作った場合は左側の数枚の画像が消えるだけで弾消し範囲外のレーザーは自然に残すことができます。

・曲がったレーザーを作れる

f:id:iconcreator:20191228172734p:plain

直線のレーザーもいいですが、曲がったレーザーは見た目が綺麗なのでいいですよね*2。(避けたくはありませんが(笑))

たくさんの画像をたくさん重ねることで、このような曲がったレーザーも簡単に作ることができます。

一見複雑そうに見えますが、作り方は先ほどのような直線の小さなレーザーをたくさん重ねて、進行角度と画像の表示角度(進行方向に合わせます)を少しずつ変えていくだけです。たくさんの直線で近似的に曲線を作っているイメージです。

「途中までは進行角度を変化させて、途中からは進む方向は固定」なんていう弾の進ませかたをすれば、途中までは曲線で途中から直線に変化するレーザーを作ることも簡単にできてしまいます!

注意点

小さな弾をたくさん重ねるという仕様上、かなりの数の弾を表示することになり、負荷が大きくなってしまいます。言語・ツールの処理速度やPCのスペックなどと相談しながらレーザーを作る必要があります。

最後に

急ぎ足で雑な説明になってしまいましたが、今回はこんな感じでレーザーを作ってみました。

本来は弾幕STGについて色々書いてみようと思っていたのですがそれはまたの機会にということで。

弾幕ゲームは遊ぶのも楽しいですが作るのもとても楽しいので是非作ってみてはいかがでしょうか!

それでは、また~

おまけ

f:id:iconcreator:20191228184004g:plain
サムネの弾幕

 

 

*1:一度弾幕STGをちゃんと完成まで作ってみたいところではあります。新歓までに間に合うか...

*2:東方紺珠伝の「純粋なる狂気」とか綺麗ですよね