Jump to content

3D arcade machine


KuroNo_
 Share

Recommended Posts

Hi. I'm new to babylon.js and to WebGL in general. I've browsed through http://doc.babylonjs.com/tutorials but I'm still having difficulty in coming up on the correct ways on how I can achieve what I want.

So I'm trying to replicate this arcade machine ( on the image attached ). I'll list the ways I can think of on achieving this:

- for the bottom part that has a shape like this: \_/ 

  From what I've read, babylon.js has a library for common shapes like cube, spheres etc. but not shapes like that. So the only option left is to use ribbon?

- the controls

  I'm planning to make this using image texture and height map.

- upper part

  same problem as the bottom part

- lastly, the screen

  is there a way to make it somewhat glowing as if it was emitting light?

 

Any advice or tips will be very helpful.

 

KR.jpg

Link to comment
Share on other sites

Hi @KuroNo_ welcome to Babylon!

First off, for the bottom part, I think you want to implement a frustum-type shape? 'Cause if so, it has already been discussed here:

And I believe you can use same technique for the upper part as well.

Second, the controls... I am not really sure what you mean there? Do you mean keyboard controls or virtual controls on the arcade machine itself? If you mean keyboard controls then they are easily handled with:

window.onkeydown = function(evt){
   if(evt.keyCode === keyboardKeyYouWantToUse){
      // do something
   }
}

Third, glowing effects. Well, those are called post-processes! You can find out more about them here: http://doc.babylonjs.com/tutorials/How_to_use_PostProcesses

You can also create your very own custom post-processes, but you need knowledge of shaders. @deltakosh who is the creator of Babylon has an interesting article about it you can check it here: https://blogs.msdn.microsoft.com/eternalcoding/2014/04/17/what-do-you-mean-by-shaders-learn-how-to-create-shaders-with-babylon-js/

Enjoy! :) 

 

Link to comment
Share on other sites

About the shape of your arcade machine, using ribbons is not that straight forward unless you are able to manage your underlying geometry (I mean, there's no magic : the ribbon only creates a surface onto a geometry).

Maybe could you first have a look at the provided polyhedrons : http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#polyhedron

You can also get a standard box and update its vertex positions or use an imported Blender model ...

Many ways to go

Link to comment
Share on other sites

eh, depends on how intense you are going... building things by code becomes second nature once you start doing it, and then becomes really fun when you start using that to do procedural stuff, and are able to do really complex things (like different buildings, or plants) by just generating it with a seed.

The first steps though, would be to simplify this into basic shapes, and look into subtract modeling techniques and this:https://doc.babylonjs.com/classes/2.3/CSG

Link to comment
Share on other sites

13 hours ago, OMAR said:

Second, the controls... I am not really sure what you mean there? Do you mean keyboard controls or virtual controls on the arcade machine itself? If you mean keyboard controls then they are easily handled with:


window.onkeydown = function(evt){
   if(evt.keyCode === keyboardKeyYouWantToUse){
      // do something
   }
}

My bad for being unclear. What I mean there is the physical controller. I figured it would be more difficult to create the buttons 1 by 1 instead of just making a flat image of buttons then elevating the correct areas using height map.

Thanks for the response, will definitely check out the things you said.

Link to comment
Share on other sites

not really...
var buttons = [];
for(var i =0; i < 3; i++){
    for(var j = 0; j < 2; j++){
          if(!buttons.length){
               buttons.push(createmesh- a sphere with a arc or slice set to 0.5);
                continue
          }
     buttons.push(buttons[0].clone('button'+buttons.length, null, true));
      buttons[buttons.length-1]position = new BABYLON.Vector3(i*100, 0, j*100);
   }
}

You would not need a physics controller for the buttons, just register click events or something or key events and animate accordingly.
You would only need a physics controller for you know physics stuff ^_^

Link to comment
Share on other sites

13 minutes ago, Pryme8 said:

not really...
var buttons = [];
for(var i =0; i < 3; i++){
    for(var j = 0; j < 2; j++){
          if(!buttons.length){
               buttons.push(createmesh- a sphere with a arc or slice set to 0.5);
                continue
          }
     buttons.push(buttons[0].clone('button'+buttons.length, null, true));
      buttons[buttons.length-1]position = new BABYLON.Vector3(i*100, 0, j*100);
   }
}

hmmm yes I've thought of this but since there are three different shaped buttons, I'll need to add some conditions so that's still basically 1 by 1 ( model wise ).

I get your point that you're making everything through code. I certainly want to do things like that too. Is it advisable to make models through code right from the start?

I'm thinking of using modeling softwares first (I don't even know it's possible if not from this post) and understand other concepts.

Link to comment
Share on other sites

whoa whoa whoa, dude awesome sounding project, right now I am doing a tutorial on how to do a surface2air missile and I use nothing but primitive to construct it.  you would prolly be interested it when Im done.

After that Ill take a crack and making your arcade machine and attach some game pad controllers, which I will do with advance extrude methods.  This will be the best method to save on draw calls.

Link to comment
Share on other sites

5 minutes ago, KuroNo_ said:

btw I'm also planning to recreate those characters in the image and eventually turn this into a game

if you want to create characters I strongly suggest using a 3D modelling application then importing it into Babylon.js.  All your 3D models, materials, textures, cameras and lights will be set up in one import command.

Link to comment
Share on other sites

8 minutes ago, Pryme8 said:

whoa whoa whoa, dude awesome sounding project, right now I am doing a tutorial on how to do a surface2air missile and I use nothing but primitive to construct it.  you would prolly be interested it when Im done.

After that Ill take a crack and making your arcade machine and attach some game pad controllers, which I will do with advance extrude methods.  This will be the best method to save on draw calls.

but ofcourse! If you'll be kind enough I won't be turning that off, I'm actually better on reading someone's code instead of creating things from scratch.

The game would be a multiplayer (will probably use socket.io here), sort of a liar game, where you'll convince the other players on teaming up with you and eventually killing them too since only 1 player will win.

Will use audio instead of a chatbox for communications.

It's really a big project. Will probably finish it in a year or so because I also have other things to do.

Link to comment
Share on other sites

2 minutes ago, ozRocker said:

if you want to create characters I strongly suggest using a 3D modelling application then importing it into Babylon.js.  All your 3D models, materials, textures, cameras and lights will be set up in one import command.

Is there a way to programmatically add animations or It's like "load it, view it"?

Link to comment
Share on other sites

7 minutes ago, KuroNo_ said:

Is there a way to programmatically add animations or It's like "load it, view it"?

You can also export animation from 3D modelling applications.  Babylon.js is very restrictive with animation though.  There is no root motion, vertex morphing or combining animations, like running and shooting at the same time.  If your project is going to include all that you might want to use Unity3D webGL instead.

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.

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

  • Recently Browsing   0 members

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