MackeyK24

[SOLVED] - U3D - BabylonJS Game Editor Toolkit

Recommended Posts

Take a look at where I'm going with this and let me what you think. It is basically a heavily modified Babylon Unity Exporter :)

Demo Video Link

U3D - BabylonJS Game Editor Toolkit Quick Intro

 

Demo API Update

Warning: I tried to make it shorter, i took a deep breath and spoke as fast I could but it still took about 1 hour and 20 minutes. But the technical folks who are up to it and want to see how to use and how i put together a Manage Scene Component API with a light weight 'Unity-Style' life cycle with native babylon scene hooks for 'start, update and destroy' stages... Then this is for you :)

U3D - BabylonJS Scene Component API Intro

Note: I found the problem at the end of the video with the getSceneMarkup function. I had to move the controller.ready() to AFTER the scene.manager has been set. But you should still where i was going with that :)

 

Share this post


Link to post
Share on other sites

Thanks for the kind remarks... That whole thing is really built on top of the brilliant idea whoever came with that exporter... I mean using the Unity API to build native babylon scene info (Especially with the metadata additions that allow all the component stuff)... Sweet... When i saw that... I just took it and ran with it :)

I am really trying to make a WORKFLOW easier for me (and hopefully others) to create LARGER scale babylon apps using all the Professional Game Editing features of the most popular INDIE game editor on the planet right now. 

I just need to finish out some of the component stuff then i was going to submit. The only problem is that the structure of the plugin as changed dramatically so i don't think i can just PR over top of the original exporter... So how should i go about submitting ... Make a new 'sub project' called something else or what ?

Share this post


Link to post
Share on other sites

Wow, I did not think this would be this simple to pull off pretty cool dude.

 

i am watching your video in full tonight and gonna replicate the process and see how easy this is but it looks super simple, and just scanning through it made sense so I'm excited like really excited, and I'm wondering if this means I can convert some of my existing unity games to bjs.

Share this post


Link to post
Share on other sites

This is really amazing man! I'm so happy that we added some meta data for you :D

Regarding submission, I would say: go to babylonjs/exporters/unity5 and create a new branding for your exporter. When published we will flag the original one as deprecated !

Share this post


Link to post
Share on other sites

It would be cool to shoot a video like you've done, maybe shorter to put that in the documentation also. So happy to see this coming. I'm glad we've dedicated a bit of our time building the first steps of this Unity Exporter. :) 

Thank you so much for pushing that to a much more interesting value prop!

Share this post


Link to post
Share on other sites

If you had not checked out the latest Scene Component API video, Check it out:

U3D - BabylonJS Scene Component API

More Videos Or Not???

My last part is going to be a full debug 'hammer out' issues phase. I was going to do that be recreating the Unity Roll-A-Ball Demo project. 

If these videos are getting to 'much' i won't bother recording myself porting that game. But if there are a few techies out there that would like to see that, let me know and ill record that last part before posting the whole project on the BabylonJS github :)

 

Share this post


Link to post
Share on other sites

@MackeyK24 Nice going adding the component  approach,This will make it easy on building large and scalable applications, it would be nice to add a  browser-sync dependency so you can test mobile devices at the same time in different browsers :D.

Is there a limit in the amount of components that can be loaded into an scene or you can keep stacking component after component  with out compromising loading time and performance?

Thank you. The videos are very helpful, makes babylonjs easier to manage with the api.

Share this post


Link to post
Share on other sites

