Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions files/en-us/games/anatomy/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Other games demand control over each of the smallest possible individual timesli

But it might not need per-frame control. Your game loop might be similar to the _find the differences_ example and base itself on input events. It might require both input and simulated time. It might even loop based on something else entirely.

Modern JavaScript — as described in the next sections — thankfully makes it easy to develop an efficient, execute-once-per-frame main loop. Of course, your game will only be as optimized as you make it. If something looks like it should be attached to a more infrequent event then it is often a good idea to break it out of the main loop (but not always).
Modern JavaScript — as described in the next sections — thankfully makes it less difficult to develop an efficient, execute-once-per-frame main loop. Of course, your game will only be as optimized as you make it. If something looks like it should be attached to a more infrequent event then it is often a good idea to break it out of the main loop (but not always).

## Building a main loop in JavaScript

Expand Down Expand Up @@ -50,7 +50,7 @@ But do not immediately assume animations require frame-by-frame control. Simple

## Building a better main loop in JavaScript

There are two obvious issues with our previous main loop: `main()` pollutes the {{ domxref("window") }} object (where all global variables are stored) and the example code did not leave us with a way to _stop_ the loop unless the whole tab is closed or refreshed. For the first issue, if you want the main loop to just run and you do not need easy (direct) access to it, you could create it as an Immediately-Invoked Function Expression (IIFE).
There are two obvious issues with our previous main loop: `main()` pollutes the {{ domxref("window") }} object (where all global variables are stored) and the example code did not leave us with a way to _stop_ the loop unless the whole tab is closed or refreshed. For the first issue, if you want the main loop to just run and you do not need direct access to it, you could create it as an Immediately-Invoked Function Expression (IIFE).

<!-- prettier-ignore-start -->
```js
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ function isPointInsideSphere(point, sphere) {
```

> [!NOTE]
> The code above features a square root, which can be expensive to calculate. An easy optimization to avoid it consists of comparing the squared distance with the squared radius, so the optimized equation would instead involve `distanceSqr < sphere.radius * sphere.radius`.
> The code above features a square root, which can be expensive to calculate. An effective optimization to avoid it consists of comparing the squared distance with the squared radius, so the optimized equation would instead involve `distanceSqr < sphere.radius * sphere.radius`.

### Sphere vs. sphere

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -320,7 +320,7 @@ render();

## Summary

A-Frame targets web developers by offering easy to use web markup and all the advantages that brings, such as JavaScript manipulation. It is easy to start with, but also provides a powerful API for advanced concepts, as well as dealing with cross browser differences. It's a great time to start experimenting with such frameworks.
A-Frame targets web developers by offering web markup with advantages such as JavaScript manipulation. It provides a powerful API for advanced concepts, as well as dealing with cross browser differences. It's a great time to start experimenting with such frameworks.

## See also

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ The `StandardMaterial` takes two parameters: a name, and the scene you want to a

## Babylon.js shapes example

Congratulations, you've created your first object in a 3D environment using Babylon.js! It was easier than you thought, right?
Congratulations, you've created your first object in a 3D environment using Babylon.js! It was less painful than you thought, right?
Here's what we have created so far in a live sample.
You can click "Play" to edit the code in the MDN Playground:

Expand Down Expand Up @@ -283,7 +283,7 @@ The `t` variable will be incremented on every rendered frame.

### Rotation

Applying rotation is as easy as adding this line at the end of the `renderLoop` function:
Applying rotation requires adding this line at the end of the `renderLoop` function:

