Game engine for threejs http://ocio.games/threejs/

Showcase
1

Hello everyone
I`m new to three js after some research i have decided to create an extension for threejs using typescript
Here is a small demo http://ocio.games/threejs/

The idea is to have a development interface similar to Unity where you can easily create update and destroy objects also add missing functionality like scene switching keyboard input, collisions or sound management. Possibility to embed all the model inside in the main js.
What do you think shall I continue with this ?

Code example of the bullet object.

class Bullet extends Object3D {

    public tag = 'bullet';

    Init() {
        return Loader.models.bullet.clone();
    }

    Start() {
        this.scale.x = 10;
        this.scale.y = 10;
        this.scale.z = 10;
        this.audio.setBuffer(Loader.sounds.shoot);
        this.audio.setVolume(10);
        this.audio.play();
    }

    Update() {
        this.position.x += Time.deltaTime * 100;
        if (this.position.x > 32) {
            this.Destroy();
        }

        if (Engine.scene.list.enemy) {
            Engine.scene.list.enemy.forEach((enemy) => {
                if (this.collision.sphere(enemy)) {
                    this.Destroy();
                    Engine.scene.add(new Explosion(this.position));
                    enemy.applyDamage(1);
                }
            });
        }

    }
}
2 Likes
2

First of all, please change the key for fire because CTRL+W close the current window :sweat_smile:

3

Nice one :slight_smile:
Replaced to shift.

In fact I`m looking for optimal combination of keys up down left right and actions ABC to be supported by default
Also for 2 players.

4

You can try extending three editor first.

I have as much gamedev experience as the next guy, but imo writing (1) the entire engine logic + (2) model handling / materials / scenes + (3) UI + (4) adding missing functionality (I think you mean some scripting language?) + (5) final game bundling + (6) optimisations / instances etc. - it’s all far more than enough to make someone give up after a week just because it’s overwhelming and hard to plan out :] With the current three editor you at least have points 1-3 done, and you’ll learn faster if adding the rest makes sense.

Also, if you’d be building a game engine UI pls build upon stuff like Mario Maker or RPG Maker XP, both Unity and Unreal have stunning technology and features but their UI is an ugly mess :')

5

This is my first game engine i wrote from scratch.
And a demo game for it
http://ocio.games/heart/

Here another one with the same engine
http://ocio.games/hell/

Bassicaly i`m planning to link its functionality to three js.

6

I do want to contribute but i need some guidance. For instance about editor itself maybe i can implement the scripting (typescript and the builder) in there.

7

What I meant was that you could clone the editor as a starting point for your own engine - since it offers the UI and a lot of stuff you’ll need already done.

Not sure if the main editor repo has an ambition of becoming a game engine, since it’s also used by non-gaming developers, but who knows.

8

It would be cool if there was a guide for contributing to the editor. Or at least documentation of how it’s built and what goes where. I tried getting into it once, but got quickly spooked away

9

The current threejs editor can make simple modifications to the scene, change the material, modify the attributes of the mesh, export and load the model, as well as simple scripts and shaders… However, there are still many limitations, such as unity or playcanvas, which can not add modification scripts freely in the form of components.
You can look at the source code of threejs‘s editor.

In addition, do you plan to open source your game？Also as a beginner, you are excellent！！

10

Yes it will be open source,
Here the source of the demo and the engine.

The ts compiler you still need to setup.
I do plan to create a compiler or something to easily compile the project.

1 Like
11

Compiler adjusted.
Just do
npm install
tsc

In adittion you can

npm install terser -g
terser app.js --output app.min.js
to create minified app.min.js

More in progress.

12

I simply modified your code.

1 Like
13

I love how clean that source code looks. :heart:

14

Hi, you really did a good job.I played heart and hell games. I’am doing my own engine en Javascript (because I can not stop of reinvent the wheel, doing from scratch let me learn what is under de hood).

If you don’t mind. Can I ask you about the code? Specially canvas resize for multiplatform and sound engine.

Thousand of thanks

15

Hi.
Sure. Feel free to ask.