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

**URL:** <https://discourse.threejs.org/t/game-engine-for-threejs-http-ocio-games-threejs/17206>\
**Category:** Showcase\
**Tags:** game-dev\
**Created:** [July 18, 2020, 9:31am UTC](https://discourse.threejs.org/t/game-engine-for-threejs-http-ocio-games-threejs/17206 "2020-07-18T09:31:47Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![DaylightDreamer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/daylightdreamer/32/9951_2.png) [@DaylightDreamer](https://discourse.threejs.org/u/DaylightDreamer)\
**Post date:** [July 18, 2020, 9:31am UTC](https://discourse.threejs.org/t/game-engine-for-threejs-http-ocio-games-threejs/17206/1 "2020-07-18T09:31:47Z")

</div>

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/](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);
                }
            });
        }

    }
}
```

---

<div class="post-metadata">

**Author:** ![dario\_corbelli](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dario_corbelli/32/7576_2.png) [@dario\_corbelli](https://discourse.threejs.org/u/dario_corbelli)\
**Post date:** [July 18, 2020, 10:16am UTC](https://discourse.threejs.org/t/game-engine-for-threejs-http-ocio-games-threejs/17206/2 "2020-07-18T10:16:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![DaylightDreamer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/daylightdreamer/32/9951_2.png) [@DaylightDreamer](https://discourse.threejs.org/u/DaylightDreamer)\
**Post date:** [July 18, 2020, 10:38am UTC](https://discourse.threejs.org/t/game-engine-for-threejs-http-ocio-games-threejs/17206/3 "2020-07-18T10:38:31Z")

</div>

Nice one 🙂  
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.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [July 18, 2020, 6:29pm UTC](https://discourse.threejs.org/t/game-engine-for-threejs-http-ocio-games-threejs/17206/4 "2020-07-18T18:29:51Z")

</div>

> [@DaylightDreamer](#):
>
> The idea is to have a development interface […]

You can try extending [three editor](https://github.com/mrdoob/three.js/tree/master/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 :')

---

<div class="post-metadata">

**Author:** ![DaylightDreamer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/daylightdreamer/32/9951_2.png) [@DaylightDreamer](https://discourse.threejs.org/u/DaylightDreamer)\
**Post date:** [July 18, 2020, 6:49pm UTC](https://discourse.threejs.org/t/game-engine-for-threejs-http-ocio-games-threejs/17206/5 "2020-07-18T18:49:32Z")

</div>

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

Here another one with the same engine  
[http://ocio.games/hell/](http://ocio.games/hell/)

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

---

<div class="post-metadata">

**Author:** ![DaylightDreamer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/daylightdreamer/32/9951_2.png) [@DaylightDreamer](https://discourse.threejs.org/u/DaylightDreamer)\
**Post date:** [July 18, 2020, 6:51pm UTC](https://discourse.threejs.org/t/game-engine-for-threejs-http-ocio-games-threejs/17206/6 "2020-07-18T18:51:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [July 18, 2020, 7:00pm UTC](https://discourse.threejs.org/t/game-engine-for-threejs-http-ocio-games-threejs/17206/7 "2020-07-18T19:00:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![DolphinIQ](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dolphiniq/32/3510_2.png) [@DolphinIQ](https://discourse.threejs.org/u/DolphinIQ)\
**Post date:** [July 18, 2020, 10:45pm UTC](https://discourse.threejs.org/t/game-engine-for-threejs-http-ocio-games-threejs/17206/8 "2020-07-18T22:45:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hopepdm](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hopepdm/32/1370_2.png) [@hopepdm](https://discourse.threejs.org/u/hopepdm)\
**Post date:** [July 22, 2020, 2:35am UTC](https://discourse.threejs.org/t/game-engine-for-threejs-http-ocio-games-threejs/17206/9 "2020-07-22T02:35:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![DaylightDreamer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/daylightdreamer/32/9951_2.png) [@DaylightDreamer](https://discourse.threejs.org/u/DaylightDreamer)\
**Post date:** [July 22, 2020, 6:37am UTC](https://discourse.threejs.org/t/game-engine-for-threejs-http-ocio-games-threejs/17206/10 "2020-07-22T06:37:40Z")

</div>

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

> **[niksalyan/game-canvas-3d](https://github.com/niksalyan/game-canvas-3d)**
>
> game-canvas-3d. Contribute to niksalyan/game-canvas-3d development by creating an account on GitHub.

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

---

<div class="post-metadata">

**Author:** ![DaylightDreamer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/daylightdreamer/32/9951_2.png) [@DaylightDreamer](https://discourse.threejs.org/u/DaylightDreamer)\
**Post date:** [July 22, 2020, 8:32am UTC](https://discourse.threejs.org/t/game-engine-for-threejs-http-ocio-games-threejs/17206/11 "2020-07-22T08:32:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hopepdm](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hopepdm/32/1370_2.png) [@hopepdm](https://discourse.threejs.org/u/hopepdm)\
**Post date:** [July 22, 2020, 3:28pm UTC](https://discourse.threejs.org/t/game-engine-for-threejs-http-ocio-games-threejs/17206/12 "2020-07-22T15:28:53Z")

</div>

> **[ts-game - CodeSandbox](https://codesandbox.io/s/ts-game-inw1x)**
>
> ts-game by hopepdm using react, react-dom, react-scripts, three

I simply modified your code.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [July 22, 2020, 5:41pm UTC](https://discourse.threejs.org/t/game-engine-for-threejs-http-ocio-games-threejs/17206/13 "2020-07-22T17:41:31Z")

</div>

I love how clean that source code looks. ❤

---

<div class="post-metadata">

**Author:** ![mfontanadev](https://avatars.discourse-cdn.com/v4/letter/m/77aa72/32.png) [@mfontanadev](https://discourse.threejs.org/u/mfontanadev)\
**Post date:** [July 23, 2020, 12:46pm UTC](https://discourse.threejs.org/t/game-engine-for-threejs-http-ocio-games-threejs/17206/14 "2020-07-23T12:46:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![DaylightDreamer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/daylightdreamer/32/9951_2.png) [@DaylightDreamer](https://discourse.threejs.org/u/DaylightDreamer)\
**Post date:** [July 23, 2020, 1:34pm UTC](https://discourse.threejs.org/t/game-engine-for-threejs-http-ocio-games-threejs/17206/15 "2020-07-23T13:34:44Z")

</div>

Hi.  
Sure. Feel free to ask.