Forums Développement Multimédia

Aller au contenu

- - - - -

Utilisation des tiles/sprites

as3 tiles sprites fichier externe

20 réponses à ce sujet

#1 Winecrack

  • Guests

Posté 29 April 2014 - 15:22 PM

Salut,

Dans le cadre de la création d'un mini jeu personnel, j'aimerais utiliser les tiles d'ici : http://www.spriters-...eets/8/8415.png sur mon jeu, sans devoir tout découper avec Photoshop... (car je veux séparer les éléments) D'ailleurs, ce sera bien plus rapide en un seul fichier.
Puis-je le faire ? Si oui, comment les afficher ?
Puis-je faire le même système par fichiers externes (http://localhost/tiles/mario.png) où Flash irait chercher tout seul comme un grand ce fichier et le décomposerais ?

Merci d'avance,
Winecrack, votre imple disciple...

#2 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6954 messages

Posté 29 April 2014 - 16:10 PM

Salut,

Oui c'est possible, jettes un oeil au wiki ( http://forums.mediab...shplatform/jeux ), en particulier :

http://forums.mediab...ice_-_le_taquin
http://forums.mediab.../fiche_rendus2d

#3 Winecrack

  • Guests

Posté 29 April 2014 - 16:49 PM

Merci Monsieur Spi, mais j'ai tout de même du mal à comprendre le principe à vrai dire... :/

#4 pol2095

  • Members
  • PipPipPipPipPipPipPipPip
  • 1682 messages

Posté 29 April 2014 - 16:56 PM

Il n'y a pas un xml fourni avec qui donne la position en pixels des différents éléments ?

#5 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6954 messages

Posté 29 April 2014 - 17:44 PM

Bah sur quoi bloques-tu ?

Le principe est simple :

1 - charger une feuille de sprites
Voir le chargement de médias externes dans Flash, il suffit d'utiliser un Loader.
Une fois la feuille chargée elle reste en mémoire et tu peux l'utiliser via le loader.

2 - découper la feuille de sprites
Tu récupères ta feuille de sprites en mémoire et tu crée autant de conteneurs que de tuiles différentes.
Pour chaque conteneur tu copie la portion de la feuille de sprite que tu souhaite afficher (voir CopyPixel).
Tu range chaque conteneur dans un tableau et tu as découpé ta feuille de sprite et rangé chacun dans un tableau de stockage.

3 - afficher les sprites selon tes besoins
Tu va chercher dans ton tableau de stockage les sprites dont tu as besoin et tu les affiches.

Un exemple :

// variables
var chargeur:Loader = new Loader();
var textures:Array = [];
var url:String = "";
var tailleTuile:int = 104;
var colonneFeuille:int;
var ligneFeuille:int;
var departTuile:Point = new Point(0, 0);
var textureTuile:BitmapData;
var surfaceTuile:Rectangle;

SpritesSheet("maFeuille.png",32);

// Charge la feuille de sprites
function SpritesSheet(feuille:String, echelle:int){
    tailleTuile = echelle;
    chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE, finCharge);
    chargeur.load(new URLRequest(url + feuille));
}

// A la fin du chargement, découpe et création des tuiles
function finCharge(e:Event):void{
    chargeur.contentLoaderInfo.removeEventListener(Event.COMPLETE, finCharge);
    colonneFeuille = chargeur.content.width / tailleTuile;
    ligneFeuille = chargeur.content.height / tailleTuile;
    // Boucle sur le nombre total de tuiles
    for (var i:int=0; i<colonneFeuille*ligneFeuille; i++){
        textureTuile = new BitmapData(tailleTuile,tailleTuile);
        surfaceTuile = new Rectangle(i % colonneFeuille * tailleTuile, int(i / colonneFeuille) * tailleTuile, tailleTuile, tailleTuile);
        textureTuile.copyPixels(Bitmap(chargeur.content).bitmapData, surfaceTuile, departTuile);
        textures.push(new Bitmap(textureTuile));
    }
    init();
}

