🎉 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!
Latest Javascript Activity
![Simple third person controller with Three.js, OimoPhysics and JavaScript](https://uploads.gamedev.net/blogs/monthly_2024_05/large.833614c1c6d34a2daa81aeb89a07d979.logo-for-gamedevdotnet.png)
The camera follows the ship. The camera can be rotated around an object by holding down the left mouse button. The camera can be zoomed in and out using the mouse wheel. There is a cube on the stage that the ship cannot pass through, because there is a static collider…
![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…
![Sprite in SFML style using FreeTexturePacker, pure WebGL 1.0, and JavaScript](https://uploads.gamedev.net/blogs/monthly_2023_07/large.b0253a86660e4d3dad202f6bf5e697cf.logo-for-gamedevdotnet.png)
This example loads sprites from the FreeTexturePacker sprite sheet and uses a sprite in SFML style
Playgrounds:
![The debug drawer of Box2D-WASM colliders using Melon.js and JavaScript](https://uploads.gamedev.net/blogs/monthly_2023_07/large.f5eddd2f132e41b4a8ca2905303c39a3.cover-image-for-gamedevdotcom-blog.png)
I added debug drawing of the circle collider using the Melon.js game engine and Box2D-WASM.
Live demo: https://8observer8.github.io/webgl10-js/debug-drawer-box2dwasm-melonjs-js/
GitHub repository: https://https://github.com/8Observer8/debug-drawer-box2dwasm-melonjs-js
Playgrounds/Sandboxes:
- Replit: h…
![The simplest multiplayer using WebSockets and pure WebGL 1.0 with animation from Resident Evil](https://uploads.gamedev.net/blogs/monthly_2023_05/large.85513c10b02b49f2b004065929a3742c.multiplayer.png)
I implemented the simplest multiplayer using WebSockets (package ws - npm) and Node.js. I send keyboard input to the server, which relays it to other clients. Used by WebGL 1.0, glMatrix and OimoPhysics. Extracted original models, textures and animations using RE1MV. Created a non-skinned skel…
Hi!
I forgot to mention that the game is coded with the following technologies:
- Front end: Vue.js, TypeScript, CodeMirror, Vuetify
- Back end : PHP, Java, Nginx, Docker, Traefik
- Software: VSCode, Gimp, Inkscape, Blender
Do not hesitate if you have any questions or suggestions :)
@a light breeze This slightly helped, as I have just realized what the problem was,
var docHeight = $(document).height();
var docWidth = $(document).width();
it was with these two functions, all I had to do to make it work the way that I wanted was by changing the document
's to window
so that it wasn…
![Five-pointed Star with WebGL and JavaScript](https://uploads.gamedev.net/blogs/monthly_2022_12/large.a8292f8c98844d5397b1a58128d94b3d.five-pointed-star.png)
Playground: https://plnkr.co/edit/W49ndxcQemMgkAoP
My Video:
assets/shaders/default.vert
attribute vec2 aPosition;
uniform mat4 uMvpMatrix;
void main() {
gl_Position = uMvpMatrix * vec4(aPosition, 0.0, 1.0);
}
assets/shaders/default.frag
precision mediump float;
uniform vec3 uColor;
vo…
I’ve always wanted to tell a story that’s so tragic and moving. A story that could bring the characters to life and people can relate to . The game will be an RPG and I would like for it to be in the style of earthbound or a modern pixel art game. Any developers that are interested please reply to …
I've long forgotten all the web dev things. But i assume to edit an external webpage in an iframe, the only way is to edit the html of said webpage itself (on it's server where it comes from).
Awtsmoos said:
Not sure if this can be used in an octree, however, or of it would save size.
Yes it can and should be used.
Hypothetically if I'm not transforming the actual model itself it might be unnecessary to apply the world matrix to every vertex individually, maybe that would save time, or mayb…
Bad design and needed to simplify the problem I'll post my solution shortly.
UPDATE:
My new solution basically checks a pathing array against the collision map, and returns true or false, accordingly. Here it is if anyone is interested.
https://gist.github.com/Langerz82/32a9707b83bfd03dd5b041ab1f2309c…
posted in wrong section, please delete
Hello!
I went live with a pet project called “A cup of skill”.
It's a silly idea I had to host and run user-generated code for simple games where you update a JSON state and its automatically synced to clients. The project focuses on competitive multiplayer or solo highscore games. They are lim…
![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:
After recharging my batteries for seven days, I am now filled with usable intent. Pure JavaScript is appealing to me, and I am wondering if there are any areas that I need to be aware of besides what I have done. What I am concerned with is just JavaScript, not the libraries like React.…
This is my template in TypeScript that shows how to write unit-tests with mocks and spies: https://github.com/8Observer8/person-service-mocha-sinon-ts I wrote a short instruction in the README.md file. You can use Test-driven development:
Test-driven development (TDD) is a software development proc…
Sounds like you've resolved the issue already, so that's great.
I'd like to offer you some alternatives while you're working through this. RegEx is powerful, but it can become extremely difficult to handle more complex syntax. My suggestion if you plan on going down this path is to use a…
For your virtual gamepad, you often have a bounding box for the controls in screen space. Detect when a touch appears inside one of those controls, you could but must not use a spatial positionening data structure for this, a simple rectangle vs. point check should do the trick as well for a limite…
![Christmas Tree in pure WebGL](https://uploads.gamedev.net/blogs/monthly_2021_12/large.3da2fd3847b14b69b432e3183b7661f5.christmas-tree-1300x300.png)
Demo in pure WebGL, glMatrix, Ammo.js, JavaScript: Christmas Tree
- w, s, d, a - for moving
- arrows keys - for camera rotation
- the ‘f’ key - the third person camera for debugging of colliders
![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…
Well, does the mixing of px, vw, and percentage CSS size units matter, I think that is not much of a problem after all it is just the way that I want it.
Sorry, but nothing in my stylesheet is irrelevant, they all have a purpose or will have one eventually.
Also, the test line does not s…
This example https://github.com/8Observer8/login-websocket-js is just for demonstration how to read information on server side. It uses WebSockets for communication. You can save records of your users to MySQL (MongoDB and so on) to show a record table. This simple example reads login/password from…
Solution:
const userData = { name: name };
(this.body as any).userData = userData;
function detectCollison(): void
{
const dispatcher = physicsWorld.getDispatcher();
const numManifolds = dispatcher.getNumManifolds();
for (let i = 0; i < numManifolds; i++)
{
const contactMa…
![[Need Javascripter] Nostalgic 16-bit 2d RPG (Rev Share)](https://uploads.gamedev.net/forums/monthly_2021_08/48ac3da193ea47b385cccaaa209666c3.large.bcb1a2cfea984a63be36d5183bf14b28.Game124[1].png)
GAME IMAGE
Hello, My name is Royal! I am an experienced game designer / developer looking for javascript programmer(s)
My game right now is an RPG about being a barbarian whose tribe got attacked by a dragon. The setting is medieval times. The goal is to kill the dragon and collect all the characters…
I started programming in college, if you're starting now then you'll probably be leagues ahead of your classmates by the time you get to college if you stay at it consistently.
I just wanted to point out that the three.js
library is very popular for javascript game making. https://threejs.org/…
We released our debut title Untold RPG a year ago. It's a dark fantasy RPG, available on App Store and Google Play. With over 250.000 downloads, we've started to build a decent following, and we're currently working on the sequel - and we have many more games planned. We're a small indie team consi…
![Detecting a mouse click on object in JavaScript, Python and C++](https://uploads.gamedev.net/blogs/monthly_2021_01/3c5a542df81b490f86366e6e6742432c.pick-triangle-webgl10-js.gif)
Run demo in Sandbox:
- JSFiddle: https://jsfiddle.net/8Observer8/1gqfLar7
- Plunker: https://plnkr.co/edit/Y85fpZRur7vqaAl7?preview
Source Code:
- JavaScript, WebGL 1.0: https://jsfiddle.net/8Observer8/1gqfLar7
- Python, PyQt5, OpenGL 3.3: https://rextester.com/UZOJ14435
- Python, PySide2, OpenGL 3.3: https://rex…
![Sprite animation using Canvas API, JavaScript, Python and C++](https://uploads.gamedev.net/blogs/monthly_2021_01/8d01f374edb64568b40bb69ffd203b36.animation-canvas2d-js.gif)
- JavaScript, Canvas2D: https://plnkr.co/edit/zjYT0KTfj50MejT9?preview
- Python, PyQt5, QPainter: https://rextester.com/FDPMLU35222
- Python, PySide2, QPainter: https://rextester.com/YLSNG7380
- C++, Qt5, QPainter: https://rextester.com/XEUPHQ83360
![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…
![Phaser 3.23.0 Released - New Rope Game Object and more](https://uploads.gamedev.net/news/monthly_2020_04/5f49acbb669e44008abb7563a4437e58.phaser-3230-released.png)
The Phaser community, the open source desktop and mobile HTML5 game framework, has released Phaser 3.23.0 to GitHub and npm. This release includes the new Rope Game Object, 100% JSDoc coverage for the entire API, and a list of improvements and new features as they progress to Phase 4.
The new Rope G…
![Dev Diary #117 - Last Week, In Summary 15](https://uploads.gamedev.net/blogs/monthly_2020_04/e0f54e8ab4e741fbad2d03eec4e4beae.IntroVideo09-2200x1080.png)
Hello and welcome to this weeks Dev Diary, the short version and a tad more info about SEO concerns that I found out.
Last week went along with the following topics;
- Searching for the best way to use CSS for Tabs and Loader screen, instead of Javascript. Search is still ongoing, but one of the most p…
![Women in Motion: Art Exhibit Uses AR and AI to Amplify the Voices of Women in Entertainment](https://cdn-images-1.medium.com/max/1024/1*26z51qQMtyec-eXJF1tCUQ.jpeg&key=ff417fa884f073656232aa83e33c863cac9f8344fc78ca46463c1f9f187a6aa4)
An eye-opening AI- and WebAR-activated art gallery took place in LA at the Women in Entertainment Summit and at ART+TECH 2 exhibit at the Infinity Festival Hollywood in October and November.
The Women in Motion Augmented Reality art exhibit by creative studio Studio Moshon brought to life oil pain…
![A Week in WebAR: Ally + MONOPOLY Transform Cities into a Live Board Game and Adidas Surprises…](https://cdn-images-1.medium.com/max/1024/1*BTMLuckH2XYU_KIUWfE8GA.jpeg&key=74129f49e464f23644109b737ba5947c5e93f8983d7f1df955187da1b1dacd44)
We’re sensing a growing trend of brands using web-based AR to bring an element of surprise and delight to their customers’ daily routines, with entertaining games that truly augment their realit…
![End of October DevLog](https://uploads.gamedev.net/monthly_2019_11/704105010_ezgif.com-gif-maker%282%29.gif.f5801bbef0f1d41e1cacaa9b21d925e9.gif)
RTS fans, we're coming at you with yet another DevLog entry!
New features are landing in this weeks version- Advanced AI updates to enhance how computers control their economy, production, and military in Skirmish mode.
- Long-waited in-game menu where players can fine-tune how they…
![Introducing 8th Wall’s Cloud Editor & Built-in Hosting](https://cdn-images-1.medium.com/max/1024/1*aPm_qcj5aWyQC09ss-1Ctw.png&key=1e092af0c0413d8e0496ff67e8ec19a88f161830273df9513819626cf53f8f5c)
It’s finally time for us to share what we’ve been busy working on and we couldn’t be more excited!
We spent the past year listening to you on how we could make creating WebAR faster, easier and mor…
![A Week in WebAR: London’s Waterloo Station, Porsche, Clarins, EVA Air and a Spider-Man: Far From…](https://cdn-images-1.medium.com/max/1024/1*wcW-9vt9kz2VMKAfnZbc4Q.png&key=07c4f32fdaaf50195b10c1ca884f61281ab1716d0d024d51a78ff284b4b0ec5a)
A Week in WebAR is a new 8th Wall blog series that highlights innovative brand experiences created by our customers and partners.
https://medium.com/media/58fd9e884062be301494fc3705b958…![New Integration: Microsoft’s Mixed Reality Capture Studios Brings Lifelike Holograms to the Web](https://cdn-images-1.medium.com/max/1024/1*nWgFEKLuxf2uaV3qpLSuPA.png&key=649baad8d06e01d17e08b5a52ef32ebd49a74f56473368acd5f12d8825706c78)
Our latest integration will allow you to bring realistic holograms to life in WebAR. Microsoft’s Mixed Reality Capture Studios generates high res, low latency volumetric videos which can now be imported into your 8th Wall Web project. Check it out:
https://medium.com/med…![A Year in WebAR: Celebrating the First Anniversary of 8th Wall Web](https://cdn-images-1.medium.com/max/1024/1*-rT8u-3ilMrC731UybElaw.jpeg&key=175902bfa688e217a2dac183a09f32008f94dd7dec0b98669024a5edef6d5d15)
Wow, we can’t believe it’s already been one year since we rolled out 8th Wall Web! Since its debut in September 2018, our partners and customers have developed some pretty amazing augmented reality activations using 8th Wall’s entirely web-based solution. We’ve seen everything from super heroes sc…
Game developers will be able to become pioneers in the development of decentralized games for the gambling industry using DAO.Casino protocol.
On September 17, 2018, DAO.Casino is opening Sandbox for developers, independent teams and game development studios that choose to harness the power …
![Axis 3D for Web](https://uploads.gamedev.net/monthly_2017_08/59a02cb4e9954_Spacewebgamesmall.jpg.55d719cbb621316afabbdf5f717a3f15.jpg.d1e09387b051daa70b1a16dfb54de41d.jpg)
Axis is a free open source 3D engine for web pages and desktop applications. It's been a month since its official release with full source code, editor and all and there is more content available now like samples, info pages, API documentation and recently the team opened the discussion pages on…