Comment afficher un Sprite avec Babylon ?

Cool Dji

Hello Falsam,

J'ai enfin commencé mes premiers pas sur Babylon.sb

J'ai réussi à charger un fichier text (c'est une suite de nombre séparé par une virgule => ça c'est déjà cool)

Code:

    AssetsManagerAdd("Topo", "Insee.txt", @OnLoad(), @OnError())

 Case "Topo"
      MemorySize$=Str(Element)   ;=> récupere la taille du ficher texte (nombre de caractères)
j=0
k=0
Repeat
  j+1
        If Mid(MemorySize$,j,1)=","  ;=> est-ce que le caractère lu est un séparateur ?

          k+1                                ; oui, on incrémente le pointeur
          insee(k)=Val(car$)            ; et on insere le nombre dans un tableau dim
          car$=""                          ; on met à zero pour reconstruire un nouveau nombre

        Else                                  ; non

          car$+Mid(MemorySize$,j,1)  ; on ajoute le caractere lu aux autres caracteres déja lu et on continue

        EndIf

     Until j>Len(MemorySize$)          ; Boucle tant qu'on a pas lu tous les caractères
 

mais là je bloque pour afficher un sprite avec les fonctions 2D de Spiderbasic

J'ai essayé plusieurs techniques. Je pense que j'ai réussi à charger le sprite mais ça coince au niveau de l'affichage.

Avec cet exemple, le FlipBuffers() ne gene pas le RenderWorld() mais le DisplaySprite() si => la variable loadingAll=1 quand le fichier est chargé.

Code:

Procedure RenderGame()    
  RenderWorld()
  If loadingAll=1
  ;  DisplaySprite(1,100,100)
    FlipBuffers()
  EndIf  
EndProcedure 

Pour faire mes tests, je suis parti de l'exemple "28 Asset Manager"...

Est-ce que j'ai oublié un truc ? As-tu, s'il te plait, un exemple de code qui lit et qui affiche un sprite par dessus la couche de Babylon ?

Merci à toi

falsam

Mon module 3D utilise le framework 3D BabylonJS.js alors que la 2D de SpiderBasic utilise le framework 2D PixiJS.js. Je n'ai jamais essayé mais je pense que ces deux univers sont incompatibles entres eux.

Le seul point commun entres les deux c'est l'utilisation de la balise html5 <canvas> pour afficher le rendu.

Je vais jeter un oeil.
Affaire à suivre.

Cool Dji

Ok,

Argh, en tous les cas, merci pour ta réponse rapide

falsam

Utilisant le framework Phaser.js qui lui même utilise PixiJS.js, je pense que fusionner Sprites et Meshs ne va pas être possible.

Par contre je devrais pouvoir créer des fonctionnalités pour afficher des sprites et les animer.

Si ça ne te dérange pas je vais créer un include qui pour le moment ne sera pas inclus dans Babylon.sbi que je te demanderais de tester avant de l'intégrer.

Voila un challenge qui me plait bien ^-^

falsam

Peut être que je vais aller trop loin dans mon exploration !

Que souhaites tu faire avec tes sprites ?

- Afficher une image ?
- Animer un sprite sheet ?

Cool Dji

Yeah,

Avec plaisir

, je veux bien tester et proposer des fonctions()
Merci de ta proposition

falsam a écrit:

Que souhaites tu faire avec tes sprites ?

- Afficher une image ?
- Animer un sprite sheet ?

J'aimerais afficher des sprites (Animer un sprite sheet) avec une fonction idéalement de type DisplaytransparentSprite().
On pourrait soit charger les sprites avec un loadSprite(), soit les créer avec CreateSprite() et insérer une image.

Avec PB, il est clair que la combinaison des librairies StartDrawing() et SpriteTexture() est super riche mais on pourrait "presque" s'en passer en ne travaillant qu'avec des images.

falsam

Afficher des sprites statics ou du texte etc... c'est déja prévu avec les fonctions GUI qui utilises des textures dynamiques.

par contre des des sprites animés dans un environnement 3D ça m'interpelle un peu.

A quels types d'applications penses tu ?

Cool Dji

falsam a écrit:

Afficher des sprites statics ou du texte etc... c'est déja prévu avec les fonctions GUI qui utilises des textures dynamiques

Oui, effectivement, il y a peut-être de quoi faire avec les fonctions GUI. Je vais regarder de plus près.

https://media.playstation.com/is/image/SCEA/paragon-screenshot-09-ps4-us-17feb16?$MediaCarousel_Original$

En tous les cas, je ne cherche pas à vouloir ça :
http://doc.babylonjs.com/babylon101/sprites
ça ressemble plus à du bilboard...

falsam

Cool Dji a écrit:

En tous les cas, je ne cherche pas à vouloir ça :

Tu as bien fait de le dire parce que je suis parti de ce principe

Code:

EnableExplicit

IncludeFile "babylon/babylon.sbi"
IncludeFile "Sprite.sbi"

Global Scene, Camera, Ground, GroundMat
Global Ball, Ball0, Ball1

Declare LoadGame()
Declare RenderGame()

UseModule BJS
InitEngine(@LoadGame())

