wake-up-neo.com

Wie binde ich Bilder richtig in Actionscript 3/Flex 3 ein?

Ich erstelle ein Spiel, in dem viele Bilder in Actionscript/Flex 3 (Flash) verwendet werden. Jetzt, da ich das Design-Stadium erreicht habe, muss ich eine strukturelle Methode zur Verwendung eingebetteter Bilder ausarbeiten (die mit Rotation, Farbe usw. bearbeitet werden müssen).

Leider sieht es nach einigen Nachforschungen so aus, als müssten Sie Bilder manuell einbetten, bevor Sie sie verwenden können. Ich habe es derzeit so eingerichtet:

Ressource.as Klassendatei:

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

Also, nur für ein Schiff muss ich:

Legen Sie das Bild im richtigen Ordner mit dem richtigen Namen ab. Benennen Sie es in der Datei Resource.as auf die gleiche Weise. Erstellen Sie die Konstante mit dem gleichen Namen in der Datei Resource.as

Auch wenn dies alles möglich sein sollte, indem Sie die Datei einfach in einen bestimmten Ordner legen.

Um es noch schlimmer zu machen, muss ich es immer noch so nennen:

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

Muss es bessere Möglichkeiten geben, mit Ressourcen umzugehen, wenn sehr große Anwendungen erstellt werden? Stellen Sie sich vor, ich brauche Tausende von Bildern, dieses System würde einfach nicht passen.

13
Tom

anstatt 

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

Benutzen

myImage.source = Resource.SHIPS_1;

Die Einbettung ist korrekt. : D Die Art, wie Sie es verwenden, ist falsch :)

Adrian

6

Wenn Sie mit einer großen Anzahl von Ressourcen arbeiten müssen, können Sie diese 3 Schritte ausführen:

  1. Legen Sie sie in ein unkomprimiertes Zip-Archiv

  2. Betten Sie die Zip-Datei als Binärdaten ein:

    [Einbetten (source = 'resources.Zip', mimeType = 'application/octet-stream'))]

  3. Zugriff auf die Ressourcen mit FZip

Wenn Sie sich für eine andere Methode entscheiden, die das Laden externer Dateien umfasst, müssen Sie beachten, dass einige Flash-Spiele-Websites erfordern, dass die von ihnen gehosteten Spiele in einer einzigen SWF-Datei enthalten sind.

16
gmj

Dafür gibt es eigentlich Flash CS4. Ihr Weg scheint mir jedoch gut zu sein - obwohl ich nicht alle Caps für einen Klassennamen verwenden würde, selbst wenn es eine Konstante ist. Legen Sie einfach Ihren Kopf ab und lassen Sie sich kopieren!

Alternativ können Sie die Dateien zur Laufzeit laden.

5
Iain

Ich habe mir gerade dieses großartige Tutorial über das Starling-Framework angesehen: http://www.hsharma.com/tutorials/startingwithwith-starling-ep-3-Sprite-sheets/

Es klingt, als ob Spritesheets genau das sind, wonach Sie suchen: Sie bündeln alle Ihre individuellen Texturen in einer großen Textur, die als Spritesheet bezeichnet wird, und erstellen eine XML-Datei, die Informationen darüber enthält, wo sich die Texturen im Spritesheet befinden. Dazu können Sie dieses Tool verwenden: http://www.codeandweb.com/texturepacker

Ich bin nicht sicher, ob Sie es für kommerzielle Projekte verwenden können, und die Anzahl der Texturen, von denen Sie sprechen, klingt nicht nach einem Hobby, Sie möchten also die Lizenz überprüfen. Es gibt auch eine Pro-Version.

Texturepacker erstellt zwei Dateien: spritesheet.png und spritesheet.xml. Sie kopieren sie einfach in Ihr Projekt. Dann fügen Sie diesen Code einer Ihrer Klassen hinzu.

    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;
    }

Jetzt können Sie durch Aufruf auf alle Texturen des Spritesheet zugreifen

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

Es ist einfach großartig. Wenn Sie texturepacker verwenden, wird der Dateiname jedes der Sprites, die Sie im Spritesheet gebündelt haben, zu seinem Dateinamen.

Dies ist wahrscheinlich zu spät, um Ihnen zu helfen, aber ich hoffe, dass zukünftige Besucher von dieser eleganten Lösung profitieren können.

Ich möchte betonen, dass diese Antwort im Wesentlichen ein Auszug aus Sharmas Tutorial ist. Ich fühlte mich sogar frei, den in seinem Screencast verwendeten Code zu reproduzieren. Der ganze Kredit geht an ihn

2
lhk

Dies ist alt, aber da ich auf der Suche nach etwas anderem gestolpert bin, schreibe ich hier für zukünftige Generationen:)

Ich verwende einen anderen Ansatz. Ich erstelle einen SWF-Film mit Flash Professional, importiere alle darin enthaltenen Grafiken und markiere sie alle für "Export for ActionScript". Kompilieren Sie die SWF-Datei und binden Sie in Ihrem Hauptprojekt nur die SWF-Datei ein und greifen Sie auf alle Grafiken durch ...

Ich finde diesen Ansatz viel organisierter. Warum sollten Sie die gesamte Ressourcenklasse schreiben, wenn Sie Dateien richtig importieren können? ;)

2

Es hängt davon ab, wie groß Ihre einzelnen Bilder sind, aber Sie können sie alle wie ein Spritesheet in ein Bild einfügen. Wenn Sie ein bestimmtes Schiff zeichnen möchten, verwenden Sie den korrekten XY-Versatz im Bild für dieses Schiff und verwenden Sie copyPixels, um es in Ihre Bitmap zu zeichnen.

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

Ich mache gerne meine Bibliotheksklassen so. 

Ich habe den GSkinners-Code für das Einzelspiel genommen: 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

Gute Idee, lhk

Das ist eine nette Lösung wie Source-Engine mit vtf und vmt Vtf = image Vmt = script (wie xml oder javascript)

Gut, ich würde gerne für TexturePacker, TexturePath oder TextureTarget vorschlagen: P

Vielen Dank für den Tipp.

Zum Beispiel: Mytexture.js:

xML oder Javascript:

function mytexture () {basedir = "/assets/mytexture.png", normalmap = "/assets/mytexture_bump.png", normalcube) [1, 1, 1]};

Ich glaube nicht, dass die Standardtextur irgendwo fehlerhaft ist und mytexture.png nicht existiert, als dass es wieder passiert :)

[Embed (source = "../ assets/editorors/error_texture.png")] public static Const ERROR_TEX: Klasse; ...

Woher weiß ich, dass Actionscript 3 Javascript wie jsBirdge oder ExternalInterface.call () "lesen" soll;

Ist es möglich?

0
SourceSkyBoxer

[Einbetten (source = "/ assets/images/123.png")] Public static const className: Class;

0
user1099934