Nanashi-soft○プログラマ専用○PSSuite開発○

◇PS Suite開発 -２Ｄ画像表示-

付属サンプルを使用して２Ｄ画像表示を行ってみます
日本語表示の時に使用した。サンプルの SampleSpriteクラスを使用します

背景用の jpegファイルと，キャラ用の pngファイル(投下付き)を用意しました
それぞれ，benchi.jpgと twinhalf_egao.pngとします
これは Unity3Dで実際にテストで使用したファイルです

・↓の説明通りに，SampleDraw.csと SampleSprite.csをコピーして修正
pssuite003.html

・背景にするjpgファイルと，その前に表示するキャラpngファイルを用意する
いつものように，プロジェクトにファイルを追加して，右クリックでビルドアクションを Contentに設定

・テクスチャークラスとスプライトクラスを定義
AppMainクラス宣言の下に追加
	public class AppMain
	{
		private static GraphicsContext graphics;
		static Texture2D haikei;		//追加
		static Texture2D chara;			//追加
		static SampleSprite sprite_haikei;	//追加
		static SampleSprite sprite_chara;	//追加

・CGを起動時に読み込む
Initializeの最後に以下を追加
			haikei = new Texture2D("/Application/benchi.jpg", false);
			haikei.SetWrap(TextureWrapMode.ClampToEdge);
			chara = new Texture2D("/Application/twinhalf_egao.png", false);
			chara.SetWrap(TextureWrapMode.ClampToEdge);

			sprite_haikei = new SampleSprite(haikei, 0.0f, 0.0f, 0.0f, 1.0f);
			sprite_chara = new SampleSprite(chara, 0.0f, 0.0f, 0.0f, 1.0f);
オーバーロードも色々ありますので，SampleSprite.csのソースを見ると良いでしょう
ここでは，SampleSprite(テクスチャー,X座標,Y座標,回転角,拡大・縮小率)を使用しました
ソースを見ればわかりますが，単なるプロパティなので，後で変更可能です

・終了時に破棄する
Mainの最後に以下を追加
			sprite_haikei.Dispose();	//追加
			sprite_chara.Dispose();	//追加
			haikei.Dispose();	//追加
			chara.Dispose();	//追加
			graphics.Dispose();
		}

・描画する
Renderに以下を追加
		public static void Render()
		{
			graphics.Enable(EnableMode.DepthTest);

			graphics.SetViewport(gameLeft, gameTop, gameWidth, gameHeight);
			graphics.SetClearColor(0.0f, 0.0f, 0.0f, 0.0f);
			graphics.Clear();

			SampleDraw.DrawText(scenario, 0xffffff00, usefont, 0, 0);

			SampleDraw.DrawSprite(sprite_chara);	//追加
			SampleDraw.DrawSprite(sprite_haikei);	//追加

			graphics.SwapBuffers();
		}

話の流れ的に，前に記述したビューポートや文字表示と一緒に記述しています
どうも，後に書いた方が前面に表示されるようですので，文字→キャラ→背景の順で記述しました（今後の調整によって変わる可能性はあります）


調整を行っていきます
まずは，画像サイズを画面サイズに合わせます
SampleSpriteクラスを生成する際のコンストラクタで倍率を指定できるので，それを使います

背景画像のサイズを，画面サイズに合わせる比率を計算して，キャラにも適用します
Initializeの sprite_haikei，sprite_charaを生成する部分を修正
//			sprite_haikei = new SampleSprite(haikei, 0.0f, 0.0f, 0.0f, 1.0f);
//			sprite_chara = new SampleSprite(chara, 0.0f, 0.0f, 0.0f, 1.0f);
↓
			float hiritu=(float)gameWidth / (float)haikei.Width;
			sprite_haikei = new SampleSprite(haikei, 0.0f, 0.0f, 0.0f, hiritu);
			sprite_chara = new SampleSprite(chara, 0.0f, 0.0f, 0.0f, hiritu);

そうすると，表示位置がずれていることがわかります
背景だけにしてみるとよくわかります

SampleSpriteのソースを見ると，中心位置の省略は拡大・縮小するとずれる事がわかります。つまり等倍時のみ省略可能です
なので，ちゃんとそこまで指定するコンストラクタに変更します
↓
			float hiritu=(float)gameWidth / (float)haikei.Width;
			sprite_haikei = new SampleSprite(haikei, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, hiritu, hiritu);
			sprite_chara = new SampleSprite(chara, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, hiritu, hiritu);

キャラクター画像の透過が有効になっていないので，αブレンドをオンにします
サンプルは何もしなくても透過されているようなのですが，深度テストをオフにするとそうなるという裏技を使っています（汗
ココではちゃんと，αテストを追加して透過します

OpenGLを思い出しながらメソッドを探して設定すればいいです。そっくりですから
Renderに以下を追加する
			graphics.Enable(EnableMode.DepthTest);
			graphics.SetBlendFunc(BlendFuncMode.Add, BlendFuncFactor.SrcAlpha, BlendFuncFactor.OneMinusSrcAlpha);	//追加
			graphics.SetDepthFunc(DepthFuncMode.LEqual, true);	//追加

そうするとα透過が有効になります
そして，なぜか記述した後ろから描画されていたのが，きちんと（？）前から順番に描画されるようになりました
ので，順序を逆にします
//			SampleDraw.DrawText(scenario, 0xffffff00, usefont, 0, 0);
//			SampleDraw.DrawSprite(sprite_chara);
//			SampleDraw.DrawSprite(sprite_haikei);
↓
			SampleDraw.DrawSprite(sprite_haikei);
			SampleDraw.DrawSprite(sprite_chara);
			SampleDraw.DrawText(scenario, 0xffffff00, usefont, 0, 0);

実行してみるとちゃんと文字も透過されるようになりました
これで jpeg，透過付きpng，そして文字列が描画可能になりました

○TOP○プログラマ専用○PSSuite開発○

Melonbooks DL