Procedure LoadGame()    
  Scene = CreateScene()
  If Scene
    Camera = CreateCamera("camera", 0, 5, 20, #BJS_ArcRotate)
    CameraLookAt(Camera, 0, 0, 0)
    
    CreateLight("Ambiance", 0, 100, 0)
    Ground = CreateGround("Ground", 20, 20)
    GroundMat = CreateMaterial("")
    SetMaterialColor(GroundMat, #BJS_Diffuse, RGB(210, 180, 140))
    SetMeshMaterial(Ground, GroundMat)
    
    ;Chargement de deux copies d'une balle taille 40x40 pixels
    Ball = SpriteManager("Texture 1","Data/textures/ball.png", 40, 40, 2)
    
    ;Ajout et affichage des deux balles 
    Ball0 = AddSprite("Sprite 1", Ball, 0, 1, 0) ; En x = 0, y = 1 z=0   
    Ball1 = AddSprite("Sprite 2", Ball, 5, 2, 0) ; En x = 5, y = 2 z=0 
    
    RenderLoop(@RenderGame())
  EndIf
EndProcedure

Procedure RenderGame()
  RenderWorld() 
EndProcedure

■ Démo http://falsam.com/sbbjs/sprites.html

C'est bien des sprites statics au premier plan de la scène que tu souhaites.

Cool Dji

falsam a écrit:

C'est bien des sprites statics au premier plan de la scène que tu souhaites.

Oui, c'est ça

Mais en même temps, ce que tu as fait avec le ballon n'est pas inutile

falsam

Cool Dji a écrit:

Mais en même temps, ce que tu as fait avec le ballon n'est pas inutile

Hum je vais continuer sur ce principe même si je n'aime pas trop. :mrgreen:

Afficher une image au premier plan. Oui c'est moche mais c'est que pour l'exemple. Clique sur le bouton play.

■ Démo : http://falsam.com/sbbjs/guiimage.html

Code:

EnableExplicit

IncludeFile "babylon/babylon.sbi"

Global Scene, Camera, Light, Ground, Box 
Global GUI, Play, Sound, Time, x.f, y.f

Declare LoadGame()
Declare OnPlay()
Declare RenderGame()

UseModule BJS

InitEngine(@LoadGame())

Procedure LoadGame()    
  Scene = CreateScene()
  If Scene
    
    ;Camera & lighting environment
    ClearScene(RGB(128, 128, 128))
    
    CreateLight("global", 0, 200, 0, 0.4)
    Light = CreateLight("global", 0, 200, 0, 0.4, #BJS_Point)
    Camera = CreateCamera("camera", 0, 10, 30, #BJS_ArcRotate)
    
    ;Ground & Box
    Ground = Createground("ground", 10, 10)    
    Box = CreateBox("box", 3, 3, 3)
    MoveMesh(Box, 0, 3, 0)
    
    ;Music
    Sound = MusicLoad("petite music", "data/sounds/calm.wav")
    
    ;GUI 
    GUI = CreateDynamicTexture()
    Play = Image3D("Play", 20, 20, 80, 80, "data/textures/PlayBtn.png", @OnPlay())
    AddControl3D(GUI, Play)
    
    Time = Text3D("donne moi l'heure", 200, 20, 200, 30, "00:00:00")
    AddControl3D(GUI, Time)
        
    RenderLoop(@RenderGame())
  EndIf
EndProcedure

Procedure OnPlay()
  MusicPlay(Sound)
EndProcedure
  
Procedure RenderGame()
  Protected hhmmss.s = FormatDate("%hh:%ii:%ss", Date())
  
  ;Deplacement du bouton play
  If x < DesktopWidth(0)-80
    x + 1
  Else
    x = 20
  EndIf
  
  If y < DesktopHeight(0)-80
    y + 0.5
  Else
    y = 20
  EndIf
    
  MoveObject3D(play, x, y)
    
  ;Mise à jour de l'heure
  SetText3D(Time, hhmmss)
  
  RenderWorld()   
EndProcedure

Cool Dji

Hop,

Bon, en essayant tout à l'heure les fonctions GUI, j'ai obtenu 2-3 trucs mais c'est pas encore ça...Je vais essayer d'en tirer profit.
J'ai l'impression, qu'on ne peut plus modifier (position x et y) des images affichées via une scene, ou le contenu d'un texte.
Mais je vais creuser

Merci en tous les cas pour toutes tes réponses !

ps : le clic sur le bouton ne semble pas faire jouer la musique

falsam

Cool Dji a écrit:

J'ai l'impression, qu'on ne peut plus modifier (position x et y) des images affichées ...

Non ce n'est pas prévu mais je peux créer cette fonctionnalité.

Cool Dji a écrit:

... ou le contenu d'un texte.

Tu as raison il y a un bug avec le fonction SetText3D() du au changement de version de babylon.js (3.0 -> 3.1)

Je corrige et publie un correctif.

Nouvelle démo http://falsam.com/sbbjs/guiimage.html
Le code précédent est modifié.

Cool Dji a écrit:

ps : le clic sur le bouton ne semble pas faire jouer la musique

Tu penses bien que je n'ai pas publié sans testé :wink:

Quel navigateur ?

falsam

Correctif effectué https://github.com/falsam/BJS/archive/master.zip

■ Ajout
MoveObject3D(Object, x.i, y.i)
Change la position x et y d'un objet du GUI.

■ Bug Fix
Correction de la fonction SetText3D(Object, Text.s)

Voir toutes les fonctionnalités du GUI http://falsam.com/sbbjs/wiki/doku.php?i ... ions:gui2d

Cool Dji

Yes Great !

Merci

Sinon, j'ai FireFox Quantum

PureBasic

Comment afficher un Sprite avec Babylon ?

Qui est en ligne