Jump to content

How do I: control a ball and create a contained game world?


Recommended Posts

Hello, relatively new to game/3D design.

I'm building a game of survival: a constant flow of objects keeps falling around your ball while you attempt to stay on a platform.

I've got two things I'm working on:

1. I'm trying to give the user some sort of control over the ball. Either with mouse or keyboard.

2. I'm currently looking for a solution for my game world boundaries. Currently, the objects just bounce and keep falling forever (which I imagine isn't very memory efficient), also, if your ball falls off the platform, I'll need a way to generate a "lose scenario", like perhaps a listener that detects when your ball has reached this game world boundary that hasn't been built yet?

Grateful for thoughts and help!


Link to comment
Share on other sites

Hiya AJTJ... welcome to the forum!  We once had a maze contest here, so a forum search or playground search... for 'maze'... might be a wise start.  That would certainly give you introductory code for mesh/player navigating/control.


That's a pretty fine maze demo, there.

Basic mouse-dragger with old-style/DOM pointer events.  https://www.babylonjs-playground.com/#HHFBT#2

Right-click on grass to make box aim that way... https://www.babylonjs-playground.com/#CZRC0#2

Hold shift, alt, or control... while clicking these boxes... https://www.babylonjs-playground.com/#1HXY4E#4

Here is fancier non-DOM keypress-listening system, and we are positioning a sphere.  https://www.babylonjs-playground.com/#Y1W3F9#2

Here is an escalator.  Use arrow keys to move camera until it hits collide-sensors at ramp top/bottom.  Then animation does the rest, yet you can look around during the trip.  :)

In this playground, we are looking at a potential bug, but it still shows some (modern) use of ActionManager onEnter/onExit events... good for testing if something has collided with walls.

ActionManagers are wonderful, and easy, after a short learning curve.  Here is a little too much actionManager... for pointers.  :)  https://playground.babylonjs.com/#6CY2EU#4

Just visit our playground...   see the button that says "basic scene"?  Click it, and start touring some of those... you'll be off and running with BJS in no time.  Edit ANY of those, and SAVE new versions of them... (and bookmark those new URLS so you can play with them again, later).  Grab a zip of all of them... build your own Lake Babylon (giant pile of demos) on your home computer, claim they are yours, use all the code, no problems.   Make yourself a little web page of "Links to Everything BabylonJS" - it will be super handy and double your learning speed if you browse it often and keep it fresh.

Get to know the scene big 3... mesh, cameras, lights.  Get to know the mesh big 3... rotation, position, and scaling.  Generally, only one material is allowed per mesh.  StandardMaterial is #1 most-used type of material, but many specialty materials have been invented. 

A standardMaterial has "channels"...  about 4-7 of em, and they often mix/sum/complement with each other... on that material.  EACH channel... allows a color OR a texture.  Some channels can have colors while others have textures... no problem.  Colors can be over-driven, and textures over-LEVEL'd, scaled, wrapped, rotated, positioned.

In my opinion, BJS has THE BEST webGL materials system in the world, right now.  And not just by a little bit.  By a crapload.  BJS materials are completely groovy, and consistently on the "bleeding edge".

Okay, you should be off and running.  Feel free to talk, ask more questions, share your show'n'tell projects/experiments... we'll be here.  :)  I hope I've been helpful.

One more?  Ok, we got retarded with drag, shift-drag, control-drag, alt-drag... in THIS thread.  Goofy fun experiments.

Link to comment
Share on other sites

Hey thanks! I've figured out a couple things related to this, but now I'm having a new issue trying to get the GUI to work.

Currently getting this error when I try to reference gui. I've also tried using the NPM version etc etc... nothing seems to work. I've looked in the forums too.


babylon.gui.min.js:1 Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at __extends (babylon.gui.min.js:1)
    at babylon.gui.min.js:1
    at t.GUI.t.GUI (babylon.gui.min.js:1)
    at t (babylon.gui.min.js:1)
    at babylon.gui.min.js:1
    at t (babylon.gui.min.js:1)
    at babylon.gui.min.js:1

Link to comment
Share on other sites

Thanks everyone! It's been great having a community.

Here was the solution:

import * as GUI from 'babylonjs-gui';

We had to rename it to fit into the examples given.

check out the current incarnation at http://aaronjanke.com/ballGame/

Github: https://github.com/ballAndBoardInc/ballGame

I created a new thread for my next issues, please weigh-in over there with your insight!

New thread: 


Link to comment
Share on other sites


Player movement is a little hot.  :)

Maybe you should read this... http://www.html5gamedevs.com/topic/36672-movewithcollision-issue-quirks/?tab=comments#comment-210347

It tells of a way (with included PG) to use a physics joint... between (invisible) keyboard-moved physicsImpostor/mesh, and playerImpostor/mesh.  Less issues with physics over-powering.)

I like the concept of your game.  Fun!  "Avalanche"?  "Rock Slide"?  "Roger the Dodger"?  :) 

Link to comment
Share on other sites

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.

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.


  • Recently Browsing   0 members

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