LiXu.pbi : Animation & Particule 2D

[Patrick88]

Voilà, donc c'est décidé, on peut dire désormais "j'insole, oui, monsieur ! parfaitement."

insoler, c'était du temps des machines à copier, le temps d'avant les photocopieuses.
les machines avec ce papier jaune sensible à la lumière ultraviolette qu'il fallait "révéler" avec de l’ammoniac...

la phrase "j'insole...." pourrait sous-entendre "je suis une lumière"...

à part ça, j'ai esayé la lib, c'est sympatouille comme tout, 2 ou 3 fonctions pour faire un scroolling, possible ?

Patrick

[falsam]

2 ou 3 fonctions pour faire un scroolling, possible ?

Sauf si j'ai mal compris, c'est une fonctionnalité qui existe.

ScrollSprite(sprite, x, y, StepX, StepY) permet de faire un scroll Horizontal et/ou verticale d'un sprite.

Regarde l'exemple lixu - 5 Scrolling.pb (Voir le premier message pour télécharger la dernière version)

[blendman]

Quelques idées que j'ai eues :

1) Skeleton

Penses-tu qu'il serait possible d'ajouter ce genre de fonction : lier deux sprites entre eux (parent> enfant).
Si tu bouge/rotate/scale le parent ça bouge/rotate/scale l'enfant avec.
On pourrait faire une rotation, un mouvement ou un scale de l'enfant, avec une option pour locker les transformations.
Avec ça, on pourrait envisager un système de skeleton .