```js
box.rotation.y = t * 2;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@ sidebar: games

A typical 3D scene in a game — even the simplest one — contains standard items like shapes located in a coordinate system, a camera to view it, lights and materials to make it look better, animations to make it look alive, etc. **Three.js**, as with any other 3D library, provides built-in helper functions to help you implement common 3D functionality more quickly. In this article we'll take you through the real basics of using Three.js, including setting up a development environment, structuring the necessary HTML, the fundamental objects of Three, and how to build up a basic demo.

Three is one of the most popular [WebGL](/en-US/docs/Web/API/WebGL_API) libraries, and it is easy to get started with.
We are not saying it is better than any other WebGL library, and you should feel free to try other libraries.
Three is one of the most popular [WebGL](/en-US/docs/Web/API/WebGL_API) libraries, though we are not saying it is better than any other WebGL library, and you should feel free to try other libraries.

> [!NOTE]
> This guide was last updated in November 2024, and is compatible with Three.js version `r79`.
Expand Down Expand Up @@ -184,7 +183,7 @@ cube.rotation.set(0.4, 0.2, 0);
## Three.js shape example

If you've followed everything so far without any problems, you've created your first object in a 3D environment using Three.js!
It was easier than you thought, right?
Congratulations.
Your code should look like the following live sample.
You can click "Play" to view and edit the code in the MDN Playground:

Expand Down
4 changes: 2 additions & 2 deletions files/en-us/games/techniques/3d_on_the_web/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ It's hard to imagine a game without collision detection — we always need to wo

The concept of virtual reality is not new, but it's storming onto the web thanks to hardware advancements such as the [Meta Quest](https://www.meta.com/quest/), and the (currently experimental) [WebXR API](/en-US/docs/Web/API/WebXR_Device_API) for capturing information from XR hardware and making it available for use in JavaScript applications. For more, read [WebXR — Virtual and Augmented Reality for the Web](/en-US/docs/Games/Techniques/3D_on_the_web/WebXR).

There's also the [Building up a basic demo with A-Frame](/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) article showing you how easy it is to build 3D environments for virtual reality using the [A-Frame](https://aframe.io/) framework.
There's also the [Building up a basic demo with A-Frame](/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) article showing you how to build 3D environments for virtual reality using the [A-Frame](https://aframe.io/) framework.

## The rise of libraries and frameworks

Expand All @@ -58,7 +58,7 @@ PlayCanvas is a popular 3D WebGL game engine open-sourced on GitHub, with an edi

### Building up a basic demo with Three.js

Three.js, like any other library, gives you a huge advantage: instead of writing hundreds of lines of WebGL code to build anything interesting you can use built-in helper functions to do it a lot easier and faster. See the [Building up a basic demo with Three.js](/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js) subpage for the step-by-step process of creating the demo.
Three.js, like any other library, gives you a huge advantage: instead of writing hundreds of lines of WebGL code to build anything interesting you can use built-in helper functions to do it a lot faster. See the [Building up a basic demo with Three.js](/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js) subpage for the step-by-step process of creating the demo.

### Other tools

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/games/techniques/audio_for_web_games/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ myAudio.addEventListener("timeupdate", () => {

Music in games can have a powerful emotional effect. You can mix and match various music samples and assuming you can control the volume of your audio element you could cross-fade different musical pieces. Using the [`playbackRate()`](/en-US/docs/Web/API/HTMLMediaElement/playbackRate) method you can even adjust the speed of your music without affecting the pitch, to sync it up better with the action.

All this is possible using the standard {{htmlelement("audio")}} element and associated {{domxref("HTMLMediaElement")}}, but it becomes much easier and more flexible with the more advanced [Web Audio API](/en-US/docs/Web/API/Web_Audio_API). Let's look at this next.
All this is possible using the standard {{htmlelement("audio")}} element and associated {{domxref("HTMLMediaElement")}}, but it becomes more flexible with the more advanced [Web Audio API](/en-US/docs/Web/API/Web_Audio_API). Let's look at this next.

### Web Audio API for games

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ sidebar: games

Now, when we have our mobile controls in place and the game is playable on touch-enabled devices, it would be good to add mouse and keyboard support so the game can be playable on desktop also. That way we can broaden the list of supported platforms. We'll look at this below.

It's also easier to test control-independent features like gameplay on desktop if you develop it there, so you don't have to push the files to a mobile device every time you make a change in the source code.
It's also more straightforward to test control-independent features like gameplay on desktop if you develop it there, so you don't have to push the files to a mobile device every time you make a change in the source code.

> [!NOTE]
> The [Captain Rogers: Battle at Andromeda](https://rogers2.enclavegames.com/demo/) is built with Phaser and managing the controls is Phaser-based, but it could also be done in pure JavaScript. The good thing about using Phaser is that it offers helper variables and functions for easier and faster development, but it's totally up to you which approach you chose.
> The [Captain Rogers: Battle at Andromeda](https://rogers2.enclavegames.com/demo/) is built with Phaser and managing the controls is Phaser-based, but it could also be done in pure JavaScript. The good thing about using Phaser is that it offers helper variables and functions for faster development, but it's totally up to you which approach you chose.

## Pure JavaScript approach

Expand Down Expand Up @@ -79,7 +79,7 @@ You can see this example in action online at [end3r.github.io/JavaScript-Game-Co

## Phaser approach

As I mentioned before, you can write everything on your own, but you can also take advantage of built-in functions in frameworks like Phaser. These will make your life easier and development a lot faster. All the edge cases--differences between browser implementations, etc.--are handled by the framework, so you can focus on the actual task you want to do.
As I mentioned before, you can write everything on your own, but you can also take advantage of built-in functions in frameworks like Phaser. These should make development a lot faster. All the edge cases--differences between browser implementations, etc.--are handled by the framework, so you can focus on the actual task you want to do.

### Mouse

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ sidebar: games

{{NextMenu("Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard", "Games/Techniques/Control_mechanisms")}}

The future of mobile gaming is definitely web, and many developers choose the [mobile first](/en-US/docs/Glossary/Mobile_First) approach in their game development process — in the modern world, this generally also involves implementing touch controls. In this tutorial, we will see how easy it is to implement mobile controls in an HTML game, and enjoy playing on a mobile touch-enabled device.
The future of mobile gaming is definitely web, and many developers choose the [mobile first](/en-US/docs/Glossary/Mobile_First) approach in their game development process — in the modern world, this generally also involves implementing touch controls. In this tutorial, we will implement mobile controls in an HTML game, and enjoy playing on a mobile touch-enabled device.

> [!NOTE]
> The game [Captain Rogers: Battle at Andromeda](https://rogers2.enclavegames.com/demo/) is built with Phaser and managing the controls is Phaser-based, but it could also be done in pure JavaScript. The good thing about using Phaser is that it offers helper variables and functions for easier and faster development, but it's entirely up to you which approach you to choose.
> The game [Captain Rogers: Battle at Andromeda](https://rogers2.enclavegames.com/demo/) is built with Phaser and managing the controls is Phaser-based, but it could also be done in pure JavaScript. The good thing about using Phaser is that it offers helper variables and functions for faster development, but it's entirely up to you which approach you to choose.
## Pure JavaScript approach

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/games/techniques/controls_gamepad_api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -247,4 +247,4 @@ There were more events available in the spec than just `gamepadconnected` and `g

