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


◇PS Suite開発 -2D画像表示-

付属サンプルを使用して2D画像表示を行ってみます
日本語表示の時に使用した。サンプルの 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開発

メイナの実験場~ナース服大好き+~ネコミトリ りうるうり -ノーマル-+