web-dev-qa-db-fra.com

Comment intégrer les images correctement dans Actionscript 3/Flex 3?

Je crée un jeu dans lequel de nombreuses images sont utilisées dans Actionscript/Flex 3 (Flash). Maintenant que j'ai atteint le stade de concepteur, je dois mettre au point une méthode structurelle d'utilisation des images incorporées (qui doivent être manipulées avec rotation, couleur, etc.).

Malheureusement, après un peu d’investigation, il semble que vous deviez incorporer manuellement des images avant de pouvoir les utiliser. Je l'ai actuellement configuré comme ceci:

Fichier de classe Resource.as:

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

Donc, juste pour un navire, je dois donc:

Placez l'image dans le dossier approprié portant le nom correct. Nommez-la de la même manière dans le fichier Resource.as. Créez la constante portant le même nom dans le fichier Resource.as.

Même si cela devrait être possible, il suffit de placer le fichier dans un dossier spécifié.

Pour aggraver les choses, je dois encore l'appeler en utilisant:

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

Il doit y avoir de meilleures façons de gérer les ressources lors de la création de très grandes applications? Imaginez que j'ai besoin de milliers d'images, ce système ne conviendrait tout simplement pas.

actionscript-3imageflex3resourcesembedded-resource
13
Tom

au lieu de 

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

Utilisation

myImage.source = Resource.SHIPS_1;

L'incorporation est correcte. : D la façon dont vous l'utilisez est fausse :)

Adrian

6
Adrian Pirvulescu

Si vous devez gérer un grand nombre de ressources, vous pouvez suivre ces 3 étapes:

  1. Placez-les dans une archive Zip non compressée

  2. Incorporer le fichier Zip en tant que données binaires:

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

  3. Accéder aux ressources en utilisant FZip

Si vous choisissez une méthode différente impliquant le chargement de fichiers externes, sachez que certains sites Web de jeux flash exigent que les jeux qu'ils hébergent soient contenus dans un seul fichier swf.

16
gmj

C’est vraiment à cela que sert Flash CS4. Votre voie me semble cependant bonne - bien que je n’utiliserais pas une majuscule pour un nom de classe, même si c’est une constante. Posez simplement votre tête et faites du copier-coller!

Sinon, vous pouvez charger les fichiers au moment de l'exécution.

5
Iain

Je viens de regarder ce super tutoriel sur le framework Starling: http://www.hsharma.com/tutorials/starting-with-starling-ep-3-Sprite-sheets/

Il semble que les feuilles de sprites correspondent exactement à ce que vous recherchez: Vous regroupez toutes vos textures individuelles dans une seule et grande texture appelée spritesheet et créez un fichier xml contenant des informations contenant les textures dans la feuille de sprites. Pour ce faire, vous pouvez utiliser cet outil: http://www.codeandweb.com/texturepacker

Je ne suis pas sûr que vous puissiez l'utiliser pour des projets commerciaux et la quantité de textures dont vous parlez ne semble pas être un passe-temps, alors vous voudrez peut-être vérifier la licence. Une version pro est également disponible.

Texturepacker crée deux fichiers: spritesheet.png et spritesheet.xml. Vous venez de les copier dans votre projet. Ensuite, vous ajoutez ce code à l’une de vos classes.

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

Maintenant, vous pouvez accéder à toutes les textures du spritesheet en appelant

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

C'est tout simplement génial. Lorsque vous utilisez texturepacker, le nom de fichier de chacun des sprites intégrés à la feuille de sprites devient son nom de texture.

C’est probablement trop tard pour vous aider, mais j’espère que les futurs visiteurs pourront profiter de cette solution élégante.

Je tiens à souligner que cette réponse est essentiellement un extrait du didacticiel de Sharma. Je me suis même senti libre de reproduire le code qu'il avait utilisé dans son screencast. Tout le mérite lui revient

2
lhk

C’est vieux, mais depuis que j’ai trébuché à la recherche de quelque chose de différent, j’écrirai ici pour les générations futures:)

J'utilise une approche différente. Je crée un film swf avec flash professional et importe tous les graphiques qu'il contient, puis les marque tous comme "Exporter pour ActionScript". Compilez le fichier swf et, dans votre projet principal, intégrez uniquement le fichier swf et accédez à tous les graphiques. ...

Je trouve cette approche beaucoup plus organisée. Pourquoi écrire toute la classe de ressources quand vous pouvez le créer en important les fichiers correctement? ;)

2
Viktor Sterbinski

Cela dépend de la taille de vos images, mais vous pouvez toutes les regrouper dans une même image, comme une feuille de style. Si vous souhaitez dessiner un navire particulier, utilisez le décalage xy correct dans l'image de ce navire et utilisez copyPixels pour le dessiner sur votre image bitmap.

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

J'aime faire mes cours de bibliothèque comme ça. 

J'ai pris le code GSkinners pour le singleton: 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

Bonne idée, lhk

C'est une solution intéressante comme Source-Engine avec vtf et vmt Vtf = image Vmt = script (comme xml ou javascript)

Bon, je voudrais suggérer pour TexturePacker, TexturePath ou TextureTarget: P

Merci pour le pourboire.

Par exemple: Mytexture.js:

xml ou javascript:

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

Je ne pense pas que la texture par défaut génère une erreur quelque part. Mytexture.png n'existe pas, mais se reproduit :)

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

Comment puis-je savoir parce qu'Actionscript 3 devrait "lire" en javascript comme jsBirdge ou ExternalInterface.call ();

C'est possible?

0
SourceSkyBoxer

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

0
user1099934