web-dev-qa-db-ja.com

Actionscript 3 / Flex 3に正しい方法で画像を埋め込む方法は？

Actionscript/Flex 3（Flash）で多くの画像が使用されているゲームを作成しています。デザイナーの段階に達したので、埋め込まれた画像を使用する構造的な方法を考え出す必要があります（回転や色などで操作する必要があります）。

残念ながら、少し調べてみると、画像を使用する前に手動で画像を埋め込む必要があるようです。私は現在、次のように設定しています。

Resource.asクラスファイル：

package
{
    public final class Resource
    {
        [Embed (source="/assets/ships/1.gif" )]
        public static const SHIPS_1:Class;
    }
}

だから、1隻の船のためだけに私はそうしなければなりません：

画像を正しい名前の正しいフォルダに配置します。Resource.asファイルでも同じように名前を付けます。Resource.asファイルで同じ名前の定数を作成します。

これはすべて、ファイルを指定されたフォルダーに置くだけで可能になるはずですが。

さらに悪いことに、私はまだそれを使用して呼び出す必要があります：

var test:Bitmap = new Resource.SHIPS_1();

非常に巨大なアプリケーションを作成するときに、リソースを処理するためのより良い方法が必要ですか？何千もの画像が必要だと想像してみてください。このシステムは単純に適合しません。

actionscript-3imageflex3resourcesembedded-resource
13
Tom

の代わりに

var test:Bitmap = new Resource.SHIPS_1();

使用する

myImage.source = Resource.SHIPS_1;

埋め込みは正しいです。 ：Dあなたの使い方は間違っています:)

アドリアン

6
Adrian Pirvulescu

多数のリソースを処理する必要がある場合は、次の3つの手順に従うことができます。

  1. それらを非圧縮のZipアーカイブに配置します

  2. Zipファイルをバイナリデータとして埋め込みます。

    [Embed（source = 'resources.Zip'、mimeType = 'application/octet-stream'）]

  3. FZip を使用してリソースにアクセスします

外部ファイルのロードを含む別の方法を選択する場合、一部のフラッシュゲームWebサイトでは、ホストするゲームを単一のswfファイルに含める必要があることに注意してください。

16
gmj

これがFlashCS4の目的です。あなたのやり方は私には問題ないように思えますが、クラス名が定数であっても、すべて大文字を使用するわけではありません。頭を下げてコピー貼り付けをしてください！

または、実行時にファイルをロードすることもできます。

5
Iain

Starlingフレームワークに関するこのすばらしいチュートリアルを見たばかりです： http://www.hsharma.com/tutorials/starting-with-starling-ep-3-Sprite-sheets/

スプライトシートはまさにあなたが探しているもののようです。個々のテクスチャをすべてスプライトシートと呼ばれる1つの大きなテクスチャにバンドルし、テクスチャがスプライトシート内にある情報を含むxmlファイルを作成します。これを行うには、このツールを使用できます： http://www.codeandweb.com/texturepacker

商用プロジェクトに使用できるかどうかはわかりませんが、話しているテクスチャの量は趣味のように聞こえないので、ライセンスを確認することをお勧めします。プロバージョンもあります。

Texturepackerは、spritesheet.pngとspritesheet.xmlの2つのファイルを作成します。それらをプロジェクトにコピーするだけです。次に、このコードをクラスの1つに追加します。

    private static var gameTextureAtlas:TextureAtlas;

    [Embed(source="../media/graphics/mySpriteSheet.png")]
    public static const AtlasTextureGame:Class;

    [Embed(source="../media/graphics/mySpritesheet.xml", mimeType="application/octet-stream")]
    public static const AtlasXmlGame:Class;

    public static function getAtlas():TextureAtlas
    {
        if(gameTextureAtlas==null)
        {
            var texture:Texture=getTexture("AtlasTextureGame");
            var xml:XML=XML(new AtlasXmlGame());
            gameTextureAtlas=new TextureAtlas(texture,xml);
        }
        return gameTextureAtlas;
    }

これで、を呼び出すことでスプライトシートのすべてのテクスチャにアクセスできます

YourClass.getAtlas().getTexture("name");

