[SOLVED] - U3D - BabylonJS Game Editor Toolkit

[MackeyK24]

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

 

[davrous]

Wow!!! Very, very cool! I love the way you've improved our Unity exporter. Awesome job.

Are you going to share it soon with the community?

David

[jerome]

impressive work !

[MackeyK24]

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 ?

[Pryme8]

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.

[Sebavan]

SWWWWWEEEEEETTTTT !

[Kemal UÇAR]

Very nice work Mackey congratz !!

[dbawel]

Good Work. Perhaps Unity has a future....

[GameMonetize]

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

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 !

[davrous]

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!

[MrVR]

Congrats @MackeyK24   these features on the exporter are amazing really amazing, all the work done with out a line of code!!  

[MackeyK24]

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

 

[GameMonetize]

WE WANT IT NOW

[MrVR]

@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 .

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.

[MackeyK24]

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 November 23, 2016 by MackeyK24
Clarify Scene Component Instancing And Added AFTER Render

[MackeyK24]

Check it out: U3D - BabylonJS: Proof Of Content - First Playable Toolkit Made Game

[MackeyK24]

@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

 

[MrVR]

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  @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 

 

 

 

[MackeyK24]

Very Kool... I think the merge went thru

 

[MackeyK24]

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

[MackeyK24]

You @MrVR

U3D - BabylonJS Editor Toolkit Update System

Keep your game projects update to date with the babylon.js framework libraries and check out new preview release versions as well

 

[MrVR]

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

[MackeyK24]

@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

 

[MrVR]

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 

 

 

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 

[MackeyK24]

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)