function init():void{
    // lancement du jeu
}


Note : l'étape de découpage et de stockage dans un tableau n'est pas forcément nécessaire, il est possible de faire ça directement au moment voulu en allant chercher la bonne position sur la feuille de sprites.

#6 pol2095

  • Members
  • PipPipPipPipPipPipPipPip
  • 1682 messages

Posté 29 April 2014 - 17:50 PM

Il peut aussi utiliser Starling, le résultat sera bien plus performant surtout sur un appareil mobile.

#7 Winecrack

  • Guests

Posté 30 April 2014 - 07:27 AM

Voir le messageMonsieur Spi, le 29 April 2014 - 17:44 PM, dit :

Note : l'étape de découpage et de stockage dans un tableau n'est pas forcément nécessaire, il est possible de faire ça directement au moment voulu en allant chercher la bonne position sur la feuille de sprites.

Bah justement, c'est ça que je veux faire ! :/

#8 pol2095

  • Members
  • PipPipPipPipPipPipPipPip
  • 1682 messages

Posté 30 April 2014 - 07:36 AM

je te donne un lien qui explique comment ça fonctionne avec Starling http://www.flex-tuto...avec-movieclip/

#9 Winecrack

  • Guests

Posté 30 April 2014 - 07:54 AM

Je préfèrerais le faire avec la méthode de Monsieur Spi, car elle est plus célèbre, et donc j'aurais un meilleur support. De plus, il serait plus facile de pirater mon jeu (multijoueur jouable par navigateur) avec ta méthode, en faisant interpreter un mauvais SpriteSheet à l'animation.
Désolé pol2095, merci tout de même de ton aide.

#10 pol2095

  • Members
  • PipPipPipPipPipPipPipPip
  • 1682 messages

Posté 30 April 2014 - 07:59 AM

Peut-être mais tu risques d'avoir une surprise en terme de performances, le gain peut aller de 1 à 100 avec Starling.

#11 Winecrack

  • Guests

Posté 30 April 2014 - 08:29 AM

Avec Starling, est ce que je peux faire une fonction du genre :
getSprite(echelle, lienSpriteSheet, offset) ?

#12 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6954 messages

Posté 30 April 2014 - 21:33 PM

Citation

Peut-être mais tu risques d'avoir une surprise en terme de performances, le gain peut aller de 1 à 100 avec Starling.

Pourquoi ?

Citation

Je préfèrerais le faire avec la méthode de Monsieur Spi, car elle est plus célèbre,

Erreur, on ne doit pas préférer ce qui est célèbre à ce qui marche parfaitement ;-)

Citation

De plus, il serait plus facile de pirater mon jeu (multijoueur jouable par navigateur) avec ta méthode

Quel rapport ?
Que ce soit une méthode ou l'autre il suffit de modifier la feuille de sprites pour changer le look, c'est justement ce que tu cherches à faire ;-)

Citation

Il peut aussi utiliser Starling, le résultat sera bien plus performant surtout sur un appareil mobile.
Oui ou Unity3D ou Flixel ou ...... les IDE/éditeurs/Frameworks pour faire du jeu ne manquent pas, le tout est de savoir pour quoi et pour qui le jeu est fait et comment optimiser la productivité. Le problème de tous ces frameworks c'est qu'il faut avoir une bonne connaissance des mécanismes de base et qu'ils demandent la plupart du temps un certain temps d'apprentissage. Donc pour un petit jeu ce n'est pas forcément plus intéressant que de coder soit même les parties utiles (et redondantes). Il faut aussi voir si on est là pour apprendre ou si on est là pour produire ;-)

Personnellement je trouve plus intéressant d'apprendre une méthode de découpe que tu pourra réutiliser partout, que de me fier à un framework qui le fait à ma place et finalement ne m'apprend rien de nouveau, mais c'est un avis perso.

