投稿記事

2019年 02月の記事 (4)

Heliodor 2019/02/28 19:24

アルファブレンドの罠

プログラムの話です。

アルファブレンド、といえばゲームを作る上で欠かせない合成方法ですよね。RGBでのカラーチャンネルに加えてアルファチャンネルを使う、アレです。
Photoshopだと「通常」という合成方法がそれなのですが、実はゲームでいうアルファ合成と、Photoshopのアルファブレンドは合成に使う計算式が微妙に異なります。

Photoshopの合成は正統派のアルファブレンドですが、DirectXとかOpenGLのアルファブレンドは簡易版です。背景画像に対して前景画像を重ねるとすると、正統派の方法では背景アルファと前景アルファの両方を考慮して合成後の色を決めますが、簡易版だと前景アルファだけ使い、背景アルファは無視します。また、合成後のアルファ値も異なります。正統派合成ではアルファの計算とRGBの計算には異なる式を使いますが、ゲームでの合成にはアルファとRGB全てで同じ式を使います。
わざわざ分けるのも面倒だし、アルファもRGBと同じ計算で合成しちゃおう、みたいな。

ちなみにアルファとRGBで異なる合成式を使いたい場合はセパレートブレンドという機能を使います(必ず使えるという保証はありません。利用可能かどうかは、DirectXなら D3DRS_SEPARATEALPHABLENDENABLE の値をチェックします)

これは個人的な想像ですが、こうなった理由は簡易版の式でも充分期待通りのRGBが得られるのと、そもそも画面の背景のアルファ値を考慮する必要がない、背景のアルファ値をキッチリ計算する必要がないからだと思います。画面の背景というのは文字通り一番奥の絵ですから、それが半透明になったとして一体何が透けてみえるの?という状況になるだけなんですよね。背景のアルファは使う機会がないんです。常に完全不透明扱いでOKですから。

ただ、これは画面をアルファ付きのスケリーンショットとして保存して、これを別の画像にアルファ合成しようとした時に問題になります。画面のアルファ値がわりと適当な値になっているので、思った通りには合成できません。

プログラムで、完全透明の背景に半透明の画像を何枚か重ねたものをpngで出力したものと、Photoshopで完全透明の背景に半透明のレイヤーを重ねたものをpngで出力したものは異なるという事です。

これをPhotoshopと同じ方法で合成させようとしたら自分でシェーダープログラムを書いて使うしかないので、気をつけてください(セパレートブレンドを使っても無理だったハズ)。

※ちなみにこれはDirectX9での話です。最新版だとどうなんですかね?

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

Heliodor 2019/02/22 18:09

イラスト練習中

例によって全体図はフォロワー以上限定です。

フォロワー以上限定無料

まずは無料プランで様子見を。 お気軽にフォローしてみて下さい。

無料

【 500円 】プラン以上限定 支援額:500円

このバックナンバーを購入すると、このプランの2019/02に投稿された限定特典を閲覧できます。 バックナンバーとは?

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

Heliodor 2019/02/13 18:21

XPサポート

WindowsXPのサポートがどんどん隅に追いやられています

たまーーに、XPでうまく動かないという報告があったりするので、表向きは動作環境にXPと書いていなくてもこっそりサポートはしていたのですが……。

かなり前から古い関数を使っていると警告が出るようになってはいましたが、数年前ぐらいからデフォルトではXP向けに作ったプログラムのビルドができなくなりました。
Visual Studio 2018 にしてからは、ビルドするたびに XP向けプログラムのサポートは近く打ち切られます的なメッセージが出るようになってます。

確かに、いつビルドできなくなってもおかしくないんですよね。まあ、開発環境をアップデートせずに残しておけば良い話ではあるのですが。

思えばXPも既に20年前のヤツです。もう……いいかな……。

フォロワー以上限定無料

本文とは関係無いおまけです

無料

【 500円 】プラン以上限定 支援額:500円

おまけのおまけ、動くお尻です

このバックナンバーを購入すると、このプランの2019/02に投稿された限定特典を閲覧できます。 バックナンバーとは?

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

Heliodor 2019/02/08 17:32

あまり参考にならないエフェクトの描き方

絵的なエフェクト(今回は土煙)の話です。

エフェクト類を全部自前で用意すると大変過ぎるので、フリー素材で丁度よさそうなものがある場合はそれを積極的に使用させて頂いています。
フリー素材でどうにもならない場合はプログラム的に画像を変形させたりパーティクルを飛ばしたりで結構何とかなります。

それでもどうにもならないものはどうするか?
アフターエフェクトやUnityのアセットを扱えるなら気合入れて作るのもいいと思いますが、私の場合は幸い2Dドット絵のゲームなので、そこまで力を入れなくても誤魔化せるので手描きでなんとかしてます。


今回はこれ、漫画やアニメでよく見る、いかにもダッシュ全開という感じの土煙です。こういうエフェクトが欲しい。


要するに「爆発的に後方に広がってモヤッと消える」だけです。
(言うは易しですが……)
というわけでそれっぽい形のアニメーションを単色ドットで描いていきます。



次に色を付けます。どうせ後でぼかしを掛けるので大雑把です。



実際にアニメーションさせてみて形を調整したり、足りないコマを描き足していきます。(今回は主に後半の消え際を描き足しています)


最終的に7枚のアニメになりましたが、この枚数でも案外それっぽく見えるものです。
細かい部分はおかしいかもしれませんが表示されるのは一瞬ですし、誰もエロ同人ゲーで土煙の良し悪しなんて気にしません。それっぽいのが出てればいいんですw

最後に軽くぼかしを掛けてもう少し煙っぽくします。
ね、簡単でしょ?


キッチリと全部ドットでエフェクトを描いているゲームならぼかしを掛けない方がキャラとの統一感が出ていいかもしれません。
まあその場合はもう少ししっかり描き込む必要がありそうですが……。


そしてこれが実際の画面でどう見えるか?

フォロワー以上限定特典、初公開(だったと思う)の実際に動いているゲーム画面動画です。(……と言っても主人公が走り回っているだけですがw)

フォロワー以上限定無料

まずは無料プランで様子見を。 お気軽にフォローしてみて下さい。

無料

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

月別アーカイブ

記事のタグから探す

限定特典から探す

記事を検索