Hi all,
as promised to some peoples, here is the first 3D playable game developed with WebGL library,
it is a 3D Billiards 8 Ball for you. You can play it with your friends or with a fake AI opponent.
To control the game:
I'm not a game developer. Take a note that this is the first 3D playable game I developed in my life, so don't expect something perfect.
You can use this as starting point to improve it yourself or to make a completely different game.
Note that this was not entirely created by me.
I started from here: https://github.com/elijah-atkins/Billiards
and here: https://github.com/jaks6/WebGL-Billiards
and here: https://github.com/NikLever/threejs-games-course
Then I improved it by adding all ToDos of original project:
- positional audio (samples taken from https://pixabay.com. Edited on Audacity)
- scene room (taken from https://sketchfab.com)
- enviroment out of windows (taken directly from threejs distribution)
- updated from theejs 137 to threejs 164. Just very small changes.
- adapted to work on B4J and B4A in future directly on native app without use external browser
In order to get it working you will need to install the WebGL library (if not yet installed), and download a zip file with resources from here BilliardsResources.zip
After this extract all contents to your Assets directory (Do not unzip internal zips. I've searched to mantain modularity as much as possible).
Any needed file will be extacted (only on the first execution) to the right place, folders will be created inside your B4XWebGL/examples/Billiards main folder and files placed inside the right sub folders. (See the B4J code).
I opted to extend this project because it is well structured, you will see that the html file on B4J side just call a Game class, there is no other code here.
The Game class then import all other needed classes, each that manage a different aspect of the game. To be more precise, the game contains these classes:
As all WebGL projects, this will work on the same developing machine, even local on any device with browser that support WebGL, even will work over the web, but at this time it is not online multiplayer, but is fully served over http. This can be exteded in future to support online multi player with help of SocketIO.
To edit the game code you can just start B4J compilation, then press a button on the form, that will initialize all necessary, then open all JavaScript classses in an external text editor with highlight capability for JavaScript (to be more comfortable), I personally use PSpad, you can use Notepad++, Geany too is good, any other text editor will work, even the simple Notepad.
Without restarting B4J app, you can edit everything in the code and just save it. After that just reload the web page and you will see all modifications you done. As well on all WebGL projects you can open DevTools, use the console, track any variable, place breakpoints, pause execution, advance line by line or function by function, get http requests with all served files and more...
IMPORTANT NOTE: because all browsers use the cache to avoid reload resources, they will reuse your code from cache instead to load the one you have edited. This even happen with any resource, textures, models, and any requested file ...
To avoid this you need to manually disable the cache load. I use Edge and set it from DevTools by pressing F12 and going to the Network page, then set 'Disable cache' checkbox.
Some words about audio. Using audio with ThreeJS is very simple, it is very similar to Java AudioClips. You just need to open a file and then play, stop, etc. Using positional audio is just as simple, just use the PositionalAudio class instead of the Audio class, and then assign the created audio to an object you want. Every time you rotate the camera relative to that object, move away from or closer to that object, the audio will be positional, meaning you'll hear it further to the right, left, behind, in front, near, or far away. All this is done automatically without you having to do anything else. There are additional parameters to fine tune it.
Like Java AudioClips, when you play a sound, you can't play it again until it finishes. Even if may it is allowed, you'd hear a very strange effect, as the first audio file was cut off to play the new one. This wasn't possible in billiard game, I figured out that every ball need to have more than one instance of sound, because otherwise I cannot do it where many balls bounce off each other very quickly, and they also bounce off the edges and bottom of the billiard table. For this reason, I had to create an array of 50 sounds (an arbitrary number) for each sound played. For example, when there are many balls hitting each other quickly, there's a loop that iterates through all the sounds, quickly finding the first one not playing and use that. This way, you have many sounds playing simultaneously (for those who know music like me, this would be called polyphony. @stevel05 for sure know this). This worked very well, but at a certain point, I found myself with many sounds playing simultaneously, adding to each other and saturating the audio output (audio clipping). It was therefore deemed necessary to adjust the volume of each sound based on how many sounds were playing at that moment. After this the audio clipping seems to have disappeared.
For sounds like applause I just used not positional audio.
To get more infos about that: https://threejs.org/docs/?q=audio
Today I not only release it, I will share here the full project and resources to make it available on B4J IDE.
In the philosophy of the original open source project, I've made some changes and keep the code open source again by posting it back to the web so that other peoples can do the same thing, with only limitations of original license agreements.
I remember a lot of time time I've spent at 10-15 year old when I intensively used my Commodore C=64, Amiga 500, Sinclair ZX Spectrum, Atari 130XE to develop in basic and assembler a sort of pacman style games, now that I'm 52 years old the story evolved, but I never imagined to develop a 3D library capable to develop even games, and to develop with this a 3D game myself. I ensure you this is absolutely amazing to me.
Is not my goal to develop games, so now the ball is for you ...
Even if ChatGPT call me genius, I'm very lazy, almost like a pig
(even though I'm not so fat ).
If you want to encourage me to write more posts like this, please subscribe to my YouTube channel, turn on notifications, don't forget to like my videos, and if you want to leave a comment, I'll be here to answer you.
PLEASE LET ME KNOW IF THIS WORK FOR YOU.
Enjoy it
as promised to some peoples, here is the first 3D playable game developed with WebGL library,
it is a 3D Billiards 8 Ball for you. You can play it with your friends or with a fake AI opponent.
To control the game:
- mouse left click + move: fast movement
- mouse right click + move: fine tune movement
- mouse center click + move up/down: zoom in/out
- if you want to play with fake AI opponent you have to select player2 checkbox, this will be remembered in all the games you play, until you reload the web page
- to shoot a white ball, click on it, the progress will appear and increase it's value, this is the force applied to shoot, click again to shoot the ball
- on mobile devices to shoot a ball is the same thing, just use touch instead of mouse clicks
- space bar instead of mouse click can be used to shot the ball
I'm not a game developer. Take a note that this is the first 3D playable game I developed in my life, so don't expect something perfect.
You can use this as starting point to improve it yourself or to make a completely different game.
Note that this was not entirely created by me.
I started from here: https://github.com/elijah-atkins/Billiards
and here: https://github.com/jaks6/WebGL-Billiards
and here: https://github.com/NikLever/threejs-games-course
Then I improved it by adding all ToDos of original project:
- positional audio (samples taken from https://pixabay.com. Edited on Audacity)
- scene room (taken from https://sketchfab.com)
- enviroment out of windows (taken directly from threejs distribution)
- updated from theejs 137 to threejs 164. Just very small changes.
- adapted to work on B4J and B4A in future directly on native app without use external browser
In order to get it working you will need to install the WebGL library (if not yet installed), and download a zip file with resources from here BilliardsResources.zip
After this extract all contents to your Assets directory (Do not unzip internal zips. I've searched to mantain modularity as much as possible).
Any needed file will be extacted (only on the first execution) to the right place, folders will be created inside your B4XWebGL/examples/Billiards main folder and files placed inside the right sub folders. (See the B4J code).
I opted to extend this project because it is well structured, you will see that the html file on B4J side just call a Game class, there is no other code here.
The Game class then import all other needed classes, each that manage a different aspect of the game. To be more precise, the game contains these classes:
- Game.js
- Ball.js
- WhiteBall.js
- Table.js
- GameUI.js
- GameAI.js
- StrengthBar.js
As all WebGL projects, this will work on the same developing machine, even local on any device with browser that support WebGL, even will work over the web, but at this time it is not online multiplayer, but is fully served over http. This can be exteded in future to support online multi player with help of SocketIO.
To edit the game code you can just start B4J compilation, then press a button on the form, that will initialize all necessary, then open all JavaScript classses in an external text editor with highlight capability for JavaScript (to be more comfortable), I personally use PSpad, you can use Notepad++, Geany too is good, any other text editor will work, even the simple Notepad.
Without restarting B4J app, you can edit everything in the code and just save it. After that just reload the web page and you will see all modifications you done. As well on all WebGL projects you can open DevTools, use the console, track any variable, place breakpoints, pause execution, advance line by line or function by function, get http requests with all served files and more...
IMPORTANT NOTE: because all browsers use the cache to avoid reload resources, they will reuse your code from cache instead to load the one you have edited. This even happen with any resource, textures, models, and any requested file ...
To avoid this you need to manually disable the cache load. I use Edge and set it from DevTools by pressing F12 and going to the Network page, then set 'Disable cache' checkbox.
Some words about audio. Using audio with ThreeJS is very simple, it is very similar to Java AudioClips. You just need to open a file and then play, stop, etc. Using positional audio is just as simple, just use the PositionalAudio class instead of the Audio class, and then assign the created audio to an object you want. Every time you rotate the camera relative to that object, move away from or closer to that object, the audio will be positional, meaning you'll hear it further to the right, left, behind, in front, near, or far away. All this is done automatically without you having to do anything else. There are additional parameters to fine tune it.
Like Java AudioClips, when you play a sound, you can't play it again until it finishes. Even if may it is allowed, you'd hear a very strange effect, as the first audio file was cut off to play the new one. This wasn't possible in billiard game, I figured out that every ball need to have more than one instance of sound, because otherwise I cannot do it where many balls bounce off each other very quickly, and they also bounce off the edges and bottom of the billiard table. For this reason, I had to create an array of 50 sounds (an arbitrary number) for each sound played. For example, when there are many balls hitting each other quickly, there's a loop that iterates through all the sounds, quickly finding the first one not playing and use that. This way, you have many sounds playing simultaneously (for those who know music like me, this would be called polyphony. @stevel05 for sure know this). This worked very well, but at a certain point, I found myself with many sounds playing simultaneously, adding to each other and saturating the audio output (audio clipping). It was therefore deemed necessary to adjust the volume of each sound based on how many sounds were playing at that moment. After this the audio clipping seems to have disappeared.
For sounds like applause I just used not positional audio.
To get more infos about that: https://threejs.org/docs/?q=audio
Today I not only release it, I will share here the full project and resources to make it available on B4J IDE.
In the philosophy of the original open source project, I've made some changes and keep the code open source again by posting it back to the web so that other peoples can do the same thing, with only limitations of original license agreements.
I remember a lot of time time I've spent at 10-15 year old when I intensively used my Commodore C=64, Amiga 500, Sinclair ZX Spectrum, Atari 130XE to develop in basic and assembler a sort of pacman style games, now that I'm 52 years old the story evolved, but I never imagined to develop a 3D library capable to develop even games, and to develop with this a 3D game myself. I ensure you this is absolutely amazing to me.
Is not my goal to develop games, so now the ball is for you ...
Even if ChatGPT call me genius, I'm very lazy, almost like a pig
(even though I'm not so fat ).If you want to encourage me to write more posts like this, please subscribe to my YouTube channel, turn on notifications, don't forget to like my videos, and if you want to leave a comment, I'll be here to answer you.
PLEASE LET ME KNOW IF THIS WORK FOR YOU.
Enjoy it
Last edited:
