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

, 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
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.
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é
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