🎉 Celebrating 25 Years of GameDev.net! 🎉
Not many can claim 25 years on the Internet! Join us in celebrating this milestone. Learn more about our history, and thank you for being a part of our community!
I want to explain my progress of game development in the form of step-by-step instructions for beginners.
![My step by step guide:](https://uploads.gamedev.net/blogs/monthly_2024_04/large.0ff9b1bc0c294d3f9b113beb5690ebd1.distribute-a-link.png)
Please, test my guide and write if something is wrong: How to run SDL3 app on Web with WebAssembly on Windows
![I have replaced Arcade Physics with Box2D-WASM in the “Making your first Phaser 3 game](https://uploads.gamedev.net/blogs/monthly_2024_04/large.44b2a6bd8311487ca95bc291535ef53b.2024-04-29_155044.png)
I have replaced Arcade Physics with Box2D-WASM in the examples of the Making your first Phaser 3 game tutorial:
GitHub repository with Rollup guide
Playground:
![How to set up Box2D-WASM with importmap and Rollup for JavaScript](https://uploads.gamedev.net/blogs/monthly_2024_04/large.256b24faa6374f4eaa80d0cde5ed43a6.caption_470x315.png)
Playground: https://plnkr.co/edit/BGNYcIJRiJXpd9N4?preview
GitHub: https://github.com/8Observer8/how-to-set-up-box2dwasm-with-importmap-rollup-js
glMatrix is just a bonus:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewpor…
![Make small Games. Minesweeper in WebGL. Port from NoobTuts](https://uploads.gamedev.net/blogs/monthly_2022_03/large.880c76036098485080765ab8630603b0.Banner.png)
I made this playable demo in pure WebGL 1.0 and JavaScript using this tutorial: Unity 2D Minesweeper Tutorial
I use these tools:
![Deploying a Node.js server with WebSockets on a free hosting Heroku. Web- Desktop Clients (Qt)](https://uploads.gamedev.net/blogs/monthly_2021_12/large.3680cfcc779d4851824faa4bcd5eefa0.HTML5WebSockets.png)
Working example: https://mouse-click-js.herokuapp.com/ in which the coordinates of the mouse click are sent to the server and the response is returned to the client in the form of a message that it displays on the screen.
- Source codes of the server + web client in JavaScript: mouse-click-js-master.z…
![Loading a cube from gltf 2.0. WebGL, JavaScript](https://uploads.gamedev.net/blogs/monthly_2021_12/large.f010e6b05f98471d825a8385d6925c12.load-cube-from-gltf2-webgl-js-500x500.png)
Sandbox: https://plnkr.co/edit/BYseznZdUBTrUmRa?preview
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
&…
![[Example] Falling Textured Cubes. Panda3D Bullet Physics Wrapper. PyQt5 (PySide2) + Bullet + OpenGL](https://uploads.gamedev.net/blogs/monthly_2021_02/11a753fae8244329940c9d935c4c1967.textured_cubes_bullet_pyqt5.gif)
I tried to use PyBullet but it is very complicated and I cannot understand haw to use it with OpenGL. The Panda3D Bullet wrapper is only one way that I found. And there is a very great manual: https://docs.panda3d.org/1.10/python/programming/physics/bullet/index I hope I will not have unresolved pr…
![How to set up Urho3D (Shared, MinGW) in Qt Creator IDE](https://uploads.gamedev.net/blogs/monthly_2021_02/large.f20fdf01057e4591afc036e01564e661.Logo_Urho3D_QtCreator.png)
It is so simple to set up Urho3D-1.7.1 in Qt Creator IDE on Windows 10:
1. Download and install Open Source Qt MinGW: https://www.qt.io/download-open-source
2. Download and unzip Urho3D-1.7.1-MinGW-SHARED.zip, for example, to "E:/Libs" folder
3. Run Qt Creator and create a new project: "File" > "Ne…
![Usage of Planck.js with TypeScript (Planck.js is a port of Box2D Physics Engine)](https://uploads.gamedev.net/blogs/monthly_2021_01/large.317daa64030a4fac978c8db0d5b2c638.hello-planckjs-webgl10-ts_for-gamedev-blog.png)
My example shows how to use Ammo.js with TypeScript in Debug and Release modes: hello-planckjs-webgl10-ts
You should install these modules globally:
- npm i typescript -g
- npm i browserify -g
- npm i uglify-js -g
Install all packages from `package.json` using the command: `npm i`
Comment/Uncomment Debug/Relea…
![Usage of Ammo.js with TypeScript (Ammo.js is a port of Bullet Physics Engine)](https://uploads.gamedev.net/blogs/monthly_2021_01/large.0103c8d5147f474c80c7c82b6efe4600.hello-ammojs-webgl10-ts_for-gamedev-blog.png)
My example shows how to use Ammo.js with TypeScript in Debug and Release modes: hello-ammojs-webgl10-ts
You should install these modules globally:
- npm i typescript -g
- npm i browserify -g
- npm i uglify-js -g
Install all packages from `package.json` using the command: `npm i`
Comment/Uncomment Debug/Release…
![Set Up Ammo.js with Browserify (Ammo.js is a port of Bullet Physics Engine to JS)](https://uploads.gamedev.net/blogs/monthly_2020_12/large.799202d89ce4406889f1437e9e5b477f.AmmoJSBrowserifyUglifyJS.png)
I found a solution how to use Ammo.js with Browserify:
npm install kripken/ammo.js
Install Browserify and UglifyJS globally:
npm i browserify uglify-js -g
Make this project structure:
public/index.html
public/js
src/client
src/server
Copy this example to src/client/main.js
const Ammo = require("ammo.js");
l…
![Connect a server and a client with WebSockets in JavaScript](https://uploads.gamedev.net/blogs/monthly_2020_11/large.f68209a053d045728e2d4270a4ef715d.LogoForSocketConnection.png)
It is one of the simples way to make real multiplayer because we can host on Heroku. But now we use localhost. Later I will show how to connect the Node.js server (in TypeScript) and Qt C++ client and if you want to see it right now just open and run this example: https://github.com/8Observer8/webs…
![Example of Snake game from NoobTuts tutorial rewritten in Qt C++ OpenGL](https://uploads.gamedev.net/blogs/monthly_2020_11/large.96bdf13b225e41deaa67418e249a8830.Snake2DNoobTuts_OpenGLES20_Qt5Cpp.png)
Example of Snake game from NoobTuts tutorial (Python Snake Game) rewritten in Qt C++ OpenGL
Demo for Windows: Snake2DNoobTuts_OpenGLES20_Qt5Cpp (11 MB)
There are two versions of sources:
- OpenGL 3.3 for Desktop: https://rextester.com/MMC15477
- OpenGL ES 2.0 for Desktop, Android, and iOS: https://rexteste…
![Triangle in OpenGL ES 2.0 (Qt5 C++, PyQt5) and WebGL 1.0 (TypeScript) for Desktop and Android](https://uploads.gamedev.net/blogs/monthly_2020_11/large.ce8c6c9a74ca4f4cab71bd37a96ed796.TriangleInOneFile_Qt5OpenGLES20Cpp_500x500.png)
- Added PyQt5 Example: https://rextester.com/LWYAU14361
Version in WebGL 1.0 (TypeScript)
Run by one click in a browser: https://plnkr.co/edit/gAfPR7ZIKjJXulDI?open=main.ts&preview
Version in OpenGL ES 2.0 (C++ Qt5)
Create a QWidget project (without “Generate form”). Delete the Widget class. Add the …
![Running Panda3D in Qt Creator IDE on Windows 10](https://discourse.panda3d.org/uploads/default/original/2X/d/d965609552a592a57c440200d755012d9010ef89.png)
Install:
1 – Panda3D-SDK-1.10.7 x86: https://www.panda3d.org/download/sdk-1-10-7/
2 – Qt 5.15.1 for MSVC 2019 32-bit: https://www.qt.io/download-open-source
3 – MSVC v142 - VS 2019 C++ x64/x86 build tools. Use Visual Studio Installer: https://visualstudio.microsoft.com/downloads/
4 – Win…
![Minimal OpenGL Example in C++ Qt5, PyQt5 and TypeScript WebGL 1.0](https://uploads.gamedev.net/blogs/monthly_2020_11/large.7fc3ac86f0d94bd6afe9e8065b543c5e.MinimalOpenGLExampleInOneFile_PyQt5.png)
- Added an example in WebGL 1.0 and TypeScript. Run in browser by one click: https://plnkr.co/edit/GRn9ADgJAJXnEoTF?open=main.ts&preview
If you want to start to learn Python I sagest to use PyQt5 and QtOpenGL together. OpenGL allows to create 2D/3D graphics and PyQt5 allows to create GUI elements.…
![How to setup ImGui in QtCreator IDE](https://uploads.gamedev.net/blogs/monthly_2020_08/d678006d57b94ce1b68d770921795c38.FirstExampleImGUI_GLFW.png)
I just copypasta the official “hello, world” example for GLFW: https://github.com/ocornut/imgui/blob/master/examples/example_glfw_opengl3/main.cpp
I use the QtCreator IDE and the MinGW compiler. You can create an empty C++ project in QtCreator like this: “File” > “New File or Project…” > “Oth…
![GUI WPF + OpenGL 3.1](https://uploads.gamedev.net/monthly_2019_02/EditedTriangle_WPFOpenGL31CSharp_Result.png.09cb9e7c1ef89faa8b4f4f4f9256d58b.png)
We will see how to place OpenTK.GLControl on WPF window to make GUI application with 2D/3D graphics using modern OpenGL 3.
How to create the project from scratch
Note 1: RMB - Right Mouse Button click
Note 2: Good Color calculator for normalized values: http://doc.instantreality.org/tools/color_calcu…
![Pixi.js and TypeScript AMD module compilation](https://uploads.gamedev.net/blogs/monthly_2021_11/large.a4373733f17546328601f92d4d4adf58.ForGameDevComBlog.png)
If you use Pixi with TypeScript maybe my information will be useful for you in the future when you compile to AMD modules.
I had a problem with import in TypeScript when I compiled using "module": "AMD". I had the error when I compiled like this: "cannot find pixi.js module". Because "." (dot) int t…
![Drawing a sine wave. OpenTK, OpenGL 3.0, C#](https://uploads.gamedev.net/monthly_2019_10/2087983824_StepPi_2.png.60d9648fcf499b4b4a417184c87129ea.png)
This example shows a simple way to draw a sin wave using modern OpenGL and C#
GitHub: https://github.com/8Observer8/Sin_ConsoleAppOpenTkOpenGL30CSharp
Source Code in Archive: Sin_ConsoleAppOpenTkOpenGL30CSharp.zip
These are scre…
![Textured Rectangle. OpenTK, OpenGL 3.0, C#](https://uploads.gamedev.net/monthly_2019_11/TextureWithTransparencyCorrect.png.e292a79490ca16ab1c3c6940009d5e64.png)
Textured Rectangle with transparency using OpenTK, OpenGL 3.0, C#
Source Code: https://github.com/8Observer8/TexturedRectangle_OpenTkOpenGL30CSharp
![Rectangle. Canvas API, TypeScript](https://uploads.gamedev.net/monthly_2019_11/draw-line_canvas-api-typescript.png.db4d39c8df64463092659a36e4a6eaa7.png)
Playground: https://next.plnkr.co/edit/rVU7lcmBksfWx2o5?preview
Source Code and Instruction: https://github.com/8Observer8/draw-line_canvas-api-typescript
![Texture Movement. WebGL, TypeScript](https://uploads.gamedev.net/monthly_2019_10/TextureMovement.gif.09225e7c8bca89513c3fa7de47c5a158.gif)
I made a simple example with checking of collision with right wall:
- Plunker: https://next.plnkr.co/edit/Bgf18uHzIkrRw9oW?preview
- CodeSandbox: https://codesandbox.io/s/texture-movement-webgl-10-typescript-3v8c6
- GitHub + Build Instruction: https://github.com/8Observer8/texture-mov…
![The shortest app in WebGL and JS](https://uploads.gamedev.net/monthly_2019_10/TheShortestWebGLApp.png.7adedd0bf9b290d8294eb95c27d9b45c.png)
Filling a canvas with set color. It is one of the shortest web application in WebGL 1.0 and JavaScript. It set a clear color and fill the canvas with the color. You can run this applications in Playground (in Plunker), watch demo, read code, make Fork, write something, send a link to your friend…
![Textured Rectangle. WebGL 1.0, TypeScript](https://uploads.gamedev.net/monthly_2019_10/textured-rect-with-transforms-webgl1-typescript.png.663352fa8cdef26e0d7b7df6daf1a851.png)
Textured Rectangle in pure WebGL 1.0 and TypeScript. I use glMatrix for Linear Algebra.
Playground:
![WebGL example for beginners in computer graphics](https://uploads.gamedev.net/monthly_2019_10/Triangle.png.b4daea611623c4df0a727185d2b45bb8.png)
It is my example how to draw a triangle using WebGL and TypeScript: https://plnkr.co/edit/PkqSZGwhv9zKSnUNSiXo?p=preview
Just fork my example, change it, save and send a new link to your friends.
I use glMatrix library for math. You can find in the ShaderProgram.ts file hwo I set scale, …
![GameDev Books](https://uploads.gamedev.net/blogs/monthly_2022_07/large.619e35a18dc847a6b77fbfe34ea6a460.Game-Dev-Books-Logo.png)
Updated 3/27/2019
- I created a new section: Math and Physics
- I added a new link on this nice book: Beginning Math and Physics for Game Programmers
I study how to write my own game engines using modern OpenGL/C# and WebGL/TypeScript. I advice you this book: C# Game Programming: For Seriou…