# Glops - development blog of my first personal game

**URL:** <https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935>\
**Category:** Showcase\
**Tags:** collisions, game-dev\
**Created:** [May 8, 2022, 5:52am UTC](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935 "2022-05-08T05:52:30Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [May 8, 2022, 5:52am UTC](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935/1 "2022-05-08T05:52:30Z")

</div>

# Hiha 💬

By this page, I would share each step and personal progress of my project game.  
My objective is to publish this game here :

![01](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/1/41a360926a5b875927e85d4524d4ab173d166378.png)

# Config

- **OS** : Linux + [Awesome WM](https://awesomewm.org/)
- **Code editor** : [Vscode](https://code.visualstudio.com/) - [NVIM](https://neovim.io/)
- **Publisher** : [Cordova command-line](https://cordova.apache.org/docs/en/4.0.0/guide/cli/)
- **Graphics** : [Inkscape](https://inkscape.org/fr/) - [Gimp](https://www.gimp.org/downloads/)
- **Soundmanager** : [Audacity](https://www.audacityteam.org/)
- **Todolist and bookmarks manager** : [Trello](https://trello.com/login)

# My target project game

A simple collider game with funny characters, a world and cool effects 😝

# Actual preview 🔨

![out](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/6/7633a26ab7dee3928b154715fa477ca9ae8dfdeb.gif)

# Do you find this fun?

_Poll ([view on site](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935/1))_

# To fix 💥 …Thanks community

[Oimo.js collision detection problem with the physic body](https://discourse.threejs.org/t/oimo-js-collision-detection-problem-with-the-physic-body/38189) ✅

[How to avoid intersections with a plane above a plane?](https://discourse.threejs.org/t/how-to-avoid-intersections-with-a-plane-above-a-plane/38830)✅

[Problem with shadows shaking with the csm plugin only visible on a mobile](https://discourse.threejs.org/t/problem-with-shadows-shaking-with-the-csm-plugin-only-visible-on-a-mobile/39120) ⭕

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [May 9, 2022, 5:49pm UTC](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935/2 "2022-05-09T17:49:14Z")

</div>

Hi 💬

I redesigned my enemies and took the opportunity to transform them into several instances.

![ezgif.com-gif-maker (1)](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/e/5e6030d0efe705e1349ea861b9d155fbc1000331.gif)

The next step is to assign a physical body to these dummies…

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [May 10, 2022, 12:13pm UTC](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935/3 "2022-05-10T12:13:12Z")

</div>

Hi 💬

DRY (Don’t repeat yourself) is effective for code review.

22 lines become 4 lines 😋

 ![Capture](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/5/b526c3888715b3fe40b930bb6f126db9e68aab46.png)

![Capture2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/3/73ef5a6b9fa0a0193d4ebd83328be2e8bcd02362.png)

 ![Capture3](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/b/2b6e01300b1f90d253969041bf4ae7558cfea238.png)

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [May 10, 2022, 6:43pm UTC](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935/4 "2022-05-10T18:43:11Z")

</div>

Hi 💬

👍 Added physical bodies to 1600 instances (enemies and kind of green balloons )

![out](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/e/7ee1c1d74e22965a6449a7d7e6afd9ee54ff437f.gif)

The next step is to create a physical camera to avoid seeing the inside of my objects.

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [May 11, 2022, 10:44am UTC](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935/5 "2022-05-11T10:44:37Z")

</div>

Hi 💬

⌨ It’s done (camera with a physical body to avoid seeing the inside of my objects)

![out](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/b/4b71c88085047de8883768e2c7d06ff5ae3d698b.gif)

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [May 11, 2022, 7:33pm UTC](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935/6 "2022-05-11T19:33:34Z")

</div>

Hi 💬

My current music for coding :

https://www.youtube.com/embed/xSrHy7O09A8?feature=oembed&wmode=opaque&list=RDxSrHy7O09A8  
I like it… my mind and fingers are faster with it…😍

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [May 12, 2022, 11:07am UTC](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935/7 "2022-05-12T11:07:06Z")

</div>

Hi 💬

Added a death effect for my enemies when they hit the ground 🤯

![out](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/e/9ee664d78a3bebeb84cda0728b1967d05b91913c.gif)

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [May 12, 2022, 6:47pm UTC](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935/8 "2022-05-12T18:47:07Z")

</div>

Hi 💬

Not at all the expected effect 😅 … my enemies are completely crazy 🤪.  
What a mess!  
We’ll have to find out where the mistake came from, damn it…

![out](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/e/7e1d26a0d20ebf5b5ef577cdb273ffc7dcc94dcc.gif)

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [May 12, 2022, 9:24pm UTC](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935/9 "2022-05-12T21:24:10Z")

</div>

Hi 💬

Now I have punished them and they are traumatized, they do not want to move 🤣  
 ![out](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/8/f81157cefb085cb86e8b87eb170e0d5b96a5e568.gif)

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [May 14, 2022, 10:38pm UTC](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935/10 "2022-05-14T22:38:28Z")

</div>

Hi 💬

I improved the aesthetics of my player and especially the small particles behind him  
 ![out](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/6/16677221b5534d4612c0db0f5df29a15005b9b64.gif)

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [May 16, 2022, 9:24pm UTC](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935/11 "2022-05-16T21:24:29Z")

</div>

Hi 💬

I solved my own question in the topic =\> see the first post 😋

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [May 23, 2022, 2:52pm UTC](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935/12 "2022-05-23T14:52:27Z")

</div>

Hi 💬 ,

🥴 15 days to solve :

- problems with my shadows and the CSM plugin, appearance of streaks on my floor =\> just had to use a floor geometry!
- performance problems on mobile =\> just had to redefine CSM and physics parameters with OIMO.js
- My instances with a physical body that refused to levitate and inevitably fell over time.

15 days is a long time and really discouraging to produce nothing especially when you search every day in your head, the forums, the doc, but what a pleasure when you find the solutions!

Here is the lesson I can draw from it 🤩 :

- Always look at all the examples provided by a documentation or an engine (the answer to the problem of my instances appeared in an example where a terrain was illustrated, so with a priori nothing to do with my problem).

- Stackoverflow remains an excellent way to find answers, even if I admit that the forum is very strict with rules, formatting, etc…

- Always reduce a problem to its simplest expression.

- Always use functions or classes with configurations and don’t parameterize anything in the functions or classes but with configurations.  

 ![main.js (1)](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/2/e2578cfce6ffa9a160abc86f13150c22c1934d07.jpeg)

With this system, you can make the code evolve as you wish.

- Personally I try to avoid as much as possible: var something = something but rather var o={} (for object) and then o.enemy (this has the advantage to avoid a double writing var enemy; and then enemy = new Enemy(config)

 ![main.js (2)](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/4/24e70464ac386aed7fa95f5eb371c302e4ba4c27.png)

- Use functions that you call in the code to divide your work and make it more manageable, more manipulable.  

- use vim even if difficult to learn…but what a gain in the manipulation of the code!

---

<div class="post-metadata">

**Author:** ![dubois](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dubois](https://discourse.threejs.org/u/dubois)\
**Post date:** [May 23, 2022, 7:45pm UTC](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935/13 "2022-05-23T19:45:15Z")

</div>

```javascript
master.position.copy(slave.position)

```

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [May 23, 2022, 9:39pm UTC](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935/14 "2022-05-23T21:39:36Z")

</div>

Yes @dubois thanks

The specific documents on oimo.js and specifically the terrain are here :  
[http://lo-th.github.io/Oimo.js/examples/test\_terrain.html](http://lo-th.github.io/Oimo.js/examples/test_terrain.html)

And this is my version :  
https://codepen.io/ogames/embed/preview/mdXwbvr?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=mdXwbvr

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [May 26, 2022, 6:32pm UTC](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935/15 "2022-05-26T18:32:49Z")

</div>

Hi 💬

Here is my new version 🤗

![out2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/a/ca37ca4c06bc867fc3e34cba1de7010a5382510c.gif)

Additions :

- sleeping enemies
- alternation between enemies+paths and big green balloons
- ui design
- effect when the player is "dead

Next step : have a dynamic camera 🎥

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yannick/32/8539_2.png) [@yannick](https://discourse.threejs.org/u/yannick)\
**Post date:** [May 27, 2022, 9:51pm UTC](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935/16 "2022-05-27T21:51:57Z")

</div>

Nice game!

_Would you mind to test if your games compiles with my “online build project”? And, compare the performance between capacitor amd cordova? Would help a lot._ 😁  
[Project website](https://ogchbwmrqry2aeffglxdcjar7u0xvuim.lambda-url.eu-central-1.on.aws/)

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [May 28, 2022, 6:03am UTC](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935/17 "2022-05-28T06:03:06Z")

</div>

Thanks 🙂

Nice app too.

I have tested with my game =\> exactly the same performance (60fps) as with cordova command-line 👏

What makes me happy is that I see the possibility of producing on ios

But how do you put a icon game with this online tools ?

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yannick/32/8539_2.png) [@yannick](https://discourse.threejs.org/u/yannick)\
**Post date:** [May 28, 2022, 10:15am UTC](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935/18 "2022-05-28T10:15:47Z")

</div>

Cool glad it worked.

I made [a template](https://github.com/yandeu/html2app-template#readme). You can modify the images in the assets folder.

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yannick/32/8539_2.png) [@yannick](https://discourse.threejs.org/u/yannick)\
**Post date:** [May 28, 2022, 2:01pm UTC](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935/19 "2022-05-28T14:01:34Z")

</div>

> [@espace3d](#):
>
> What makes me happy is that I see the possibility of producing on ios

If you want, I can add the functionality to genenrate ios certs, and to upload the ios build directly to “app store connect”. So you don’t need a mac at all for the whole publishing process.  
_You still need an iPhone (soon iOS \>= 14), in case you want to test it before publishing._

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [May 28, 2022, 6:28pm UTC](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935/20 "2022-05-28T18:28:42Z")

</div>

Hi 💬

My enemies are like me after this Saturday…🥱

![out](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/a/2a315af8232397b95cd11149651697cd4a9d3811.gif)

[Next page](https://discourse.threejs.org/t/glops-development-blog-of-my-first-personal-game/37935.md?page=2)