On pourrait envisager les fonctions suivantes :
JointSprite(#sprite1,#sprite2,x,y,lockmove=0,lockrotate=0,lockscale=0)
AddFrame(#sprite,time,x,y,angle,ScaleW,ScaleH ,frame=0) : ajouter une frame pour un sprite, par exemple on le place en x= 10, y = 50 à t = 0 et en t = 20 on le met à x-30 y = 100, et quand on lance, il va tout de (10,50) à (30,100). Idem si on effectue une rotation ou un scale. On pourrait mettre envisager de changer l'opacité, la couleur.

PlayAnimationSprite(#sprite,StartFrame,EndFrame,FrameRate,loop=0,type=0) : pour jouer les animations de type mouvement/rotation, scale, ou autre
Loop= -1 > infini, sinon, on loop le nombre de fois la valeur loop (si loop = 5, on boucle 5 fois.)
Type = type d'animation (si boucle ou non). 0 = normal, 1 = ping-pong (aller, retour)

Je ne pense pas que ce soit hyper complexe à ajouter, mais c'est un peu de boulot c'est certain ^^. Je vais y réfléchir de mon coté. J'avais déjà un peu commencé.


2)SpriteBlendingmode()

j'ai testé et ça bugue avec les couleurs, on perd la transparence. Mais il faudrait tout de même l'envisager .
Et signaler le bug sur le forum anglais.

[falsam]

lier deux sprites entre eux (parent> enfant).

C'est une bonne idée mais qui va demander reflexion.

LiXu est un complément aux fonction existante de PureBasic. Je ne gére pas par exemple la rotation d'un sprite.

Si tu bouge/rotate/scale le parent ça bouge/rotate/scale l'enfant avec.

Bouger, Rotater (oui je rotate si je veux) et scaler sont des fonctions natives de Purebasic et il ne sera pas possible d'agir sur un ensemble de Sprites liés entres eux.

La notion de Nodes me parait plus cohérent pour agir sur un ensemble de Sprites liés entres eux.

On peut par exemple créer les fonctions SpriteCreateNode() & SpriteRotateNode()

Je vais réfléchir à ces nouvelles fonctionnalités.....

[blendman]

J'y ai un peu réfléchi aussi ^^

1) move your body
Bouger un sprite et son enfant, c'est simple.

Exemple :

Code : Tout sélectionner

; pb 5.31
; pareting  (move only )
; blendman 06/2015

InitSprite()
screenwidth = 1024
screenheight = 768

Structure sSprite
  x.w
  y.w
  ;là où il est créé
  BornX.w
  BornY.w
  
  Parent.i
  sprite.i
  
EndStructure
Global Dim sprite.sSprite(1) ; 2 sprites


Procedure AddSprite(id,sprite,x,y,w,h,parent=-1)
  
  CreateSprite(id,w,h,#PB_Sprite_AlphaBlending)
  StartDrawing(SpriteOutput(id))
  DrawingMode(#PB_2DDrawing_AllChannels)
  Box(0,0,w,h,RGBA(0,0,0,0))
  DrawingMode(#PB_2DDrawing_AlphaBlend)
  DrawAlphaImage(ImageID(0),0,0,120)
  StopDrawing()

  sprite(id)\x = x
  sprite(id)\y = x
  sprite(id)\y = x
  sprite(id)\Parent = parent
  If parent <> -1
    sprite(id)\BornX = x - sprite(parent)\x
    sprite(id)\BornY = y - sprite(parent)\y
  EndIf
  sprite(id)\sprite = sprite
    
EndProcedure

Procedure EventSprite(x,y)
    
  ; test
  sprite(0)\x = x
  sprite(0)\y = y
  
  ; on met à jour
  For i = 0 To ArraySize(sprite())
    
    ; move with parenting
    
    If sprite(i)\Parent <> -1
      sprite(i)\x = sprite(i)\BornX + sprite(sprite(i)\Parent)\x
      sprite(i)\y = sprite(i)\BornX + sprite(sprite(i)\Parent)\y
    EndIf
    
    ; display
    DisplayTransparentSprite(sprite(i)\sprite,sprite(i)\x,sprite(i)\y)
  Next i
      
EndProcedure


OpenWindow(0, 0, 0, screenwidth, screenheight, "Antialiased Line Demo", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)

If OpenWindowedScreen(WindowID(0),0,0,screenwidth, screenheight)
  
  w = 100
  h = 200
  CreateImage(0,w,h,32,#PB_Image_Transparent)
  StartDrawing(ImageOutput(0))  
  DrawingMode(#PB_2DDrawing_AlphaBlend)
  Circle(w/2,h/2,40,RGBA(255,120,120,255))
  StopDrawing()
  
  AddSprite(0,0,50,100,w,h)
  AddSprite(1,1,80,200,w,h,0)
    
  Repeat
    
    Repeat      
      event =WaitWindowEvent(1)
    Until event = 0 Or event = #PB_Event_CloseWindow
    
    ClearScreen(RGB(120,120,120))            
    x = WindowMouseX(0)
    y = WindowMouseY(0)
    EventSprite(x,y)    
    FlipBuffers()
        
  Until event = #PB_Event_CloseWindow
     
EndIf

2) scale-toi de là
Pour le scale, éventuellement, ça devrait être gérable.
On fait la même chose, avec cette fois-ci un calcul = distance entre les deux sprites * ratio (ancienne taille/nouvelle taille)
et on décale le sprite dans la direction (spriteenfant/ spriteparent)



3) rotate your face !
Pour la rotation, par contre, ça va être coton ^^.

là, faut cauler la distance, le cosinus, le sinus et le tarabiscotto

[Patrick88]

je pensais à un scrolling d'écran....

[falsam]

je pensais à un scrolling d'écran....

C'est bien ce que je pensais, je n'ai pas compris

Scrolling dans le sens tout les sprites se déplacent à droite ou/et gauche ou/et haut ou/et bas ?

Cette démonstration est ce que tu cherches ?

http://falsam.com/Dude/

Avec les flèches du clavier, essayes de rejoindre la porte de droite tout en évitant les ballons.

[blendman]

Je pense que Patrick88 veut dire un scrolling avec par exemple 3 décor qui se déplacent à des vitesses différentes (en fonction de l'éloignement avec la caméra en général) lorsque le personnage avance.

[falsam]

Ha oui !!! Je n'avais pas compris effectivement. Il s'agit donc d'un system de parallaxe.

Il s'agit d'un effet trompe-l'oeil pour donner un effet de profondeur. Le décor est décomposé en plusieurs plans, chaque plan défile à une vitesse différente (lent au fond, rapide devant). Cela crée une illusion de profondeur. C'est un effet très sympathique et simple à mettre en place avec lixu.

Un background, un sol et un oiseau qui vole de gauche à droite. Utilisez les fléches de votre clavier.

Code : Tout sélectionner

IncludeFile "lixu.pbi"

Global BirdX.f = 300, BackGroundX.f

UsePNGImageDecoder()
UseJPEGImageDecoder()

InitSprite()
InitKeyboard()

OpenWindow(0, 0, 0, 800, 600, "Paralax Test", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
OpenWindowedScreen(WindowID(0), 0, 0, 800, 600)

;Chargement du background, ground et de l'oiseau
Background = LoadSprite(#PB_Any, "assets\image\background.jpg")
Ground = LoadSprite(#PB_Any, "assets\image\ground.jpg")
Bird = LoadSprite(#PB_Any, "assets\image\bird.png", #PB_Sprite_AlphaBlending)

;Add animation
lixu::SpriteAddAnimation(Bird, "left", 0, 3, 64, 64, 130)
lixu::SpriteAddAnimation(Bird, "right", 4, 6, 64, 64, 130)
lixu::SpriteAddAnimation(Bird, "wait", 12, 15, 64, 64, 130)

Repeat
  Repeat
    Event = WindowEvent()
    If Event = #PB_Event_CloseWindow : Quit = #True : EndIf
  Until Event = 0
  
  BackGroundX = 0
  
  ExamineKeyboard()
    
  If KeyboardPushed(#PB_Key_Left)
    lixu::SpriteSetAnimation(Bird, "left")
    BirdX - 2
    If BirdX < 300
      BirdX + 2
      BackGroundX = -0.4
    EndIf
            
  ElseIf  KeyboardPushed(#PB_Key_Right)
    lixu::SpriteSetAnimation(Bird, "right")
    BirdX + 2
    If BirdX > 500
      BirdX - 2
      BackGroundX = 0.4
    EndIf
    
  Else
    lixu::SpriteSetAnimation(Bird, "wait")
    
  EndIf
   
  ;Scroll Paralac
  lixu::ScrollSprite(Background, 0, 0, BackGroundX,0)
  lixu::ScrollSprite(Ground, 0, 550, BackGroundX * 5, 0)
  
  ;Show Bird
  lixu::SpriteUpdateAnimation(Bird)
  DisplayTransparentSprite(Bird, BirdX, 300)
  
  FlipBuffers() 
Until Quit

Cet exemple figure dans le fichier compressé : lixu - 6 paralax.pb

[blendman]

A propos de ton scrolling avec opacité, tu devrais plutôt ajouter un clearscreen(0) dans ta boucle et placer le flipbuffers en bas, ça te permet de gérer le spriteblendingmode() avant le displayTransparentSprite() de ta procedure Scrollsprite() .

Dans lixu.pbi (Procedure ScrollSprite(sprite, x, y, StepX.d, StepY.d, Opacity=255)):

Code : Tout sélectionner

    SpriteBlendingMode(1,1) ; mode additif

    For sx=0 To 2
      For sy=0 To 2
        DisplayTransparentSprite(Scrolling()\Sprite, x + Scrolling()\Width * sx - Scrolling()\PositionX, y + Scrolling()\Height * sy - Scrolling()\PositionY, Opacity)
      Next
    Next
    
    SpriteBlendingMode(#PB_Sprite_BlendSourceAlpha, #PB_Sprite_BlendInvertSourceAlpha) ; on revient au mode normal

Code : Tout sélectionner

IncludeFile "lixu.pbi"

UseJPEGImageDecoder()

InitSprite()
InitKeyboard()

;Téléchargement de l'image
InitNetwork()
If ReceiveHTTPFile("http://www.falsam.com/forum/data/tuto-S2D/assets/image/starfield.jpg", "starfield.jpg") : EndIf

OpenWindow(0, 0, 0, 800, 600, "Scrolling Test", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
OpenWindowedScreen(WindowID(0), 0, 0, 800, 600)

;Chargement du background
Background1 = LoadSprite(#PB_Any, "starfield.jpg")
Background2 = LoadSprite(#PB_Any, "starfield.jpg")

;Boucle evenementielle
Repeat
  Repeat
    Event = WindowEvent()
    If Event = #PB_Event_CloseWindow : Quit = #True : EndIf
  Until Event = 0
  
  ClearScreen(0)
 
  ;Affiche le background
  lixu::ScrollSprite(Background1, 0, 0, 0.3, -0.4)
  lixu::ScrollSprite(Background2, 0, 0, -0.5, -0.2, 180)
  
  FlipBuffers()

Until Quit

[falsam]

ClearScreen() en début de boucle et FlipBuffers() en fin de boucle j'ai compris.

Par contre pourquoi
Par contre je suis un peu fâché avec SpriteBlendingMode() qui souvent ne m'as pas donné le résultat que j'attendais. Peut être une mauvaise compréhension de cette fonctionnalité.

Quand à la Procedure ScrollSprite(sprite, x, y, StepX.d, StepY.d, Opacity=255)) je vais faire les modifications que tu préconises même si je n'ai pas tout compris.

Si d'autres personnes s'opposent à cette modification, qu'ils le disent maintenant ou qu'il se taisent à jamais

[blendman]

ClearScreen() en début de boucle et FlipBuffers() en fin de boucle j'ai compris.

C'est bizarre, mais ainsi, ça fonctionne avec ton code ^^

Par contre je suis un peu fâché avec SpriteBlendingMode() qui souvent ne m'as pas donné le résultat que j'attendais. Peut être une mauvaise compréhension de cette fonctionnalité.

Tu dois toujours revenir au blendingmode normal avec un sprite.
Sinon, le bug c'est si on utilise une couleur sur le sprite, on perd la transparence. Donc, à n'utiliser qu'avec des sprites non colorés ensuite.

[falsam]

Et bien je continuerais à être facher avec SpriteBlendingMode().

Une fois inclus dans lixu comme tu me l'as dit, le résultat sur certains code est désastreux. Les couleurs sont grillées.

J'ai modifié la procédure comme tu me l'as indiqué de cette maniére.

Code : Tout sélectionner

Procedure ScrollSprite(sprite, x, y, StepX.f, StepY.f, Opacity=255)
    Protected sx, sy
    
    If Not FindMapElement(Scrolling(), Str(Sprite))
      AddMapElement(Scrolling(), Str(Sprite))
      Scrolling()\Sprite = Sprite
      Scrolling()\Width  = SpriteWidth(Sprite)
      Scrolling()\Height = SpriteHeight(Sprite)
    EndIf
    
    Scrolling()\PositionX + StepX
    Scrolling()\PositionY + StepY
  
    If Scrolling()\PositionX > Scrolling()\Width
      Scrolling()\PositionX = 0
    EndIf
  
    If Scrolling()\PositionX < 0 
      Scrolling()\PositionX = Scrolling()\Width
    EndIf
  
    If Scrolling()\PositionY > Scrolling()\Height
      Scrolling()\PositionY = 0
    EndIf
  
    If Scrolling()\PositionY < 0
      Scrolling()\PositionY = Scrolling()\Height
    EndIf
    
SpriteBlendingMode(1,1)
    
    For sx=0 To 2
      For sy=0 To 2
        DisplayTransparentSprite(Scrolling()\Sprite, x + Scrolling()\Width * sx - Scrolling()\PositionX, y + Scrolling()\Height * sy - Scrolling()\PositionY, Opacity)
      Next
    Next

    SpriteBlendingMode(#PB_Sprite_BlendSourceAlpha, #PB_Sprite_BlendInvertSourceAlpha)

  EndProcedure

Teste ce code avec cette façon de faire et tu vas voir le résultat horrible.
http://www.purebasic.fr/french/viewtopi ... 35#p173035

[falsam]

J'ai corrigé l'ensemble des exemples que j'ai postés sur ce topic et mise à jour le fichier compressé présent dans le premier message en ajoutant ces exemples avec les images correspondantes.

Télécharger lixu.zip (Source et exemples )

[blendman]

Et bien je continuerais à être facher avec SpriteBlendingMode().
Une fois inclus dans lixu comme tu me l'as dit, le résultat sur certains code est désastreux. Les couleurs sont grillées.
J'ai modifié la procédure comme tu me l'as indiqué de cette maniére.

OUi, il y a un bug de spriteblendingmode() avec le changement de couleur, l'apha n'est pas préservé.
Il faut le signaler sur le forum anglais .

Sinon, j'ai modifié quelques bricoles :
- Ajout d'un structures sprite (Structure sSprite). J'y ai ajouté quelques paramètres dont centerX et centerY si besoin (pour déplacer le centre du sprite ou hot spot).
- modification des structures sprite animation et scroll (avec extends sSprite)
- ajout de procédures pour créer les sprites normaux et les scrollsprites
- ajout de paramètres pour gérer le repeat des Background en X ou Y (facultatif) : pour répéter un sol en X uniquement pas exemple, ou un arbre en Y uniquement .
- ajout de la bonne gestion du blendmode
- ajout d'une fonction FPS() pour vérifier les fps qu'on a (toujours pratique )
- ajout de clearscreen() dans certains exemples où ça manquait. j'ai d'ailleurs modifié l'exemple parallax bird (avec la forêt).
- j'ai corrigé l'asset parallax12.png qui était tout moche sur les bords ^^, et j'en ai créé un autre (pour un premier plan flou). Du coup, je me suis dit qu'il fallait corriger le système de scrolling pour gérer les sprites qui ne sont pas de la taille de l'écran (même si on peut jouer sur les paramètres repeatX/repeatY pour le moment pour pallier ce problème).

J'ai aussi modifié les exemples en conséquence :
- fichier snow : ajout de deux background, avec paralax décalé pour un effet encore plus sympa.
- bird : le fond est mis avec un léger blendmode + clearscreen() avec une couleur
- scrolling (l'espa)ce : ajout d'un blendmode additif qui donne un chouette rendu

En regardant tes exemples, je pense que Fred devrait les inclure avec purebasic (ainsi que cette lib), car on pourrait créer quelques petites démos de jeux très facilement avec cette lib !!
D'ailleurs, il me semble évident qu'on va devoir gérer quelques collisions (boite, cercle, pixel) pour créer une petite démo de jeu de plateforme/action . On pourrait demander de l'aide sur le forum anglais si besoin

Je te propose de créer quelques assets 2D : bonus(étoile), vie(coeur), interface (bouton, panneau vie...) et quelques décors afin d'avoir quelques petites démos sympathiques . Si ça peut motiver Fred pour qu'il corrige les quelques bugs qui trainent (ex ; le bug avec le spriteblendingmode() et les couleurs des sprite via DisplayTransparentSprite()) ^^), voire ajoute quelques fonctions manquantes (comme le RenderTotexture sur psrite, les shaders sur sprite, etc)

Donc, avant d'attaquer le skeleton, je pense qu'on pourrait envisager les changements suivants :
- gestion simple de collision : perso qui ne passe pas à travers les murs, saute sur des plateformes, touche un asset->modifie une variable
- gestion d'animation "automatique" (pour un ennemi par exemple, ou pour obstacle) : suit un chemin ou va de A à B (avec aller-retour)
- il faudrait penser à la copie de sprite ou à l'utilisation d'une banque d'image : si on doit utiliser la même image pour plusieurs sprite, je pense que d'ouvrir à chaque fois cette image, ça prend de la mémoire, non ? Si on crée une sorte de banque d'images, on peut vérifier si on a déjà chargée une image et si c'est le cas, on l'utilise pour notre sprite qui en a besoin

Un petit screenshot de l'adaptation avec lixu d'un début de jeu de plateforme que j'avais commencé :

ça donne envie, non ?
Falsam : je peux te filer le code (assez simple et basé sur lixu ^^) et les images si tu veux pour tester d'autres choses dessus

Franchement, y'a un énooooorme potentiel avec cette lib, il manque quelques petites fonctions de collisions et ça pourrait faire une lib de démo fabulouspour purebasic ^^ !

Voici la version de lixu que j'ai modifiée :
http://www.dracaena-studio.com/games/lixu_1.3.1.zip