Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Putting Text in my Game

En929

By En929,
in Questions & Answers

 Share

Recommended Posts

En929 Newbie

En929

Posted
Posted

What do I add to my game code if:

1) I'm trying to add text to my game

2) I'd like to use the text feature to keep track of exactly where I'm at and where I'm going  in regards to the "X" and "Y" coodinates when I press the arrow keys while playing the game

I know how to create such a text feature in pure JavaScript 2D games, but I don't know how to do it in this Babylon.js 3D realm.

Thanks! 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Babylon.js sample code</title>
        <!-- Babylon.js -->
        <script src="http://www.babylonjs.com/hand.minified-1.2.js"></script>
        <script src="http://www.babylonjs.com/cannon.js"></script>
        <script src="http://www.babylonjs.com/oimo.js"></script>
        <script src="http://www.babylonjs.com/babylon.js"></script>
        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>
    </head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);

        var createScene = function () {
            var scene = new BABYLON.Scene(engine);
			   
				scene.collisionsEnabled = true;
				
				scene.gravity = new BABYLON.Vector3(0, -10, 0);
 

        
            // Create camera and light
            var light = new BABYLON.PointLight("Point", new BABYLON.Vector3(5, 10, 5), scene);
            //var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 8, new BABYLON.Vector3(0, 0, 0), scene);
			var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0.8, 0), scene);
            camera.attachControl(canvas, true);
			camera.checkCollisions = true;
		    camera.applyGravity = true;
			
        
            // Create a sprite manager to optimize GPU ressources
            // Parameters : name, imgUrl, capacity, cellSize, scene
           // var spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "textures/palm.png", 2000, 800, scene);
   
            //Create a manager for the player's sprite animation
            var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "textures/player.png", 2, 64, scene);
        
            // First animated player
            var player = new BABYLON.Sprite("player", spriteManagerPlayer);
            player.playAnimation(0, 40, true, 100);
            player.position = new BABYLON.Vector3(0, 9, 20);
            player.size = 0.6;
			player.ellipsoid = new BABYLON.Vector3(64, 64, 64);
			player.checkCollisions = true;

			

			
			var plane = BABYLON.Mesh.CreatePlane("plane", 120, scene);
			plane.position.y = 0;
			plane.rotation.x = Math.PI / 2;
			plane.ellipsoid = new BABYLON.Vector3(120, 120, 120);
			plane.checkCollisions = true;		
			plane.setPhysicsState( { impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 1, friction: 0.5, restitution: 0 } );
			
        
				 //Creation of a repeated textured material
			var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene);
			materialPlane.diffuseTexture = new BABYLON.Texture("textures/Face.png", scene);
			materialPlane.diffuseTexture.uScale = 2.0;//Repeat 5 times on the Vertical Axes
			materialPlane.diffuseTexture.vScale = 2.0;//Repeat 5 times on the Horizontal Axes
			materialPlane.backFaceCulling = false;//Always show the front and the back of an element
           
		   plane.material = materialPlane;
	
		   
		   scene.registerBeforeRender(function () {
		   
			var move = 0.01;
				
		        
				player.position.y -= move;
			
				
				if(player.position.y <= plane.position.y){
				
				
				
				
				
				}
				
				if (plane.intersectsMesh(player, true)) {
				 
					move = 0;
					
				}
		
			
			
		});
	

            
        
            return scene;
        }
        
        
        var scene = createScene();

        engine.runRenderLoop(function () {
            scene.render();
        });

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

 

player.png

Face.png

Link to comment
Share on other sites
Wingnut Newbie

Wingnut

Posted
Posted

Hi En929, good to see you again.  Wow, that's a big post!  We probably didn't need to see the code. :)

Let's get the big question out of the way.  Do you want 2D text or 3D text?

BJS uses a 2D-based system called dynamicTexture.  Do some playground and forum searches... you'll find lots of results.  Be aware that the 2D method in the link above... is a "special" version.  Someone was doing some advanced experimenting... mapping text onto textures.  Our dynamicTexure class is a bit simpler, and has a drawText method to make your job easy. 

