I want to explain my progress of game development in the form of step-by-step instructions for beginners.
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…
These changes are also true for PySide6.
1. OpenGL classes have been moved to a separate PyQt6.QtOpenGL namespace:
PyQt5:
from PyQt5.QtGui import (QOpenGLBuffer, QOpenGLShader, QOpenGLShaderProgram,
QOpenGLTexture)PyQt6:
from PyQt6.QtOpenGL import (QOpenGLBuffer, QOpenGLShader, …
I made this playable demo in pure WebGL 1.0 and JavaScript using this tutorial: Unity 2D Minesweeper Tutorial
I use these tools:
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…
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">
&l…![[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…
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…
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…
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…
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…
Just some useful links to OpenGL tutorials:
OpenGL Tutorials:
WebGL books:
WebGL Tutorials:
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 (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…
- 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 …
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 – Windo…
- 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.…
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…
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_calcul…
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…
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 with transparency using OpenTK, OpenGL 3.0, C#
Source Code: https://github.com/8Observer8/TexturedRectangle_OpenTkOpenGL30CSharp
Playground: https://next.plnkr.co/edit/rVU7lcmBksfWx2o5?preview
Source Code and Instruction: https://github.com/8Observer8/draw-line_canvas-api-typescript
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…
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 in pure WebGL 1.0 and TypeScript. I use glMatrix for Linear Algebra.
Playground:
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, …
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…
Let's write an executable documentation for server side calculator.
Specifications:
- "Add(a, b)" method must to sum positive numbers. Specification name: Add_SumPositiveNumbers_ReturnsSum
- "Sub(a, b)" method must to subtract positive numbers. Specification name: Sub_SubtractPositive…
In next time I will show how to draw graphs of functions using modern OpenGL 3.1 with text.
Sin_WinFormsOpenGL11CSharp.zip
What if you need to draw text with simple graphics? For example, you have a task in your college to draw plots with some text using C++. You can still use deprecated/legacy OpenGL 1.1 and FreeGLUT.
This example shows how to draw a text using FreeGLUT and deprecated/legacy OpenGL 1.5. And thi…