Par contre j'aimerai bien savoir pourquoi Starling serait plus rapide à découper/afficher une planche qu'une boucle en AS3, je serait curieux de voir un bench là dessus ;-)

#13 pol2095

  • Members
  • PipPipPipPipPipPipPipPip
  • 1682 messages

Posté 30 April 2014 - 21:46 PM

avec la displayList classique on crée plein de bitmap et la fps va baisser rapidement, avec Starling qui est de l'as3 aussi, le bitmap de la feuille de sprite est transmis à la carte graphique une fois, la fps restera à 60 fps sans pb, ça peut-être significatif sur de petites machines.

#14 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6954 messages

Posté 30 April 2014 - 21:59 PM

Citation

avec la displayList classique tu crée plain de bitmap et la fps va baisser rapidement,

??

Non, erreur ce conception là, si tu fais du jeu tu as un seul bitmap de rendu pour tout le jeu et pas tout un tas de clips et de bitmaps superposés.

L'objectif est de ne tracer qu'un seul grand bitmap composé à la volée à l'aide des différentes textures dont tu dispose, c'est le principe autant du rendu 2D ( http://forums.mediab.../fiche_rendus2d ) que du raycasting 2.5D ( http://forums.mediab...e/3d/raycasting ).

L'avantage de Starling c'est qu'il intègre l'utilisation du GPU mais si on regarde le tuto que tu as cité plus haut Starling utilise la même méthode pour la découpe de la feuille de sprites. Par contre là où ça va varier ce n'est pas au niveau de la découpe, mais au niveau du rendu final mais c'est un autre débat.

#15 pol2095

  • Members
  • PipPipPipPipPipPipPipPip
  • 1682 messages

Posté 30 April 2014 - 22:26 PM

copyPixels retourne bien à chaque fois un nouveau bitmapData dans ton exemple, rien de tout cela avec Starling, ou peut-être que je me trompe ?

#16 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6954 messages

Posté 30 April 2014 - 22:35 PM

Dans l'exemple donné plus haut je découpe ma feuille de sprites à l'avance, et je crée un nouveau bitmapData pour chaque "texture" que je découpe, puis je range le tout dans un tableau et à la fin je dessine ce dont j'ai besoin en un seul bitmap composé avec les textures piochées dans ce tableau.

Pour cette partie c'est exactement la même méthode avec Starling (voir : http://www.flex-tuto...cher-une-image/ )

Citation

Dans le code, cela donne ceci:

var bitmap:Bitmap = new mediumguppy_imageSpriteSheet;
var bitmapData:BitmapData = new BitmapData(60, 60);
bitmapData.copyPixels(bitmap.bitmapData, new Rectangle(0, 0, 60, 60), new Point);

Et on construit notre Texutre avec la méthode fromBitmapData:

var texture:Texture = Texture.fromBitmapData(bitmapData);

Ce n'est pas parce que je me sert de plusieurs bitmapData pour pré-découper mes textures dans un conteneur que je vais au final utiliser autant de bitmapData pour faire le rendu définitif du jeu. Là mon but est justement d'avoir à éviter de faire une découpe en temps réel, c'est pour ça que je charge la feuille de sprites, puis la découpe et range soigneusement chaque texture dans un tableau avant de lancer le jeu, ça économise un tas de ressources et j'obtiens le même résultat (un index avec mes textures facilement accessibles), mais je pourrais très bien charger ça à la volée aussi, ça prendrait juste plus de temps ;)

Voici un autre exemple, ici je fais un scrolling, j'utilise bien plusieurs textures à la base, mais un seul bitmap au final :