The amount of components in a scene is really gonna be on how many "Light-Weight" scene component classes you can instantiate in your browser... I ran tens of thousands no problem (instances in a loop, NOT actual game objects with scripts attached but just the instance of the scene component..Since that all I'm really doing during the parse in a loop for how every many meshes, lights and cameras have 'component metadata')... The real magic happens because of the way i 'wrap' instances (that are really just constructed and store int he metadata.component[x].instance). They just stay they... but its instance.update function is registered with the scene.registerBeforeRender... So it does not even have to main any kind of tick list or anything.... you get automatic START... UPDATE...AFTER... AND DESTROY on an instance that was already created during the native scene deserialization... Its just instantiated and sitting there waiting to be  STARTED (on first frame 0)... Then UPDATED (every frame after 0)... then runs AFTER render and DESTROYED (whenever the actual mesh.onDispose or scene.onDispose). Since it ties into the native scene.registerBeforeRender... Everything is NICE and SMOOTH with virtually no overhead (apart from instantiating your scene components... So keep em light in construction... AS ALWAYS keep your loop as optimized as possible... NEVER FIND anything in your loop and try NOT to GET what you can store on start and use that field or instance or whatever in the loop)... So far i am creating Unity Demo... Verbatim ... Just doing babylon api stuff in the start and update instead of unity stuff...

Here is a sample from  Unity Roll-A-Ball Demo... The class is a light and clean scene component using physics to move the ball around -- EXACTLY like the training video :

First a sample scene controller that starts the game (note the execute when 'ready' is the entry point):

/* Babylon Scene Controller Template */
/* <reference path="{*path*}/Assets/Babylon/Library/babylon.d.ts" /> */

module PROJECT {
    export class MyController extends BABYLON.SceneController {

        public ready() :void {
            // Scene execute when ready
            console.log("Ball Demo Game Starting...");
            this.getManager().enableUserInput();
        }

        public start() :void {
            // Start your component here
        }

        public update() :void {
            // Update your component here
        }

        public after() :void {
            // After owner render here
        }

        public destroy() :void {
            // Destroy your component here
            console.log("Destroying my scene controller...");
        }
    }
}

 

And a very simple player controller:

 

/* Babylon Mesh Component Template */
/* <reference path="{*path*}/Assets/Babylon/Library/babylon.d.ts" /> */

module PROJECT {
    export class PlayerController extends BABYLON.MeshComponent {

        private speed:number = 0.0;
        private manager:BABYLON.SceneManager = null;

        public start() :void {
            // Start your component here
            this.manager = this.getManager();
            this.speed = this.getProperty("speed", 0.0);
        }

        public update() :void {
            // Update your component here
            this.updatePlayerMovement();
        }

        public destroy() :void {
            // Destroy your component here
            console.log("Destroying ball player controller...");
            this.manager = null;
        }

        private updatePlayerMovement(): void {
            var horizontal:number = this.manager.getInputAxis(BABYLON.UserInputAxis.Horizontal);
            var vertical:number = this.manager.getInputAxis(BABYLON.UserInputAxis.Vertical);
            this.mesh.physicsImpostor.applyImpulse(new BABYLON.Vector3(horizontal * this.speed, 0.0, vertical * this.speed), this.mesh.getAbsolutePosition());
        }
    }
}

 

Sample ball video attached just show the babylon physics move ball from tutorial video with component api and SceneManager.getInputAxis() Helper Functions :)

SampleBall.mp4

Edited by MackeyK24
Clarify Scene Component Instancing And Added AFTER Render

Share this post


Link to post
Share on other sites

@MrVR @Wingnut @Sebavan and any others waiting... I finally got a good release packed with tons of Unity style functionally that we can take advantage of for our native BabylonJS game development. @Deltakosh is looking things over now. Hopefully will be available soon.

I put together this test little project U3D - BabylonJS: Getting Started Review in the video to go over what you need to get you up and running using a:

- Scene Controller

- Camera Component

- Light Component

- Mesh Component

Those are the main building blocks of the managed scene component api.