Advanced text in BJS will lead you to learn the Context2D interface, which you might already be familiar-with.  Generally speaking, all of our text is context2D, but we put it on a texture that is mapped-onto a plane or box, sometimes.

Have you seen our "debug layer"?  That is yet another type of text-over-3D.  We also have bGUI, castorGUI, and Dialog... all are systems to do advanced text and substantial GUI forms.  All of those terms are good search terms, too.

We really don't have a decent dynamicTexture tutorial yet, but you can look at the class and see the format of the drawText method... right here.  Do some searches, look at some playgrounds, (lines 22-24), and then let us know if you need more assistance.   By the way, 3D text is challenging... vertex-heavy and import-needing.  The text used for the 3D text in the above link... was modeled in Blender. 

You can also absolute-position HTML elements atop the canvas... but there is an issue with um... CocoonJS?  Not sure.  Something about having it's DOM in a cocoon, or something like that.  :)   Be well.

Link to comment
Share on other sites
En929 Newbie

En929

Posted
  • Author
Posted
14 hours ago, Wingnut said:

Hi En929, good to see you again.  Wow, that's a big post!  We probably didn't need to see the code. :)

Let's get the big question out of the way.  Do you want 2D text or 3D text?

BJS uses a 2D-based system called dynamicTexture.  Do some playground and forum searches... you'll find lots of results.  Be aware that the 2D method in the link above... is a "special" version.  Someone was doing some advanced experimenting... mapping text onto textures.  Our dynamicTexure class is a bit simpler, and has a drawText method to make your job easy. 

Advanced text in BJS will lead you to learn the Context2D interface, which you might already be familiar-with.  Generally speaking, all of our text is context2D, but we put it on a texture that is mapped-onto a plane or box, sometimes.

Have you seen our "debug layer"?  That is yet another type of text-over-3D.  We also have bGUI, castorGUI, and Dialog... all are systems to do advanced text and substantial GUI forms.  All of those terms are good search terms, too.

We really don't have a decent dynamicTexture tutorial yet, but you can look at the class and see the format of the drawText method... right here.  Do some searches, look at some playgrounds, (lines 22-24), and then let us know if you need more assistance.   By the way, 3D text is challenging... vertex-heavy and import-needing.  The text used for the 3D text in the above link... was modeled in Blender. 

You can also absolute-position HTML elements atop the canvas... but there is an issue with um... CocoonJS?  Not sure.  Something about having it's DOM in a cocoon, or something like that.  :)   Be well.

 

Thanks Wingout, yes for now I just wanted to do 2D Text. It's just to map out where I'm going when I'm moving around so that I can know where to put stuff. I admit, I tried some of the things in the links above, but I don't know why the text still isn't showing in the code example that I made above.

Link to comment
Share on other sites
En929 Newbie

En929

Posted
  • Author
Posted
12 hours ago, Deltakosh said:

Furthermore @Nockawa is working on a great tool to implement Text2D. Soon available in bjs2.4

Deltakosh, I wish there was a very very very very simple game example that implements all of the basic things (piece by piece) that one would need to make a game. For example, it could have one person walking around as in an animation example, one collision example, controls with the keyboard, controls with the mouse, and have a score to show how text works, and how for/loops work. i.e., maybe a game featuring an animated man (that would be similar to Mario walking around) colliding with a box or a turtle and everytime he collides with the box or turtle, it scores. I admit, I'm an intermediate programmer and am still learning and I think such an example would help. Thus, are any such super super super simple game examples around this site?

Thanks

Link to comment
Share on other sites
Wingnut Newbie

Wingnut

Posted
Posted

Hi guys.  @En929... some people ask "Where does BJS webGL framework end, and where does third party BJS-based game-maker software... begin?"  Where should the borders between "layers"... be located?  Some people are asking for BJS "core only" please, because some say BJS has too many "game-making helpers".  Others want to grow BJS 2x size and make a full-power game-making system.