## Summary

The Gamepad API is very easy to develop with. Now it's easier than ever to deliver a console-like experience to the browser without the need for any plugins. You can play the full version of the [Hungry Fridge](https://enclavegames.com/games/hungry-fridge/) game directly in your browser. Check the other resources on the [Gamepad API Content Kit](https://end3r.github.io/Gamepad-API-Content-Kit/).
The Gamepad API enables delivering a console-like experience to the browser without the need for any plugins. You can play the full version of the [Hungry Fridge](https://enclavegames.com/games/hungry-fridge/) game directly in your browser. Check the other resources on the [Gamepad API Content Kit](https://end3r.github.io/Gamepad-API-Content-Kit/).
4 changes: 2 additions & 2 deletions files/en-us/games/tools/asm.js/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ sidebar: games

It is a very small, strict subset of JavaScript that only allows things like `while`, `if`, numbers, top-level named functions, and other simple constructs. It does not allow objects, strings, closures, and basically anything that requires heap allocation. Asm.js code resembles C in many ways, but it's still completely valid JavaScript that will run in all current engines. It pushes JS engines to optimize this kind of code, and gives compilers like [Emscripten](https://github.com/emscripten-core/emscripten) a clear definition of what kind of code to generate. We will show what asm.js code looks like and explain how it helps and how you can use it.

This subset of JavaScript is already highly optimized in many JavaScript engines using fancy Just-In-Time (JIT) compiling techniques. However, by defining an explicit standard we can work on optimizing this kind of code even more and getting as much performance as we can out of it. It makes it easier to collaborate across multiple JS engines because it's easy to talk about and benchmark. The idea is that this kind of code **should** run very fast in each engine, and if it doesn't, it's a bug and there's a clear spec that engines should optimize for.
This subset of JavaScript is already highly optimized in many JavaScript engines using fancy Just-In-Time (JIT) compiling techniques. However, by defining an explicit standard we can work on optimizing this kind of code even more and getting as much performance as we can out of it. With standard names and benchmarking, it enables collaborating across multiple JS engines. The idea is that this kind of code **should** run very fast in each engine, and if it doesn't, it's a bug and there's a clear spec that engines should optimize for.

It also makes it easy for people writing compilers that want to generate high-performant code on the web. They can consult the asm.js spec and know that it will run fast if they adhere to asm.js patterns. [Emscripten](https://github.com/emscripten-core/emscripten), a C/C++ to JavaScript compiler, emits asm.js code to make it run with near native performance on several browsers.
It also reduces the complexity for people writing compilers that want to generate high-performant code on the web. They can consult the asm.js spec and know that it will run fast if they adhere to asm.js patterns. [Emscripten](https://github.com/emscripten-core/emscripten), a C/C++ to JavaScript compiler, emits asm.js code to make it run with near native performance on several browsers.

Additionally, if an engine chooses to specially recognize asm.js code, there even more optimizations that can be made. Firefox is the only browser to do this right now.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ sidebar: games

{{PreviousNext("Games/Tutorials/2D_breakout_game_Phaser/Game_over", "Games/Tutorials/2D_breakout_game_Phaser/Collision_detection")}}

This is the **9th step** out of 16 of the [Gamedev Phaser tutorial](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser). Let's explore how to create a group of bricks and print them on the screen using a loop. Building the brick field is a little bit more complicated than adding a single object to the screen, although it's still easier with Phaser than in pure JavaScript.
This is the **9th step** out of 16 of the [Gamedev Phaser tutorial](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser). Let's explore how to create a group of bricks and print them on the screen using a loop. Building the brick field is a little bit more complicated than adding a single object to the screen, although likely less complicated to do with Phaser than in pure JavaScript.

## New properties

Expand All @@ -21,7 +21,7 @@ class ExampleScene extends Phaser.Scene {
}
```

The `bricks` property will be used to create a group of bricks, which will make it easy to manage multiple bricks at once.
The `bricks` property will be used to create a group of bricks, which enables managing multiple bricks at once.

## Rendering the brick image

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ The `lifeLostText` will be shown only when the life is lost, so its visibility i

### Making our text styling DRY

As you probably noticed, we're using the same styling for all three texts: `scoreText`, `livesText`, and `lifeLostText`. If we ever want to change the font size or color, we will have to do it in multiple places. To make it easier for us to maintain in the future, we can create a separate variable that will hold our styling, let's call it `textStyle` and place it before the text definitions:
As you probably noticed, we're using the same styling for all three texts: `scoreText`, `livesText`, and `lifeLostText`. If we ever want to change the font size or color, we will have to do it in multiple places. To better enable us to maintain it in the future, we can create a separate variable that will hold our styling, let's call it `textStyle` and place it before the text definitions:

```js
const textStyle = { font: "18px Arial", fill: "#0095dd" };
Expand Down
Loading