Anyways i hope you all make some kool "shit" with it... I am about half way through the Space Ship Tutorial (I have and ANY time since i started this little project to actually work on a game... So this will only be my second game made...LOL). After that i plan to tackle a couple of the Game Institute classes... I really wanna try make a light weight WEBGL (i know won't match the original.. but just see what i can come up with) version of that GI Racing using my toolkit... Just to see if it can be done :)

 

Share this post


Link to post
Share on other sites
9 hours ago, MackeyK24 said:

@MrVR @Wingnut @Sebavan and any others waiting... I finally got a good release packed with tons of Unity style functionally that we can take advantage of for our native BabylonJS game development. @Deltakosh is looking things over now. Hopefully will be available soon.

I put together this test little project U3D - BabylonJS: Getting Started Review in the video to go over what you need to get you up and running using a:

- Scene Controller

- Camera Component

- Light Component

- Mesh Component

Those are the main building blocks of the managed scene component api.

Anyways i hope you all make some kool "shit" with it... I am about half way through the Space Ship Tutorial (I have and ANY time since i started this little project to actually work on a game... So this will only be my second game made...LOL). After that i plan to tackle a couple of the Game Institute classes... I really wanna try make a light weight WEBGL (i know won't match the original.. but just see what i can come up with) version of that GI Racing using my toolkit... Just to see if it can be done :)

 

OMG... Merry Christmas to us :D @MackeyK24 ... Good luck with your projects, my offer still there if you need it.

Thank you so much for working hard on this I hope is release soon @Deltakosh.. congrats guys you are awesome !!!

Here is a little time line menu help for the video

- Minute 00:00 Toolkit Setup

- Minute 03:20 Editor windows Setup

- Minute 07:30 Web Server Start

- Minute 09:00 Enabling User input

- Minute 16:00 Camera Component 

- Minute 20:00 Camera Component User Input

- Minute 28:00 Mesh Component

- Minute 33:30 Light Component 

 

 

 

Share this post


Link to post
Share on other sites

Oh yeah... Now available on github. Or you can just download the unity package and use like any other unity tool:

U3D - BabylonJS Editor Toolkit Available For Download

Installation (So BabylonJS Editor Toolkit Is Listed For New Project Creation):

==========================================
BabylonJS - Toolkit Binary Package
==========================================

Place the 'BabylonJS' folder containing the .unitypackage in your Unity Asset Store folder:

- Mac: ~/Library/Unity/Asset Store-5x/

- Windows: %AppData%\Roaming\Unity\Asset Store-5.x\

- Example: ---> Asset Store-5.x
             ---> BabylonJS
                 ---> BabylonJS Editor Toolkit.unitypackage


==========================================
BabylonJS - Creating New Projects
==========================================

When creating a new unity project, select 'Add Asset Package' and enable 'BabylonJS Editor Toolkit' support.
 
 
==========================================
BabylonJS - Importing Existing Projects
==========================================

When using an existing unity project, select 'Assets->Import Package...' and choose your 'BabylonJS Editor Toolkit' unity package.

 

 

Enjoy Everyone :)

Share this post


Link to post
Share on other sites

Hi  @MackeyK24 , I did download the new PR last night, I was able to create a small scene and get rid of a couple of compiling errors due to the 'scene' and 'game' tabs but once I close them up and bring them back, the compiling error goes away, and also I have to installed the TSC compiler and get the right reference path and nodejs path, for the configuration scene 

but I still trying to get it all working like in the video, I'm going work and the videos I will report progress later today.

 

and Thanks again :D....

Share this post


Link to post
Share on other sites
22 minutes ago, MackeyK24 said:

@MrVR Shouldn't be any errors on load... are you running Unity Version 5.5 (5.4 doesn't work... too many API changes)... Please post a small video or screen snapshot so i can take a look at :)

 

@MackeyK24 I get the error below after I start the first project but I solve this closing the tabs scene and game and then ctrl + 1 and ctrl + 2 to put them back 

game and scene solve.JPG

 unitybabylonErros.JPG

unityversion.JPG

 

I also have to update my tsc and node paths to windows type , I have win 10 version now all works Im constructing the first scene controller as we speak 

tscPath.JPG

Share this post


Link to post
Share on other sites

Ahhh... Windows... I will check out on windows... But your right... Closing tabs (Scene, Game AND ASSET STORE) will clear out and reset... There is a piece of code... ExporterWindow.OnEnable (every time we first active the Scene Exporter... We 'hook' into the Asset Store Window... That may be the issue we have to fix on window)... Again i will take a look at.

BTW... Please DOWNLOAD a new Toolkit Package (some minor texture fixes using unsupported files type like .ps and.tiff ... when it has to grab the pixel data for the unsupported file types...should work fine now)

Also.. Please check out the latest "Keep Project Up To Date" video to keep your libraries (most importantly the Managed Scene component api that i will continue to add Unity-Like features to)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.