スポットライトで照す

XNA でイメージ画像をスポットライトで照らします。

前田稔(Maeda Minoru)の超初心者のプログラム入門

プログラムの説明

  1. ウインドウに表示したイメージ画像をスポットライトで照らしてみましょう。
    ライトで照らされた所だけが、見えるようになります。
  2. 特にサイズは問いませんが、400*300 ピクセル程度の矩形を黒で塗りつぶして、中央に白で円を描いた画像を、 白を透明色に設定して PNG 形式で保存して下さい。
    中央の円がスポットライトの部分で、白が透明になりイメージ画像が透けて見えます。
  3. texture はスポットライトに使用するテクスチャです。
    back はスポットライトを当てるイメージ画像のテクスチャです。
    xp, yp はスポットライト画像を切り出すオフセット(先頭からのずれ)で、矢印キーで操作します。
        Texture2D   texture;     // スポットライトに使用するテクスチャ
        Texture2D   back;        // イメージ画像のテクスチャ
        int         xp = 0;      // 窓画像のX位置
        int         yp = 0;      // 窓画像のY位置
        
  4. LoadContent() で画像をロードします。
    ffx2.jpg はスポットライトを当てるイメージ画像で、ファイルから直接入力しています。
    "mado" はスポットライトに使用する画像で mado.png をリソースとして取り込みました。
            protected override void LoadContent()
            {
                // Create a new SpriteBatch, which can be used to draw textures.
                spriteBatch = new SpriteBatch(GraphicsDevice);
    
                // TODO: use this.Content to load your game content here
                back = Texture2D.FromFile(graphics.GraphicsDevice, "c:\\data\\test\\ffx2.jpg");
                texture = Content.Load("mado"); 
            }
        
  5. Update() で矢印キーの操作でスポットライト画像を切り出すオフセットを操作します。
            protected override void Update(GameTime gameTime)
            {
                // ゲームを終了する
                if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed  ||
                    Keyboard.GetState().IsKeyDown(Keys.Escape)) this.Exit();
    
                // TODO: Add your update logic here
                KeyboardState keyState = Keyboard.GetState();
                if (keyState.IsKeyDown(Keys.Left)) xp += 2;
                if (keyState.IsKeyDown(Keys.Right)) xp -= 2;
                if (keyState.IsKeyDown(Keys.Up)) yp += 2;
                if (keyState.IsKeyDown(Keys.Down)) yp -= 2;
    
                base.Update(gameTime);
            }
        
  6. イメージ画像を描画して、スポットライトで照らす Draw() 関数です。
    最初にイメージ画像を描画します。
    イメージ画像の上からスポットライト画像を描画します。
    スポットライト画像はウインドウサイズに合わせて拡大して描画します。
    new Rectangle(0, 0, 800, 600) が受け取り側の矩形領域です。
    new Rectangle(xp, yp, 200, 150) が送り側のスポットライト画像で、受け取り側の矩形に合わせて拡大されます。
    拡大率が大きくなるとスポットライトの円にジャギーが現れます。
    ジャギーが気になるときは、大きなスポットライト画像を使用して下さい。
            protected override void Draw(GameTime gameTime)
            {
                graphics.GraphicsDevice.Clear(Color.CornflowerBlue);
    
                // TODO: Add your drawing code here
                spriteBatch.Begin(SpriteBlendMode.AlphaBlend);
                spriteBatch.Draw(back, new Vector2(0.0f, 0.0f), Color.White);
                spriteBatch.Draw(texture, new Rectangle(0, 0, 800, 600), 
                    new Rectangle(xp, yp, 200, 150), Color.White);
                spriteBatch.End();
    
                base.Draw(gameTime);
            }
        
  7. プログラムを起動して、矢印キーで操作するとスポットライトが動きます。

前田稔(Maeda Minoru)の超初心者のプログラム入門

超初心者のプログラム入門(XNA(C#) game program)