All are free to do as they like.  I love it.  To remove heavy workload from BJS core dev team, we average users must try to maintain our own extensions and game-maker layers.  To be truthful, people are still experimenting with basic game-making layers atop BabylonJS framework.  Check this out.

That's @Temechon website.  He's an excellent coder, fine tutorial writer, and darned nice guy.  You can find lots of good info about game-making... at his website.  We have a tutorial called "creating a convincing world" that is quite nice.  It is a good start to a fine game.  @RaananW is another great guy and excellent programmer, and he has a fine basic game tutorial at https://msdn.microsoft.com/en-us/magazine/mt595753

Walking/running a 3D player in a scene... is a challenge.  MANY are experimenting with it.  We have seen good and bad.  We can talk more about that, soon.

Now, En... are you ready for hell?  :D

http://playground.babylonjs.com/#TDM98#1

note #1:  I would not adjust .ellipsoid too much.  Sometimes mesh.ellipsoid.scaling = new BABYLON.Vector3(1.1, 1.3, 1.1); is ok... little tiny adjust.  Avoid big adjustments.  :)

note#2:  I think player.intersectsMesh not work because...  sprites are not really a mesh.  Maybe.  Maybe I'm wrong... but maybe right.  I used your first test method... line 74... works good.

I start both player and camera up in the air.  See camAdjust call... it follows falling player to the ground.  This is why we cannot pan camera while player falling.  When player hits ground, I "reprogram" camAdjust func... via line 76.  This releases camera... okay to pan again.

Camera is still in the air, and camera.applyGravity == true.  (I reduced scene gravity MUCH, so cam would do slower fall).  Why is camera not falling? 

Because you need to hit any arrow key... and then the camera will fall to ground.  I can't remember if we have a work-around to make camera instantly fall, or not.  I'm getting old... I forget things.  :)  camera.needMovedForGravity = true, I think.

Notice camera did not follow player during its fall.  Sucks, eh?  We need a camera that follows player UNLESS user tries to pan.  Then it releases from player following.  Then if we don't pan camera after 10 secs, it goes back to following player.  :)  Such things can be programmed.  Is it part of BJS framework, or part of game-making software?  hmm.

On another subject, we have text, using our handy drawText method.  YAY!   It is NOT parented to player, because... I am not sure that a sprite is a mesh.  I'm not sure if it can DO parenting.  http://doc.babylonjs.com/classes/2.3/Sprite ... shows no indication that sprites are subClass of abstractMesh or Node.  I don't think sprites are 'mesh'.  So, I actually change the position of the textPlane in line 71 of the render looper thing.  

I am printing the player.position.y repeatedly.  But, I cannot find an easy way to erase old text before each draw.  SO, text draws atop old text, and soon cannot read.  Sucks, eh?  Workarounds are nearby, but they suck, too.  :(

One last thing.  Intersect, collisions, camera.applyGravity, moveWithCollisions(), these are things involved in the NON-physics engine collision system that is built-into BJS framework.  It is different from scene.enablePhysics, mesh.setPhysicsState, etc, which are used with the third party physics engines such as Oimo and Cannon.  Built-in collision system is MUCH faster, but doesn't do mass-testings, or restitution/bouncing/rebounding... unless you code that part yourself.  MANY MANY people get the two collision systems confused.  One should try to use one, or the other, and avoid using both UNLESS... you have your ducks in a row.  :)  (unless you are a pro)  I am not.  Line 38 de-activated.  We can set scene.enablePhysics and re-activate line 38... later if we want... but not for our current tests.  Cool with you?  I hope so. 

Ok, that's all I have for now.  Wasn't I helpful?  I made little mess into BIG mess, yes?  :)  I'm so proud of me.  hah

Link to comment
Share on other sites
  • 8 months later...
  • 9 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...