Page 1 sur 2

Comment afficher un Sprite avec Babylon ?

Publié : dim. 11/févr./2018 15:30
par 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 : Tout sélectionner

    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 : Tout sélectionner

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

Re: Comment afficher un Sprite avec Babylon ?

Publié : dim. 11/févr./2018 15:46
par 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.

Re: Comment afficher un Sprite avec Babylon ?

Publié : dim. 11/févr./2018 15:53
par Cool Dji
Ok,

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

Re: Comment afficher un Sprite avec Babylon ?

Publié : dim. 11/févr./2018 15:58
par 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 ^-^

Re: Comment afficher un Sprite avec Babylon ?

Publié : dim. 11/févr./2018 16:35
par 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 ?

Re: Comment afficher un Sprite avec Babylon ?

Publié : dim. 11/févr./2018 17:21
par Cool Dji
Yeah,

Avec plaisir :D , 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.

Re: Comment afficher un Sprite avec Babylon ?

Publié : dim. 11/févr./2018 17:27
par 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 ?

Re: Comment afficher un Sprite avec Babylon ?

Publié : dim. 11/févr./2018 18:03
par 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/ ... _Original$

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

Re: Comment afficher un Sprite avec Babylon ?

Publié : dim. 11/févr./2018 18:07
par 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 : Tout sélectionner

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.

Re: Comment afficher un Sprite avec Babylon ?

Publié : dim. 11/févr./2018 18:12
par Cool Dji
:mrgreen:
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 ;)

Re: Comment afficher un Sprite avec Babylon ?

Publié : dim. 11/févr./2018 18:45
par 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 : Tout sélectionner

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

Re: Comment afficher un Sprite avec Babylon ?

Publié : dim. 11/févr./2018 19:12
par 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

Re: Comment afficher un Sprite avec Babylon ?

Publié : dim. 11/févr./2018 19:59
par 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 ?

Re: Comment afficher un Sprite avec Babylon ?

Publié : dim. 11/févr./2018 20:30
par 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

Re: Comment afficher un Sprite avec Babylon ?

Publié : dim. 11/févr./2018 20:35
par Cool Dji
Yes Great !

Merci ;)

Sinon, j'ai FireFox Quantum