[WORKING] - U3D - BabylonJS: A Proof Of Concept

[MackeyK24]

U3D - BabylonJS: A Proof Of Concept

Not too long along I suggested on these forums to create a dedicated babylonjs game editor. It started out as some kool built in features and enhancements like I show in my first two videos to really take advantage of the Unity3D Game Editor. We used a bunch features without any code (the only global code was added at the end to to rotate the cube). But now I think i just finished my first version of the accompanying U3D - BabylonJS Scene Component API to really make a complete development IDE that is light weight for our BabylonJS Typescript WebGL based web applications, and provides us BabylonJS folks a whole lot of professional game editor features to make our game with. (basically whatever you can do programmatically in the Unity Editor at design time when the export runs... That means ANYTHING... It does not have to even come from unity... anything that is useful to you to serialize into metadata for your game.)

Check out my latest session. We create our first playable BabylonJS Toolkit Made Game, Unity Style:

U3D - BabylonJS: First Playable Game - Part 1

U3D - BabylonJS: First Playable Game - Part 2

U3D - BabylonJS: First Playable Game - Part 3

Play My First Ball Demo Game Made With BabylonJS Toolkit

I think we got the making to ease our development process, especially for larger games. If I can do this (And I Am A Newbie, I just started with babylon a month or two ago. I just could not deal with NOT having a good game editor... So i made the toolkit FIRST... This is actually MY FIRST PLAYABLE BABYLON JS MINI-GAME... EVER  ) .. But yeah, if i can do this, then you should be able to do ANYTHING babylon.js framework can do... Just with a light-weight babylon.js scene component api and professional grade game editor.

Update: I found issue in last video with 'Next Level' button visibility. I forgot to "Re-Export" Level2 and Level3 (The html markup is embedded in the scene file and was still using the markup WITHOUT the hidden class)

[MrVR]

Hey very nice @MackeyK24 I cant wait for you to release the API, You mention larger games, I was planning on using a task Runner like GULP and Angularjs to create one scene per module or page, this approach allow me to minified the code and some other good stuff to compress the app with gulp and manage files with angular template system, I was planning to make  a video as well in how I use this tools to manage large amount files, it also allow you to create an user interface per scene etc....

But I have many problems with the current unity exporter, especially when I apply animations to the characters they get deformations on the mesh with motion lol, 

anyways man I'm a newbie too, thank you for taking the time to share. 

 

 

[GameMonetize]

Can't wait for the PR as well

[MackeyK24]

Take a look at the videos above for part 3: gamepad user input and finally deployment of game

Play My First Ball Demo Game Made With BabylonJS Toolkit

[MrVR]

Hey @MackeyK24 nice game three levels, did you made it all in unity and then exported ready like that with no code in babylon? 

[adam]

27 minutes ago, MrVR said:

did you made it all in unity and then exported ready like that with no code in babylon? 

Watch part 2 to quickly get an idea of where BJS code goes.

edit: You can see how to set up the scripts starting at about 8:00 of part 1. 

 

[MackeyK24]

Watch Part 1... is long but you see the actual code.

We use Scene Components (so you get full code encapsulation, no spaghetti code)...

Example PlayerController.ts that move the player ball based on user input:

/* 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;

        private count:number = 0;
        private items:BABYLON.Mesh[] = [];

        private element:HTMLElement = null;
        private winner:HTMLElement = null;
        
        public start() :void {
            console.log("Player controller started...");
            this.speed = this.getProperty("speed", 0.0);
            this.items = this.scene.getMeshesByTags("Pickup");
            this.count = 0;

            this.element = document.getElementById("count");
            this.winner = document.getElementById("winner");
            this.winner.innerHTML = "You Win !!!";
            this.updateCollectionCount();
        }

        public update() :void {
            this.updatePlayerMovement();
            this.updatePickupCollisions();
            this.updateCollectionCount();
        }

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

        private updateCollectionCount()
        {
            this.element.innerHTML = "Count: " + this.count.toString();
            if (this.count >= 12) {
                // You Win !!!
                var next:HTMLElement = document.getElementById("next");
                next.className = "";
                this.winner.className = "";
            }
        }

        private updatePickupCollisions(): void {
            if (this.items != null) {
                this.items.forEach((item)=>{
                    if (item != null && item.intersectsMesh(this.mesh)) {
                        if (item.isEnabled()) {
                            item.setEnabled(false);
                            this.count = this.count + 1;
                            this.updateCollectionCount();
                        }
                    }
                });
            }
        }

        public destroy() :void {
            console.log("Player controller destroyed...");
        }
    }
}