7

非常に基本的なスプライト画像を作成しようとしています。

まず、既存の画像（Width = 100px、Height = 100px）があります。

この画像を10〜100回ループし、そのたびに前の画像の隣のスプライトに配置します。

スプライトの幅は3000pxに制限されています。

画像を並べて配置するのは問題ありません。簡単な方法で画像を組み合わせることができますが、組み合わせる画像の幅を3000ピクセルに制限してから、新しい行から始める必要があります。

4

4 に答える 4

7

次の MSDN 記事には、2D スプライトに関する多くの情報があります: Rendering 2D sprites

これらの例は、Windows、Windows Phone、および XBOX 360 向けのゲームを開発するために Visual Studio 内で使用できるプラットフォームであるMicrosoft の XNAに基づいています。

たとえば、スプライトを描画するには、次の C# コードを使用できます (例は MSDN 記事から抜粋、XBOX 360 固有のコードは削除されています)。

private Texture2D SpriteTexture;
private Rectangle TitleSafe;

    protected override void LoadContent()
    {
        // Create a new SpriteBatch, which can be used to draw textures.
        spriteBatch = new SpriteBatch(GraphicsDevice);
        SpriteTexture = Content.Load<Texture2D>("ship");
        TitleSafe = GetTitleSafeArea(.8f);
    }

    protected Rectangle GetTitleSafeArea(float percent)
    {
        Rectangle retval = new Rectangle(
            graphics.GraphicsDevice.Viewport.X,
            graphics.GraphicsDevice.Viewport.Y,
            graphics.GraphicsDevice.Viewport.Width,
            graphics.GraphicsDevice.Viewport.Height);
        return retval;
    }

    protected override void Draw(GameTime gameTime)
    {
        graphics.GraphicsDevice.Clear(Color.CornflowerBlue);
        spriteBatch.Begin();
        Vector2 pos = new Vector2(TitleSafe.Left, TitleSafe.Top);
        spriteBatch.Draw(SpriteTexture, pos, Color.White);
        spriteBatch.End();
        base.Draw(gameTime);
    }

LoadContent()それを初期化するために呼び出す必要があります。次にGetTitleSafeArea(100)、安全な描画領域 (この場合は 100%) を取得するために呼び出す必要があります。最終的にDrawメソッドを使用できます。クラスのインスタンスを含むパラメーターを受け取りますGameTime。これは、可変ステップ (リアルタイム) または固定ステップ (ゲーム時間) ゲームで使用できる値で表されるゲーム タイミング状態のスナップショットです。

それがあなたを助けるかどうか私に知らせてください。

于 2012-06-29T13:35:48.240 に答える
3

いくつかの擬似コードを試してみましょう:

Bitmap originalImage; //  that is your image of 100x100 pixels
Bitmap bigImage;      //  this is your 3000x3000 canvas
int xPut = 0;
int yPut = 0;
int maxHeight = 0;
while (someExitCondition) 
{
    Bitmap imagePiece = GetImagePieceAccordingToSomeParameters(originalImage);
    if (xPut + imagePiece.Width > 3000)
    {
        xPut = 0;
        yPut += maxHeight;
        maxHeight = 0;
    }
    DrawPieceToCanvas(bigImage, xPut, yPut, imagePiece);
    xPut += imagePiece.Width;
    if (imagePiece.Height > maxHeight) maxHeight = imagePiece.Height;
    //  iterate until done
}
于 2012-06-29T11:58:15.453 に答える
2

機能するアプローチは、スプライトのフレームをビットマップ内の任意の場所に配置できるようにし (そうすることで、フレームをよりコンパクトにすることができます)、各ビットマップに、各フレームの位置、サイズ、および原点を記述した (n xml) ファイルを添付することです。すべてのアニメーションのリストがあります。このようなもの：

<SpriteSheet>
    <Frames>
        <Frame id="0" location="20,40" size="64,64" origin="32,32" />
        <Frame id="1" location="100,40" size="64,64" origin="32,32" />
        <Frame id="2" location="164,40" size="64,64" origin="0,0" />
        <Frame id="3" location="20,120" size="64,64" origin="32,32" />
    </Frames>
    <Animations>
        <Animation name="walk left" >
            <Keyframes>
                <Keyframe frameId="0" duration="0:0:0.5" offset="-5,0" />
                <Keyframe frameId="1" duration="0:0:0.5" offset="-5,0" />
                <Keyframe frameId="2" duration="0:0:0.4" offset="-2,0" />
                <Keyframe frameId="1" duration="0:0:0.5" offset="-5,0" />
            </Keyframes>
        </Animation>
        <Animation name="walk right" >
            <Keyframes>
                <Keyframe frameId="5" duration="0:0:0.5" offset="5,0" />
                <Keyframe frameId="6" duration="0:0:0.5" offset="5,0" />
                <Keyframe frameId="2" duration="0:0:0.4" offset="2,0" />
                <Keyframe frameId="6" duration="0:0:0.5" offset="5,0" />
            </Keyframes>
        </Animation>
    </Animations>
</SpriteSheet>

このようにして、アニメーション間でフレームを再利用し (ビットマップ サイズをさらに最適化)、XML ファイルを編集するだけでアニメーションをカスタマイズできます。

XML ファイルを読み取り、ビットマップを読み取り、アニメーションを開始するときに、一定の間隔で時を刻むタイマーを開始するだけです。それが刻むとき、キーフレームの持続時間を 1 つずつ追加し、合計が刻み時間よりも長くなったときに停止することで、アニメーションの正しいキーフレームを計算します。現在のキーフレームを使用する必要があります。

上記の XML ファイルに、アニメーション中にスプライトの位置を変更できるオフセットなどを追加しました (滑らかに動くように補間することもできます)。

あとは、ビットマップから正しいフレームを取得するだけです。最適化として、フレームを取得し、それらを小さなビットマップとして保持し、大きなビットマップを破棄することにより、XML ファイルをロードするときにビットマップを前処理することができます。これにより、ビットマップが大きく、フレームで完全に覆われていない場合にメモリが最適化される場合があります。

それ以外の場合は、前処理せずにフレームをブリットするだけです。

大規模なアプリケーション (より多くのビットマップ/アニメーション/フレーム) の場合、XML ファイルを作成および編集するアプリを作成することをお勧めします。別のオプションとして、お気に入りのペイント プログラムのプラグインを作成することもできます (可能であれば)。

于 2012-07-02T13:15:00.480 に答える
2

変数を 3000 で宣言します。幅 250 の画像を配置する場合、変数からそれを取り除きます。これを続けます。これにより、次の画像のためにその行に十分なスペースが残っているかどうかを判断することもできます。左は次の画像の幅よりも大きいです。新しい行を開始するたびに、変数を 3k に戻して、最初からやり直してください。解決した

于 2012-05-04T15:34:49.773 に答える