// scrolling
function scrollTo(x:int,y:int):void{

        // limites et déplacement
        x<0 ? x=0 : x>Xmax ? x=Xmax : X=x;
        y<0 ? y=0 : y>Ymax ? y=Ymax : Y=y;

        var colA:int = x/T;
        var rowA:int = y/T;
        var colB:int = (x+W-1)/T;
        var rowB:int = (y+H-1)/T;
        var startX:int = -x%T;
        var p:Point = new Point(startX,-y%T);

        ecran.lock();
        for (var r:int=rowA; r<=rowB; r++){
                p.x = startX;
                for (var c:int=colA; c<=colB; c++){
                        ecran.copyPixels(textures[map[c+C*r]].bitmapData,tiles,p);
                        p.x +=  T;
                }      
                p.y +=  T;
        }
        ecran.copyPixels(textures[2].bitmapData,tiles,new Point(px-x,py-y));
        ecran.unlock();
}

Fichier(s) joint(s)



#17 pol2095

  • Members
  • PipPipPipPipPipPipPipPip
  • 1682 messages

Posté 30 April 2014 - 22:45 PM

une carte graphique ne fonctionne pas comme ça, si tu fais ça avec Starling tu ne dépasseras pas les 3 fps.

tu ne vas pas créer une texture par image, on crée une texture à partir du bitmapData de la feuille de sprite, et on récupère les différentes images en jouant sur les UV

#18 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6954 messages

Posté 30 April 2014 - 23:03 PM

Et ? :)

Je n'ai pas dit que mon rendu était adapté au GPU, juste que j'utilise un seul bitmap de dessin au final.
Le problème ici n'est pas le rendu, mais la découpe de la feuille de sprites.

#19 Winecrack

  • Guests

Posté 01 May 2014 - 09:11 AM


// variables
var chargeur:Loader = new Loader();
var textures:Array = [];
var url:String = "http://localhost/";
var tailleTuile:int = 64;
var colonneFeuille:int;
var ligneFeuille:int;
var departTuile:Point = new Point(0, 0);
var textureTuile:BitmapData;
var surfaceTuile:Rectangle;
// Charge la feuille de sprites
function SpritesSheet(feuille:String, echelle:int){
tailleTuile = echelle;
chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE, finCharge);
chargeur.load(new URLRequest(url + feuille));
}
// A la fin du chargement, découpe et création des tuiles
function finCharge(e:Event):void{
chargeur.contentLoaderInfo.removeEventListener(Event.COMPLETE, finCharge);
colonneFeuille = chargeur.content.width / tailleTuile;
ligneFeuille = chargeur.content.height / tailleTuile;
// Boucle sur le nombre total de tuiles
for (var i:int=0; i<colonneFeuille*ligneFeuille; i++){
  textureTuile = new BitmapData(tailleTuile,tailleTuile);
  surfaceTuile = new Rectangle(i % colonneFeuille * tailleTuile, int(i / colonneFeuille) * tailleTuile, tailleTuile, tailleTuile);
  textureTuile.copyPixels(Bitmap(chargeur.content).bitmapData, surfaceTuile, departTuile);
  textures.push(new Bitmap(textureTuile));
}
init();
}
 

Erreur : 1046: Ce type est introuvable ou n'est pas une constante de compilation : Event.

#20 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6954 messages

Posté 01 May 2014 - 13:58 PM

Avec l'IDE pas besoin d'importer les classes de base, si tu bosse sur autre chose (Flash Develop par exemple) tu dois importer les classes de bases telles que MovieClip, Event, MouseEvent, .... ici le compilateur hurle car il ne trouve pas la classe Event.

#21 Winecrack

  • Guests

Posté 02 May 2014 - 16:23 PM

Voir le messageMonsieur Spi, le 01 May 2014 - 13:58 PM, dit :

Avec l'IDE pas besoin d'importer les classes de base, si tu bosse sur autre chose (Flash Develop par exemple) tu dois importer les classes de bases telles que MovieClip, Event, MouseEvent, .... ici le compilateur hurle car il ne trouve pas la classe Event.
Le soucis c'est que je ne l'ai pas importé ^^




Répondre à ce sujet



  

1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP