仮眠プログラマーのつぶやき

自分がプログラムやっていて、思いついたことをつぶやいていきます。

自作ゲームやツール、ソースなどを公開しております。
①ポンコツ自動車シュライシュラー
DOWNLOAD
②流体力学ソース付き
汚いほうDOWNLOAD
綺麗なほうDOWNLOAD
③ミニスタヲズ
DOWNLOAD
④地下鉄でGO
DOWNLOAD
⑤ババドン
DOWNLOAD
⑥圧縮拳(ツール)
DOWNLOAD
⑦複写拳
DOWNLOAD
⑧布シミュレーション
DOWNLOAD
⑨minecraft巨大電卓地形データ
DOWNLOAD
⑩フリュードランダー
デジゲー博頒布α版
DOWNLOAD
⑪パズドラルート解析GPGPU版
DOWNLOAD
⑫ゲーム「流体de月面着陸」
DOWNLOAD

2009年05月

技術解説「ぽんこつ自動車」その3 フェードアウト

技術解説って回を重ねるごとに、簡単になっていく気がします・・・


最初のほうなんか、3平方の定理の応用とか凄いことやってましたよね・・・


今日はきっと一番簡単です!


画面をフェードアウトさせるプログラムについて解説します。


フェードアウトとは、最初画面がうっすらと暗くなり、だんだん濃く暗くなり、もっと濃くなり、最後には真っ黒になる。この一連のことを言います。

これができるだけでゲームの見栄えがかなり変わってくるものです。


必要なものは、grectという命令とフェードアウトさせる画面


最初、フェードアウトさせる画面を別のバッファにコピーします


例、buffer 1,640,480,0:gcopy 0,0,0,640,480 ;バッファID1に現画面(ID0)をコピー


次にフェードアウトさせるフレーム数を考えます。だいたい16くらいがちょうどいいです。


毎フレームの手順としては、①バッファID1を現画面にコピー、②grectで真っ黒の画面を半透明コピー、③フレームが進むごとに半透明率を上げていく。


repeat 16

pos 0,0::gmode 0 ;①

gcopy 1,0,0,640,480 ;①

color 0,0,0:gmode 3,640,480,a+16 ;②

grect 320,240,0,640,480 ;②

a+=16 ;③

redraw 1

redraw 0

await 26

loop


こんな感じになります。


変数aを省略したいならgmode 3,640,480,a  gmode 3,640,480,16*cnt+16


に替えればおkですね。


注意すべき点はaが256を振り切らないようにすることです。


256を振り切るとたまに思わぬバグが発生します。


もしフェードアウトさせるフレーム数が16では足りなく32とかにする場合は

16*cnt+16 を 8*cnt+8
してください。


次回:1億桁×1億桁の開発状況報告②

技術解説「ぽんこつ自動車」その2 GAMEOVER関数

GAMEOVER画面みました?


なかなか面白いプログラム使ってるんですよあれ!


49b49c87.png

GAMEOVERの文字が上から滑らかーに落ちてきて、下で一旦停止して、上に滑らかに戻って、また真ん中で停止する。


実は、あのプログラム毎フレーム毎フレームの座標を計算で出してるんです。


それもy=t・sinωtの式を使うだけで一発で作れます!


図を見てくれれば分かりますが、

tに時間を代入すれば、計算式よりyが算出されます。


yはそのまま座標として使えるので


pos 160+cnt*45,160+int(3.0*double(sreg)*sin(0.038*sreg))

座標指定はこんなプログラムになってます。


doubleは無視して考えてください

sregがtだと考えて

0.038がωだと思えば

t・sinωt

の式に見えてきませんか?


実際sregにはフレーム数が代入されています。


右側の文字ほど遅れさせたいなら、sregにフレーム数の値を代入するときに

右側の分だけ1とか2とか引けば、図のような(後ろにくっついてくるような)感じに出来上がります


sin cos の使いかたって、結構多彩なんですね!

何か滑らかにグラフィックを移動させたいなんて場合にはsin cos をつかってみるのもいいでしょう。

技術解説「ぽんこつ自動車」その1 自動コース作成プログラム

このゲームのプログラムの特徴は何と言っても、「スクロール」


前のフレームの画面を左に10ドットずらしてコピーすれば

あとは


ここの10×480ドット部分だけboxf命令でステージを作成すれば完成。
766776f6.png

これを、ループさせるとステージが進みます。


とても簡単


当たり判定は背景の色で確認しているので、障害物1つ1つの座標なんかも気にしないでok!


つまり障害物用の変数を作らなくて良い、とてもプログラマーに優しいゲームなんですね!


障害物の作り方も簡単。


ここの10×480ドット部分で、boxf命令でステージを作った後、一定確率でまた、boxf命令で四角を作ってあげればいいんですね。


color 200,200,20:boxf 630,0,640,480 ;緑の背景を作成

color 0,0,0:boxf 630,a,640,a+100 ;黒の道を作成