それは単に素晴らしいです。 texturepackerを使用している場合、スプライトシートにバンドルした各スプライトのファイル名がそのtexturenameになります。

これはおそらくあなたを助けるには遅すぎますが、将来の訪問者がこのエレガントなソリューションから利益を得ることができることを願っています。

この答えは基本的にシャルマのチュートリアルからの抜粋であることを強調したいと思います。彼がスクリーンキャストで使用したコードを自由に再現することさえできました。すべてのクレジットは彼に行きます

2
lhk

これは古いですが、何か違うものを探して見つけたので、将来の世代のためにここに書きます:)

私は別のアプローチを使用します。 Flash Professionalを使用してswfムービーを作成し、その中にすべてのグラフィックをインポートしてから、「ActionScriptにエクスポート」のマークを付けます。 swfをコンパイルし、メインプロジェクトにswfのみを埋め込み、それを介してすべてのグラフィックにアクセスします...

このアプローチはもっと組織化されていると思います。ファイルを正しくインポートして作成できるのに、なぜリソースクラス全体を作成するのですか？ ;）

2
Viktor Sterbinski

個々の画像の大きさにもよりますが、スプライトシートのようにすべてを1つの画像にまとめることができます。特定の船を描画する場合は、その船の画像で正しいxyオフセットを使用し、copyPixelsを使用してビットマップに描画します。

1
John
package
{
    public final class Resource
    {
        [Embed (source="/assets/ships/1.gif" )]
        public static const SHIPS_1:Class;
    }
}
1
user1099934
[Embed (source="/assets/ships/1.gif" )]
    public static const SHIPS_1:Class;
0
user1099934

私はこのような図書館の授業をするのが好きです。

シングルトンのGSkinnersコードを取得しました： http://gskinner.com/blog/archives/2006/07/as3_singletons.html

package
{
    import flash.display.Bitmap;
    import flash.display.BitmapData;

    public class Lib
    {
        /*
        Make this an Singleton, so you only load all the images only Once 
        */

        private static var instance:Lib;
        public static function getInstance():Lib {
            if (instance == null) {
                instance = new Lib(new SingletonBlocker());
            }
            return instance;
        }
        public function Lib(p_key:SingletonBlocker):void {
            // this shouldn't be necessary unless they fake out the compiler:
            if (p_key == null) {
                throw new Error("Error: Instantiation failed: Use Singleton.getInstance() instead of new.");
            }
        }

        /*
        The actual embedding 
        */
        [Embed(source="assets/images/someImage.png")]
        private var ImageClass:Class;
        private var _imageClass:Bitmap = new ImageClass() as Bitmap;

        [Embed(source="assets/images/someOtherImage.png")]
        private var OtherImageClass:Class;
        private var _otherImageClass:Bitmap = new ImageClass() as Bitmap;

        public function get imgClass():Bitmap{
            return _imageClass;
        }
        public function get imgClassData():BitmapData{
            return _imageClass.BitmapData;
        }

        public function get otherImageClass():Bitmap{
            return _otherImageClass;
        }
        public function get otherImageClassData():BitmapData{
            return _otherImageClass.BitmapData;
        }
    }
}
internal class SingletonBlocker {}
0
Pjetr

いい考えだ、lhk

これは、vtfとvmtを使用したSource-Engineのような優れたソリューションです。vtf= image vmt = script（xmlやjavascriptなど）

TexturePacker、TexturePath、またはTextureTargetに提案したいのは良いことです：P

チップをありがとう。

例：mytexture.js：

xmlまたはjavascript：

function mytexture（）{basedir = "/assets/mytexture.png"、normalmap =" /assets/mytexture_bump.png"、normalcube）[1、1、1]};

デフォルトのテクスチャがどこかでエラーになるので、mytexture.pngが存在しないので、再び発生するとは思いません:)

[Embed（source = "../ assets/editors/error_texture.png"）] public static const ERROR_TEX：Class; .。

Actionscript 3はjsBirdgeやExternalInterface.call（）のようなjavascriptに「読み取る」必要があるため、どうすればわかりますか。

出来ますか？

0
SourceSkyBoxer

[埋め込み（source = "/ assets/images/123.png"）] public static const className：Class;

0
user1099934