[Game tool]spritesheet maker

[blendman]

Salut

Voici un petit utilitaire que j'ai conçu car j'en avais besoin pour les jeux que je développe en ce moment.

Fonctions

V1.2x (28/09/2015) :
- outil d'animation
- oignon skining
- ajout de frame, suppression de frame

V1.0
- possibilité d'ajouter et de créer des menus

V0.72 (01/04/2014) :
- Ajout bouton pour ajuster la taille des frames, ajout bouton frame courrante, départ et fin du preview (on s'en sert pour l'édition, par exemple réaliser un miror horizontale sur les frames choisies),
- la grille change en fonction de la taille des frames
- miror sur les frames sélectionnées (dans l'onglet preview)
- ajout des extensions lors de la sauvegarde ou de l'export en png
- corrections de bugs

V 0.6 (31/03/2014)
- ouverture de plusieurs images (menu files\open serie of images) : toutes les images doivent être dans un dossier unique
- ouverture d'un spritesheet (une seule) (files\Open spritesheet)
- export vers une image png (un spritesheet)
- on peut faire quelques modifications (bouger la position,changer l'alpha des frames, couper/copier/coller...)
- on peut ajouter une ombre si besoin, avec quelques paramètres (alpha, position, taille)
- preview : on peut visualiser l'animation du spritesheet. On peut prévisualiser l'offset ou la boundingbox si besoin, ça peut être utile pour connaitre le centre d'un sprite ou définir la bouding box pour les collisions par exemple

Screenshots

Création d'animation (on peut dessiner sur les images), depuis la 1.20
Version 1.24
Oignon skining :



Version 1.22
Création d'animation (pour l'instant c'est très basique)



Création de menu (depuis la 1.0)
Version 1.05


V0.95


V 0.81


V 0.54


Download
Version 0.71 (01/04/2014)
http://blendman.free.fr/dev/pb/spritesh ... tMaker.zip

Todolist
- Ajouter des outils basiques de dessins
- pouvoir faire des Batchs
- pouvoir ajouter des images (multi-sélection) et non toutes les images d'un répertoire
- pouvoir ajouter des frames vides
- pouvoir ajouter des images en plus (merge)
- ajouter des fx d'animation : fade (in/out), déplacement, échelle...

Peut-être que ça sera utile à certains d'entre vous .

Si vous avez des souhaits particuliers, ou que vous aimeriez d'autres fonctions, vous pouvez toujours poster vos suggestions, si j'ai le temps, j'essaierai de les ajouter (mais rien n'est sûr lol).
Logiquement, il n'y a plus de bugs, mais si vous en trouvez, signalez-le .

[Huitbit]

Ca bouge sur le forum

Fonctionne parfaitement sur mon pc en carton (HP Pavilion acheté en 2006, qui a échappé à plusieurs tentatives de meurtre de la part d'EDF ~la carte mère commence à gémir un peu ~)

Encore un petit logiciel bien utile !

Avec le boulot de majikeyric et le tien, bientôt on n'aura plus d'excuses pour ne pas produire quelque chose !!

Question du jour : simple ou double-boucle repeat ?

Question subsdi...subdsib,...subsidiaire :

Voici un petit utilitaire que j'ai conçu car j'en avais besoin pour les jeux que je développe en ce moment.

Bientôt des infos ?

Hasta la vista !

[falsam]

Le 2D est à la mode sur ce forum en ce moment. Pourvu que ça dure

[graph100]

Question du jour : simple ou double-boucle repeat ?

je me suis demandé si il fallait se faire un second post pour l'arène du débat parce qu'on a sacrément dévié du sujet originel !


@blendman : beau boulot (mais je suis pas graphiste )

[blendman]

salut

Merci pour vos réponses.
J'ai mis à jour le zip.

Version 0.7 :
- ajout des frames de départ, de fin, frame courrantes : onglet preview
- ajout de boutons pour modifier la taille des frames (W et H) : onglet sprite. Quand on modifie la taille de frame, ça modifie tout le spritesheet en temps réel. La grille change désormais en fonction de la taille de la frame.
- corrections de quelques bugs

Pour les questions :

simple ou double-boucle repeat

simple boucle avec WaitWindowEvent(1)

ça ressemble à ça :

Code : Tout sélectionner

Repeat
  
  EventID     = WaitWindowEvent(1)
  EventGadget = EventGadget()
  EventMenu   = EventMenu()
  EventWindow = EventWindow()
  
  If doc\anim = 1
    UpdatePreview(1)
  EndIf
  
  
  Select EventID
      
    Case #PB_Event_CloseWindow 
      quit = 1
      CloseWindow(EventWindow)
      
    Case #PB_Event_Menu
      Select EventMenu   
      EndSelect

    Case #PB_Event_Gadget
    
      Select EventGadget
      EndSelect

   EndSelect

Until quit = 1

Bientôt des infos ?

Ce sont des jeux pour android pour le moment, j'en ai un qui est disponible sur le google play, mais c'était un test pour valider tout le pipeline, depuis la création (avec AGK) jusqu'à la publication (et mise en vente) .
J'ai d'autres jeux commencés, dont un que je compte finir très prochainement (un tower defense). Ce sont des petits jeux, et j'utilise Purebasic pour développer les outils dont j'ai besoin : éditeur de map, de path, font bitmap, ou celui-ci pour créer mes spritesheets ^^. Il m'arrive aussi de faire des bouts de codes, des maquettes avec purebasic lorsque je bloque sur certains trucs, mais après, je dois adapter le code.

[falsam]

Suite à ce post J'étais en train de codé une petite procédure qui me permet de faire un mirror horizontal global sur chaque frame d'un spritesheet.

Ton code permet de faire un mirror horizontal d'un spritesheet mais il faut le faire frame par frame.

Pourrait on avoir une option sur l'ensemble du spritesheet ou bien sur une sélection de frames (Ex de 2 a 12)?

[falsam]

Rhoooo mais là je râle Monsieur Blendman : Je viens de faire un miror horizontal de 42 frames un par un d'un spritesheet et j'ai voulu faire une sauvegarde sous et ........ rien !!! Même pas une demande de nom de fichier. Merci pour ce poisson d'avril, je me suis fait avoir

Reedit : Fallait faire une exportation et non pas une sauvegarde

Quand on exporte un spritesheet tu n'ajoutes pas automatiquement l'extension png quand on saisi un nom de fichier.

[blendman]

@falsam : content de voir que ça t'es utile

Pourrait on avoir une option sur l'ensemble du spritesheet ou bien sur une sélection de frames (Ex de 2 a 12)?

je vais ajouter ça sur ma todolist
L'ensemble du spritesheet, ça devrait être facile et rapide . [Edit :c'est ok]

Rhoooo mais là je râle Monsieur Blendman : Je viens de faire un miror horizontal de 42 frames un par un d'un spritesheet et j'ai voulu faire une sauvegarde sous et ........ rien !!! Même pas une demande de nom de fichier. Merci pour ce poisson d'avril, je me suis fait avoir

Reedit : Fallait faire une exportation et non pas une sauvegarde

oui, si tu veux "exporter" tes images en un spritesheet, c'est export qu'il faut faire.
Je vais enlever le "save as".
"save document" : permet d'enregistrer certains de tes paramètres, comme l'alpha, x,y, paramètres des ombres (alpha, x,y,size) pour le moment.
J'ajouterai le miror, l'offset, les bouding box, etc... pour une prochaine version .

Quand on exporte un spritesheet tu n'ajoutes pas automatiquement l'extension png quand on saisi un nom de fichier.

C'est corrigé.

EDIT : bon, ben ça a été super rapide à ajouter le miroir des frames sélectionnées
J'ai mis à jour le zip :
- miror sur les frames sélectionnées (dans l'onglet preview)
- ajout des extensions lors de la sauvegarde ou de l'export en png
- corrections de quelques bugs qui faisaient planter le soft quand on avait aucune image (ex : en utilisant le miror horizontal)

[falsam]

@falsam : content de voir que ça t'es utile

Oui oui j'en ai l'utilité. Je code pour le plaisir un lecteur de scene 2d sous forme de fichier xml (Et bientôt un éditeur of course) Je t'avoue que ton code qui permet de faire un miroir d'un spritesheet l'interesse beaucoup mais je vais chercher un peu (C'est mieux que de se lancer dans le tricot .

Ton gestionnaire d'ombre et pas mal. L'idéal étant que tu projettes un détourage du sprite au sol. Peut être une prochaine étape ?

Ring sur le forum anglais avait fait quelques chose en ce sens. Mais ça date.
http://www.purebasic.fr/english/viewtopic.php?t=29680

[blendman]

Je code pour le plaisir un lecteur de scene 2d sous forme de fichier xml (Et bientôt un éditeur of course) Je t'avoue que ton code qui permet de faire un miroir d'un spritesheet m'interesse beaucoup mais je vais chercher un peu

En fait, c'est assez simple :
lorsque j'ouvre une image (un spritesheet), je découpe cette image en frame. Chaque frame étant une nouvelle image.
Par exemple, un spritesheet de 256*256 devient 16 frames (=16 images) de 64*64. Je stocke chaque frame dans un tableau.

Code : Tout sélectionner

Structure sFrame
  
  ; structure pour les frame
  id.i ; l'image
  ImgbaseID.i ; l'image de base au cas où, par exemple si je la redimensionne
  x.w
  y.w
  alpha.a
  
EndStructure
Global Dim Img.sFrame(0)

Du coup, pour jouer les animations ou modifier une image, c'est hyper simple, je récupère le numéro de la frame courante et je modifie :

Code : Tout sélectionner

Img(CurrentFrame)\id

Exemple, pour afficher :

Code : Tout sélectionner

 For i= 0 To NbImg - 1
          If IsImage(Img(i)\id)
            DrawAlphaImage(ImageID(Img(i)\id), doc\x + Img(i)\x + doc\shadoX, doc\y + Img(i)\y + doc\shadoY, doc\shadoAlpha)
          EndIf      
        Next i

Ensuite, le miror, je le fais sur les images sélectionnées tout simplement (avec une boucle for i = Framestart to frameEnd...)

Du coup, je peux faire plein de transformation sur chacune de ces petites images si je veux ^^.


exemple du code d'ouverture de l'image (le spritesheet complet) :

Code : Tout sélectionner

 
file$ = OpenFileRequester("Open", "", "Images Files |*.jpg;*.png;*.bmp",-1)

If file$ <>""
    
    doc\file$ = file$    
    doc\dir$ = GetPathPart(file$)
    
    ; on ajoute le psrite sheet (de base) dans la liste des spritesheets
    AddElement(SpriteSheet())
    SpriteSheet()\img = LoadImage(#PB_Any, file$)
    SpriteSheet()\ID = ListSize(SpriteSheet()) - 1
    SpriteSheet()\w = ImageWidth(SpriteSheet()\img)
    SpriteSheet()\h = ImageHeight(SpriteSheet()\img)
    SpriteSheet()\fileName$ = GetFilePart(file$)
    
    AddGadgetItem(#G_listSpriteSheet, -1, SpriteSheet()\fileName$)
    
    CreateTheFrame(SpriteSheet()\img)
    
    doc\type = 1
  EndIf 

La procedure pour créer les images à partir du spritesheet ouvert, ou recalculer les images si on modifie par exemple la hauteur/largeur du spritesheet :

Code : Tout sélectionner

Procedure CreateTheFrame(img, mode = 0, name$="")
  
  ; mode = 0 : on ouvre un spritesheet
  ; mode = 1 : on recalcule les images des frames, par exemple, en changeant la taille des frames, je dois recalculer chaque frame (image)
    
  If mode = 1 ; on redéfinit les frames
    ; si on a déjà charger le spritesheet, on peut le modifier, c'est ici que ça se passe
    ForEach SpriteSheet()
      If SpriteSheet()\fileName$ = GetFilePart(name$)
        ; on a trouvé notre image (spritesheet), celle dont on se sert.
        img = SpriteSheet()\img
        Break
      EndIf  
    Next
    
    ; on supprime les anciennes images (toutes les frames) si besoin
    For i = 0 To NbImg - 1    
      If IsImage(Img(i)\id)
        FreeImage(Img(i)\id)
      EndIf    
    Next i 
    
    NbImg = 0
    ; on redim le tableau des frames
    ReDim Img(0)
  EndIf
  
  ; on définit la taille du document (lors de l'export, ce sera la taille de l'image exporté
  w = doc\frameW
  h = doc\frameH
    
  
  ; d'abord, on définit la taille de l'image
  width = ImageWidth(img)
  height = ImageHeight(img)
  
  
  ; je définis le nombre de colonne (frame) et de lignes
  NbFrame = width / w
  NbLine  = height / h
  
  ; on a le nouveau nombre d'image
  NbNewImg = NbFrame * NbLine
  
  ; le nombre d'image actuel
  NbImgActuel = NbImg - 1
  
  If NbImgActuel < 0
    NbImgActuel = 0
  EndIf
  
  ; j'ajoute les nouvelles images au nombre total d'images que j'ai déjà (NBImg est global)
  NbImg + NbNewImg
  
  ; je redéfinis le tableau contenant mes images
  ReDim img(NbImg - 1)
    
 
  ; puis, je les crée
  For i = 0 To NbNewImg - 1
    
    img(NbImgActuel + i)\id = CreateImage(#PB_Any, w, h, 32)
    
    ; pour placer l'image
    x = Mod(i, NbFrame)
    y = i / NbFrame
  
    img(NbImgActuel + i)\x = x * w
    img(NbImgActuel + i)\y = y * h
    
    If StartDrawing(ImageOutput(img(NbImgActuel + i)\id))
      DrawingMode(#PB_2DDrawing_AlphaChannel)
      Box(0,0,w,h,RGBA(0,0,0,0))
            
      DrawingMode(#PB_2DDrawing_AlphaBlend)
      DrawAlphaImage(ImageID(img), -x * w, -y * h)
            
      StopDrawing()
    EndIf
        
  Next i
   
EndProcedure

Ton gestionnaire d'ombre et pas mal. L'idéal étant que tu projettes un détourage du sprite au sol. Peut être une prochaine étape ?

J'y ai pensé. Je pourrais l'ajouter sur ma Todolist aussi ^^.
Je pense aussi ajouter un système de layers (simple) mais ce ne sera pas pour tout de suite, car là, tel quel, le soft me convient, il fait ce que je voulais, c'est à dire créer un spritesheet à partir de plusieurs images, ou pouvoir modifier un spritesheet existant et le sauvegarder ^^.