if rnd(50)=0:b=rnd(80):color 200,200,20:boxf 630,a+b,640,a+b+20 ;50分の一の確率で10×20ドットの障害物を作成


メインルーチンはこんなもんです。

aという変数は黒の道の一番上のy座標が代入されている変数です。


これを増減させることで、道も上下します。


道の幅も変化させたいなら100の部分を変数に置き換えてやれば、自分の思い通りにできます。


次回:技術解説「ぽんこつ自動車」その2 GAMEOVER関数

技術解説「ババドン」その5 花火②

実は花火の元となる画像はこんなに汚いです
b5f06338.png
 

これを何枚も加算合成して、光ってる感じを出させてます。


さて、次は花火の「軌道」を確認します。


最初花火の玉が爆発して、放射状に↑の画像(以後パーティクルと呼ぶ)がとびちります。

そのあと、重力の影響を受けながら薄く消えていきます。

好きな人は、空気抵抗とかもお好みでつけたりします。


このプログラムに特殊な命令は必要ありません。全部四則演算で事足ります。


まず用意しなければいけないのは、配列変数です。


しかし、ただの配列ではなくて2次の配列です


今回はx成分、y成分、薄さの値など要素が多いので、1次だと少し不便です(できなくはないが)


dim par,100,5


と、100×5の2次の配列をつくります。


parは花火のパーティクル100個の座標などさまざまなパラメーターを代入する変数です。


X座標、Y座標、Xの速度、Yの速度、寿命。

この5つのパラメーターを2次の配列に記憶させます。


たとえば

par.12.1

と言ったら、花火の12番目のパーティクルのY座標の値のことを意味します


寿命の項目には、花火生成のときあと何フレームで消えるかの数値を入れておいて、まいフレームごとに

値を1ずつ減らしていきます。0になったら、パーティクル消滅とさせます。

(当然変数字体は消滅しないので、描画命令を読ませないプログラムにしろ、ということです)


花火生成プログラムですが、火薬玉爆発の瞬間は花火のパーティクルの位置は同じなので、同じ値を代入しておきます。


そして放射状に吹き飛ぶようにしたいので、速度のパラメーターのところに、それぞればらばらな値を入れておけばいいんです。


repeat 100

rad=3.1415*rnd(100)*0.02

par.cnt.2=10.0*cos(rad)

par.cnt.3=10.0*sin(rad)

loop


これでパーティクルの初期設定は完了。


あとは毎フレームごとにX座標、Y座標にXの速度、Yの速度を加算していけばいいだけです。


par.cnt.0=par.cnt.0+par.cnt.2

par.cnt.1=par.cnt.1+par.cnt.3


という操作です。


しかしこれでは飛び散ってしまう一方なので

ここで、重力の概念をプログラム化します。


重力は下に働くのでYの速度を毎フレームごとに1とか2プラスしてあげれば

パーティクルの動きが放物線になります。


par.cnt.3+=2


最後に寿命ですが

加算合成の合成%をgmodeで指定するとき、寿命の数値が小さくなればなるほど合成%も小さくなるように

指定します。


そうすれば、花火の先が徐々に薄くなっていくプログラムも完成です。



次回:  不明・・・

技術解説「ババドン」その4 花火①

ネタバレ注意!

ババドンのエンディングの詳細について書いてあります。エンディングを楽しみにしている人は読まないほうがいいです!




いきなりですがエンディングの話です。


多分もう皆さんババドンは1週クリアしてるという前提で話していきます!


エンディングの最後のほうに、UFOがババドン星に着陸した後、花火が上がるシーンありますよね?


今回はその花火について解説します。


その前に・・・

プログラミング初心者の方はよく聞いてほしいのですが、画像を描画する画像処理命令(gcopy)には大まかに分けて6種類のモードがあります。


①透明色なしの単純なコピー

②透明色ありのコピー

③半透明コピー

④加算合成コピー

⑤減算合成コピー

⑥アルファーブレンドコピー


すべて説明すると大変ですが、最低でも①②③④はマスターしましょう。


そして花火には④の加算合成コピーが使われてます。


加算合成コピーとは、色のコードRGBの値を足してコピーするので加算合成と言いますが、

使いどころが分からない人もいるのでは?


加算合成はよく、「光るもの」を再現するときに使います。


花火なんかも光ってる感じが出せればきれいに見えますよね?


まぁ、ババドンのエンディングにある花火は綺麗なのか微妙ですけど。・・・


「光るもの」と言えば、宇宙から見たキラキラ星なんかもCGなどでよくみるシーンですよね。

あれは加算合成でないと説明がつきません。


ほかにも、爆発モーションとかも加算合成にしたほうがきれいになる場合があります。


花火の話に戻しますが、・・・一応これも2日にわけて説明してみたいと思います。


続きは次回です


次回:技術解説「ババドン」その5 花火②

プロフィール

toropippi

記事検索
アクセスカウンター

    QRコード
    QRコード
    • ライブドアブログ