Convert noteblock in /games to GFM syntax

files/en-us/games/anatomy/index.md

@@ -38,7 +38,8 @@ window.main = () => {
 main(); // Start the cycle
 ```
 
-> **Note:** In each of the `main()` methods discussed here, we schedule a new `requestAnimationFrame` before performing our loop contents. That is not by accident and it is considered best practice. Calling the next `requestAnimationFrame` early ensures the browser receives it on time to plan accordingly even if your current frame misses its VSync window.
+> [!NOTE]
+> In each of the `main()` methods discussed here, we schedule a new `requestAnimationFrame` before performing our loop contents. That is not by accident and it is considered best practice. Calling the next `requestAnimationFrame` early ensures the browser receives it on time to plan accordingly even if your current frame misses its VSync window.
 
 The above chunk of code has two statements. The first statement creates a function as a global variable called `main()`. This function does some work and also tells the browser to call itself next frame with `window.requestAnimationFrame()`. The second statement calls the `main()` function, defined in the first statement. Because `main()` is called once in the second statement and every call of it places itself in the queue of things to do next frame, `main()` is synchronized to your frame rate.
 
@@ -75,7 +76,8 @@ There are two obvious issues with our previous main loop: `main()` pollutes the
 
 When the browser comes across this IIFE, it will define your main loop and immediately queue it for the next frame. It will not be attached to any object and `main` (or `main()` for methods) will be a valid unused name in the rest of the application, free to be defined as something else.
 
-> **Note:** In practice, it is more common to prevent the next `requestAnimationFrame()` with an if-statement, rather than calling `cancelAnimationFrame()`.
+> [!NOTE]
+> In practice, it is more common to prevent the next `requestAnimationFrame()` with an if-statement, rather than calling `cancelAnimationFrame()`.
 
 For the second issue, stopping the main loop, you will need to cancel the call to `main()` with {{ domxref("window.cancelAnimationFrame()") }}. You will need to pass `cancelAnimationFrame()` the ID token given by `requestAnimationFrame()` when it was last called. Let us assume that your game's functions and variables are built on a namespace that you called `MyGame`. Expanding our last example, the main loop would now look like:
 
@@ -125,7 +127,8 @@ You can think about developing realtime applications as having a budget of time
 
 While we are on the topic of budgeting time, many web browsers have a tool called _High Resolution Time_. The {{jsxref("Date")}} object is no longer the recognized method for timing events because it is very imprecise and can be modified by the system clock. High Resolution Time, on the other hand, counts the number of milliseconds since `navigationStart` (when the previous document is unloaded). This value is returned as a decimal number accurate to a thousandth of a millisecond. It is known as a {{ domxref("DOMHighResTimeStamp") }} but, for all intents and purposes, consider it a floating point number.
 
-> **Note:** Systems (hardware or software) that are not capable of microsecond accuracy are allowed to provide millisecond accuracy as a minimum. They should provide 0.001ms accuracy if they are capable of it, however.
+> [!NOTE]
+> Systems (hardware or software) that are not capable of microsecond accuracy are allowed to provide millisecond accuracy as a minimum. They should provide 0.001ms accuracy if they are capable of it, however.
 
 This value is not too useful alone, since it is relative to a fairly uninteresting event, but it can be subtracted from another timestamp to accurately and precisely determine how much time elapsed between those two points. To acquire one of these timestamps, you can call `window.performance.now()` and store the result as a variable.
 
@@ -165,7 +168,8 @@ Several other optimizations are possible and it really depends on what your game
 
 You will need to make hard decisions about your main loop: how to simulate the accurate progress of time. If you demand per-frame control then you will need to determine how frequently your game will update and draw. You might even want update and draw to occur at different rates. You will also need to consider how gracefully your game will fail if the user's system cannot keep up with the workload. Let us start by assuming that you will handle user input and update the game state every time you draw. We will branch out later.
 
-> **Note:** Changing how your main loop deals with time is a debugging nightmare, everywhere. Think about your needs carefully before working on your main loop.
+> [!NOTE]
+> Changing how your main loop deals with time is a debugging nightmare, everywhere. Think about your needs carefully before working on your main loop.
 
 ### What most browser games should look like
 
@@ -232,7 +236,8 @@ Each of these methods have similar tradeoffs:
 
 A separate update and draw method could look like the following example. For the sake of demonstration, the example is based on the third bullet point, just without using Web Workers for readability (and, let's be honest, writability).
 
-> **Warning:** This example, specifically, is in need of technical review.
+> [!WARNING]
+> This example, specifically, is in need of technical review.
 
 <!-- prettier-ignore-start -->
 ```js

files/en-us/games/index.md

@@ -14,7 +14,8 @@ Welcome to the MDN game development center! In this area of the site, we provide
 
 We've also included a reference section so you can easily find information about all the most common APIs used in game development.
 
-> **Note:** Creating games on the web draws on a number of core web technologies such as HTML, CSS, and JavaScript. The [Learning Area](/en-US/docs/Learn) is a good place to go to get started with the basics.
+> [!NOTE]
+> Creating games on the web draws on a number of core web technologies such as HTML, CSS, and JavaScript. The [Learning Area](/en-US/docs/Learn) is a good place to go to get started with the basics.
 
 ## Port native games to the Web
 

files/en-us/games/publishing_games/game_distribution/index.md

@@ -66,7 +66,8 @@ You can also upload and publish your game directly to different types of stores,
 
 Let's see what the available options are regarding the marketplaces/stores available for different platforms and operating systems.
 
-> **Note:** These are the most popular distribution platforms, but this is not to say these are the only options. Instead of trying to add your game to the thousands of others in the iOS store say, you can also try to find a niche and promote directly to the audience who would be interested in your games. Your creativity is critical here.
+> [!NOTE]
+> These are the most popular distribution platforms, but this is not to say these are the only options. Instead of trying to add your game to the thousands of others in the iOS store say, you can also try to find a niche and promote directly to the audience who would be interested in your games. Your creativity is critical here.
 
 ### Web stores
 

files/en-us/games/techniques/2d_collision_detection/index.md

@@ -52,7 +52,7 @@ rect2.bind("EnterFrame", function () {
 
 {{ EmbedLiveSample('Axis-Aligned_Bounding_Box', '700', '300') }}
 
-> **Note:** [Another example without Canvas or external libraries](https://jsfiddle.net/jlr7245/217jrozd/3/).
+> [!NOTE] > [Another example without Canvas or external libraries](https://jsfiddle.net/jlr7245/217jrozd/3/).
 
 ## Circle Collision
 
@@ -127,7 +127,7 @@ circle2.bind("EnterFrame", function () {
 
 {{ EmbedLiveSample('Circle_Collision', '700', '300') }}
 
-> **Note:** [Here is another example without Canvas or external libraries.](https://jsfiddle.net/jlr7245/teb4znk0/20/)
+> [!NOTE] > [Here is another example without Canvas or external libraries.](https://jsfiddle.net/jlr7245/teb4znk0/20/)
 
 ## Separating Axis Theorem
 

files/en-us/games/techniques/3d_collision_detection/bounding_volume_collision_detection_with_three.js/index.md

@@ -29,7 +29,8 @@ const knotBBox = new Box3(
 );
 ```
 
-> **Note:** The `boundingBox` property takes the `Geometry` itself as reference, and not the `Mesh`. So any transformations such as scale, position, etc. applied to the `Mesh` will be ignored while computing the calculating box.
+> [!NOTE]
+> The `boundingBox` property takes the `Geometry` itself as reference, and not the `Mesh`. So any transformations such as scale, position, etc. applied to the `Mesh` will be ignored while computing the calculating box.
 
 A more simple alternative that fixes the previous issue is to set those boundaries later on with `Box3.setFromObject`, which will compute the dimensions taking into account a 3D entity's **transformations _and_ any child meshes** as well.
 
@@ -85,7 +86,8 @@ The **`Box3.intersectsBox`** method is available for performing this test.
 knotBbox.intersectsBox(otherBox);
 ```
 
-> **Note:** This is different from the `Box3.containsBox` method, which checks whether the Box3 _fully_ wraps another one.
+> [!NOTE]
+> This is different from the `Box3.containsBox` method, which checks whether the Box3 _fully_ wraps another one.
 
 #### `Sphere` vs. `Sphere`
 

files/en-us/games/techniques/3d_collision_detection/index.md

@@ -18,7 +18,8 @@ The **axis-aligned constraint** is there because of performance reasons. The ove
 
 ![Animated rotating knot showing the virtual rectangular box shrink and grow as the knots rotates within it. The box does not rotate.](rotating_knot.gif)
 
-> **Note:** Check out the [Bounding Volumes with Three.js](/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js) article to see a practical implementation of this technique.
+> [!NOTE]
+> Check out the [Bounding Volumes with Three.js](/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js) article to see a practical implementation of this technique.
 
 ### Point vs. AABB
 
@@ -97,7 +98,8 @@ 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`.
+> [!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`.
 
 ### Sphere vs. sphere
 

files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md

@@ -48,7 +48,8 @@ This contains some basic information like the document `charset` and {{htmleleme
 
 A scene is the place where everything happens. When creating new objects in the demo, we will be adding them all to the scene to make them visible on the screen. In A-Frame, the scene is represented by a [Scene entity](https://aframe.io/docs/core/scene.html).
 
-> **Note:** An Entity is any element — it can be an object like a box, cylinder or cone, but it can also be a camera, light or sound source.
+> [!NOTE]
+> An Entity is any element — it can be an object like a box, cylinder or cone, but it can also be a camera, light or sound source.
 
 Let's create the scene by adding an `<a-scene>` element inside the `<body>` element:
 
@@ -66,7 +67,8 @@ Adding the cube to the scene is done by adding a simple [`<a-box>`](https://afra
 
 It contains a few parameters already defined: `color`, `position` and `rotation` — these are fairly obvious, and define the base color of the cube, the position inside the 3D scene, and the rotation of the cube.
 
-> **Note:** The distance values (e.g. for the cube y position) are unitless, and can basically be anything you deem suitable for your scene — millimeters, meters, feet, or miles — it's up to you.
+> [!NOTE]
+> The distance values (e.g. for the cube y position) are unitless, and can basically be anything you deem suitable for your scene — millimeters, meters, feet, or miles — it's up to you.
 
 ### Adding a background: Sky box
 
@@ -260,7 +262,8 @@ Everything is rendered properly and animating — congratulations on building yo
 
 If you have a VR device available, now is a good time to try out your scene with it too.
 
-> **Note:** You can also [check it out on GitHub](https://github.com/end3r/MDN-Games-3D/blob/gh-pages/A-Frame/shapes.html).
+> [!NOTE]
+> You can also [check it out on GitHub](https://github.com/end3r/MDN-Games-3D/blob/gh-pages/A-Frame/shapes.html).
 
 That was easier than you thought, right? 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 and suchlike. The community is growing, just like the number of supported VR devices — it's a great time to start experimenting with such frameworks.
 

files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js/index.md

@@ -104,7 +104,8 @@ const camera = new BABYLON.FreeCamera(
 
 There are many [cameras](https://doc.babylonjs.com/divingDeeper/cameras) available in Babylon.js; `FreeCamera` is the most basic and universal one. To initialize it you need to pass it three parameters: any name you want to use for it, the coordinates where you want it to be positioned in the 3D space, and the scene you want to add it to.
 
-> **Note:** You probably noticed the `BABYLON.Vector3()` method in use here — this defines a 3D position on the scene. Babylon.js is bundled with a complete math library for handling vectors, colors, matrices etc.
+> [!NOTE]
+> You probably noticed the `BABYLON.Vector3()` method in use here — this defines a 3D position on the scene. Babylon.js is bundled with a complete math library for handling vectors, colors, matrices etc.
 
 ## Let there be light
 
@@ -130,7 +131,8 @@ const box = BABYLON.Mesh.CreateBox("box", 2, scene);
 
 A mesh is a way the engine creates geometric shapes, so material can be easily applied to them later on. In this case we're creating a box using the `Mesh.CreateBox` method with its own name, a size of 2, and a declaration of which scene we want it added to.
 
-> **Note:** The size or position values (e.g. for the box size) are unitless, and can basically be anything you deem suitable for your scene — millimeters, meters, feet, or miles — it's up to you.
+> [!NOTE]
+> The size or position values (e.g. for the box size) are unitless, and can basically be anything you deem suitable for your scene — millimeters, meters, feet, or miles — it's up to you.
 
 If you save and refresh now, your object will look like a square, because it's facing the camera. The good thing about objects is that we can move them on the scene however we want, for example rotating and scaling. Let's apply a little rotation to the box, so we can see more than one face — again, add these lines below the previous one:
 

files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/editor/index.md

@@ -56,7 +56,8 @@ Click on your new material in the assets tab and its entity inspector will appea
 
 To change its color we'll use the _Diffuse_ option in the entity inspector. Click _Diffuse_, then select the colored box next to the Color label — it will open a {{glossary("color wheel")}}. From here you can click your desired color or enter it in the bottom text field as a hex value. We've chosen a blue color with a hex value of `0095DD` — enter this code in the text field and press return for it to be accepted.
 
-> **Note:** Yes, you read that right — you need to enter the hex value without the hash/pound symbol.
+> [!NOTE]
+> Yes, you read that right — you need to enter the hex value without the hash/pound symbol.
 
 ![PlayCanvas Editor - Diffuse color](playcanvas-editor-diffusecolor.png)
 

files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/engine/index.md

@@ -93,11 +93,13 @@ camera.setPosition(0, 0, 7);
 
 The code above will create a new `Entity`.
 
-> **Note:** An Entity is any object used in the scene — it can be an object like a box, cylinder or cone, but it can also be a camera, light or sound source.
+> [!NOTE]
+> An Entity is any object used in the scene — it can be an object like a box, cylinder or cone, but it can also be a camera, light or sound source.
 
 Then it adds a `camera` component to it with the light gray `clearColor` — the color will be visible as the background. Next, the `camera` object is added to the root of our application and positioned to be 7 units away from the center of the scene on the `z` axis. This allows us to make some space to visualize the objects that we will create later on.
 
-> **Note:** The distance values (e.g. for the camera z position) are unitless, and can basically be anything you deem suitable for your scene — millimeters, meters, feet, or miles — it's up to you.
+> [!NOTE]
+> The distance values (e.g. for the camera z position) are unitless, and can basically be anything you deem suitable for your scene — millimeters, meters, feet, or miles — it's up to you.
 
 Try saving the file and loading it in your browser. You should now see a gray window. Congratulations!
 
@@ -149,7 +151,8 @@ box.model.model.meshInstances[0].material = boxMaterial;
 
 By diffusing the light on the object, we can give it its own color — we'll choose a nice familiar blue.
 
-> **Note:** In PlayCanvas, the color channel values are provided as floats in the range `0-1`, instead of integers of `0-255` as you might be used to using on the Web.
+> [!NOTE]
+> In PlayCanvas, the color channel values are provided as floats in the range `0-1`, instead of integers of `0-255` as you might be used to using on the Web.
 
 After the material is created and its color is set, it has to be updated so our changes are going to be applied. Then all we need to do is set the `box`'s material to the newly created `boxMaterial`.
 

files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md

@@ -20,7 +20,8 @@ PlayCanvas has a few well-known demos published that showcase its possibilities.
 
 ![A list of PlayCanvas demos: Tanx, Swooop, Star Lord, BMW i8.](playcanvas-demos.png)
 
-> **Note:** Check out the list of [featured demos](https://playcanvas.com/explore) to find more examples.
+> [!NOTE]
+> Check out the list of [featured demos](https://playcanvas.com/explore) to find more examples.
 
 ## Engine vs. editor
 

files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md

@@ -8,7 +8,8 @@ page-type: guide
 
 A typical 3D scene in a game — even the simplest one — contains standard items like shapes located in a coordinate system, a camera to actually see them, 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, including setting up a development environment, structuring the necessary HTML, the fundamental objects of Three, and how to build up a basic demo.
 
-> **Note:** We chose Three because it 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 trying to say it is better than any other WebGL library available, and you should feel free to try another library, such as [CopperLicht](https://www.ambiera.com/copperlicht/index.html) or [PlayCanvas](https://playcanvas.com/).
+> [!NOTE]
+> We chose Three because it 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 trying to say it is better than any other WebGL library available, and you should feel free to try another library, such as [CopperLicht](https://www.ambiera.com/copperlicht/index.html) or [PlayCanvas](https://playcanvas.com/).
 
 ## Environment setup
 
@@ -109,7 +110,8 @@ There are other types of camera available (Cube, Orthographic), but the simplest
 
 You should experiment with these values and see how they change what you see in the scene.
 
-> **Note:** The distance values (e.g. for the camera z position) are unitless, and can be anything you deem suitable for your scene: millimeters, meters, feet, or miles. It's up to you.
+> [!NOTE]
+> The distance values (e.g. for the camera z position) are unitless, and can be anything you deem suitable for your scene: millimeters, meters, feet, or miles. It's up to you.
 
 ## Rendering the scene