diff --git a/spine-ts/spine-webgl/example/webcomponent-tutorial.html b/spine-ts/spine-webgl/example/webcomponent-tutorial.html
index c7519884a..bb5927dba 100644
--- a/spine-ts/spine-webgl/example/webcomponent-tutorial.html
+++ b/spine-ts/spine-webgl/example/webcomponent-tutorial.html
@@ -2103,8 +2103,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
                 (async () => {
                     const tank = spine.getSpineWidget("tank");
                     const tank2 = spine.getSpineWidget("tank2");
-                    await tank.loadingPromise;
-                    await tank2.loadingPromise;
+                    await Promise.all([tank.loadingPromise, tank2.loadingPromise]);
 
                     tank.beforeUpdateWorldTransforms = (skeleton, state) => {
                         if (!tank.onScreen) return;
@@ -2145,8 +2144,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
 (async () => {
     const tank = spine.getSpineWidget("tank");
     const tank2 = spine.getSpineWidget("tank2");
-    await tank.loadingPromise;
-    await tank2.loadingPromise;
+    await Promise.all([tank.loadingPromise, tank2.loadingPromise]);
 
     // since we want the tank to overflow the div, we set fit to none
     // then we "sync" the tank scale to the one of the tank above
@@ -3559,6 +3557,331 @@ TODO`
     -->
 
 
+    <!--
+    /////////////////////
+    // start section //
+    /////////////////////
+    -->
+
+    <div class="section vertical-split">
+
+        <div class="split-top split">
+            <div class="split-left" style="padding: 0;">
+
+                <div id="container-game" style="display: flex; flex-direction: column; height: 400px; position: relative;">
+                    <div
+                        id="win-panel"
+                        style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; display: none; align-items: center; justify-content: center; background-color: #000000aa; z-index: 1; color: white; font-size: xx-large;">
+                        YOU LOSE!
+                    </div>
+
+                    <div class="bottom" style="flex: 80%; background-color: rgb(24, 149, 89); display: flex; align-items: center; justify-content: center;">
+                        <spine-widget
+                            identifier="windmill-game"
+                            atlas="assets/windmill-ess.atlas"
+                            skeleton="assets/windmill-ess.json"
+                            animation="animation"
+                            isinteractive
+                        ></spine-widget>
+                        <spine-widget
+                            identifier="spineboy-game"
+                            atlas="assets/spineboy-pma.atlas"
+                            skeleton="assets/spineboy-pro.json"
+                            animation="hoverboard"
+                            fit="none"
+                        ></spine-widget>
+                    </div>
+                </div>
+
+            </div>
+            <div class="split-right">
+                <div class="top" style="flex: 20%; flex-direction: column; gap: 10px; display: flex; align-items: center; justify-content: center; align-items: stretch; height: 100%;">
+                    <div style="display: flex; flex-direction: column; border: 3px solid black; border-radius: 10px; box-shadow: 5px 5px 15px grey; padding: 10px; ">
+                        Use WASD to move around!
+                    </div>
+
+                    <div style="display: flex; flex-direction: column; border: 3px solid black; border-radius: 10px; box-shadow: 5px 5px 15px grey; padding: 10px; ">
+                        <div id="killed" style="flex: 30%; font-weight: bold; text-transform: uppercase; border-bottom: 1px solid white; text-align: center;"></div>
+                        <div style="flex: 70%;"">Save the flowers from the white pest by shooting them</div>
+                    </div>
+
+                    <div style="display: flex; flex-direction: column; border: 3px solid black; border-radius: 10px; box-shadow: 5px 5px 15px grey; padding: 10px; ">
+                        <div id="ammo" style="flex: 30%; font-weight: bold; text-transform: uppercase; border-bottom: 1px solid white; text-align: center;"></div>
+                        <div>Go to the red colored rooster of bush when ammo is low</div>
+                    </div>
+
+                    <div style="display: flex; flex-direction: column; border: 3px solid black; border-radius: 10px; box-shadow: 5px 5px 15px grey; padding: 10px; ">
+                        <div id="level" style="flex: 30%; font-weight: bold; text-transform: uppercase; border-bottom: 1px solid white; text-align: center;"></div>
+                        <div>Reach level 10 to win the game</div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+
+        <script>
+            const winPanel = document.getElementById("win-panel");
+            const killedSpan = document.getElementById("killed");
+            const ammoSpan = document.getElementById("ammo");
+            const levelSpan = document.getElementById("level");
+            const containerGame = document.getElementById("container-game");
+
+            (async () => {
+                const spineboy = spine.getSpineWidget("spineboy-game");
+                const windmill = spine.getSpineWidget("windmill-game");
+                await Promise.all([spineboy.loadingPromise, windmill.loadingPromise]);
+
+                spineboy.state.setAnimation(2, "aim", true);
+
+                spineboy.skeleton.slots.forEach(slot => {
+                    if (slot.data.name === "gun") {
+                        spineboy.addCursorSlotEventCallbacks(slot, (slot,event) => {
+                            if (event === "down") {
+                                spineboy.state.setAnimation(1, "shoot", false);
+                            }
+                        });
+                    }
+
+                    if (slot.data.name === "torso") {
+                        spineboy.addCursorSlotEventCallbacks(slot, (slot,event) => {
+                            if (event === "down") {
+                                spineboy.state.setAnimation(0, "jump", false).mixDuration = 0.2;
+                                spineboy.state.addAnimation(0, "walk", true).mixDuration = 0.2;
+                            }
+                        });
+                    }
+
+                    if (slot.data.name === "head") {
+                        spineboy.addCursorSlotEventCallbacks(slot, (slot,event) => {
+                            if (event === "down") {
+                                spineboy.state.setAnimation(1, "run", true).mixDuration = 0.2;
+                            } else {
+                                if (event === "up") {
+                                    spineboy.state.setEmptyAnimation(1, 1);
+                                    spineboy.state.clearTrack(1);
+                                }
+                            }
+                        });
+                    }
+                });
+
+                const tempVector = new spine.Vector2();
+                const crosshairSlot = spineboy.skeleton.findSlot("crosshair");
+                crosshairSlot.color.a = 0;
+                const crosshairBone = crosshairSlot.bone;
+
+                let points = 0;
+                let ammo = 5;
+                let killed = 0;
+                let level = 1;
+                ammoSpan.innerText = `Ammo: ${ammo}`;
+                killedSpan.innerText = `Saved: ${killed}`;
+                levelSpan.innerText = `Level: ${level}`;
+
+                const flowers = [];
+                const ammoLocations = [];
+                windmill.skeleton.slots.forEach(slot => {
+                    if (slot.data.name === "rooster" || slot.data.name === "bush1") {
+                        ammoLocations.push(slot)
+                    }
+
+                    if (!Number.isNaN(parseInt(slot.data.name.replace("flower", ""))) || slot.data.name === "flower") {
+
+                        slot.color.set(1, 0, 0, 1);
+
+                        flowers.push(slot);
+
+                        windmill.addCursorSlotEventCallbacks(slot, (slot, event) => {
+                            if (ammo === 0) return;
+
+                            if (event !== "down") return;
+
+                            if (slot.color.g === 0) return;
+
+                            spineboy.state.setAnimation(1, "shoot", false);
+                            ammo--;
+                            points++;
+                            killed++;
+                            if (points === 10) {
+                                level++
+                                points = 0
+                                maxTime -= 100
+                            }
+                            ammoSpan.innerText = `Ammo: ${ammo}`;
+                            killedSpan.innerText = `Saved: ${killed}`;
+
+                            tempVector.x = slot.bone.x;
+                            tempVector.y = slot.bone.y;
+                            slot.bone.parentToWorld(tempVector);
+
+                            crosshairBone.x = (tempVector.x + (windmill.worldX - spineboy.worldX) - spineboy.skeleton.x) / spineboy.skeleton.scaleX;
+                            crosshairBone.y = (tempVector.y + (windmill.worldY - spineboy.worldY) - spineboy.skeleton.y) / spineboy.skeleton.scaleY;
+
+                            slot.color.set(1, 0, 0, 1);
+                        });
+
+                    }
+                });
+
+
+                let time = 0;
+                let maxTime = 1000;
+                let ammoLocationActive = false;
+                let gameVectorTemp = new spine.Vector3();
+                let interval = setInterval(() => {
+
+                    if (!ammoLocationActive && ammo <= 2) {
+                        ammoLocationActive = true;
+                        spineboy.overlay.worldToScreen(gameVectorTemp, spineboy.worldX + spineboy.skeleton.x, spineboy.worldY + spineboy.skeleton.y)
+                        const { x, width } = containerGame.getBoundingClientRect();
+                        const containerGameMiddle = x + width / 2;
+                        const left = gameVectorTemp.x < containerGameMiddle;
+                        const ammoLocation = ammoLocations[left ? 1 : 0];
+                        (ammoLocation.darkColor ||= new spine.Color()).set(1, 0, 0, 1);
+                        levelSpan.innerText = `Level: ${level} / 10`;
+                    };
+
+                    if (time >= maxTime) {
+                        time = 0;
+                        const flower = random(flowers);
+                        flower.color.set(1, 1, 1, 1);
+                    }
+
+                    if (checkLoseCondition()) {
+                        endGame(false, interval);
+                        return;
+                    }
+
+                    if (checkWinCondition()) {
+                        endGame(true, interval);
+                        return;
+                    }
+
+                    time += 100;
+                }, 100);
+
+                const checkWinCondition = () => level === 10;
+                const checkLoseCondition = () => flowers.every((flowerSlot) => flowerSlot.color.g !== 0);
+                const endGame = (win, interval) => {
+                    clearInterval(interval);
+                    winPanel.style.display = "flex";
+                    winPanel.innerText = win ? "YOU WIN!" : "YOU LOSE!"
+                    document.removeEventListener('keydown', handleKeyDown);
+                    document.removeEventListener('keyup', handleKeyUp);
+                    keys.w = false;
+                    keys.a = false;
+                    keys.s = false;
+                    keys.d = false;
+                    spineboy.state.setAnimation(1, win ? "jump" : "death", win);
+                }
+                const random = array => array[Math.floor(Math.random() * array.length)];
+
+                const MOVE_SPEED = 2.5;
+                const keys = {
+                    w: false,
+                    a: false,
+                    s: false,
+                    d: false
+                };
+
+                function handleKeyDown(e) {
+                    const key = e.key.toLowerCase();
+                    if (key in keys) {
+                        keys[key] = true;
+                        e.preventDefault();
+                    }
+                }
+
+                function handleKeyUp(e) {
+                    const key = e.key.toLowerCase();
+                    if (key in keys) keys[key] = false;
+                }
+
+                spineboy.skeleton.x += 0
+                spineboy.skeleton.y -= 330
+                let direction = 1;
+
+                spineboy.beforeUpdateWorldTransforms = () => {
+                    let posX = 0;
+                    let posY = 0;
+
+                    // Move based on pressed keys
+                    const inc = MOVE_SPEED * windmill.skeleton.scaleX;
+                    if (keys.w) posY -= inc;
+                    if (keys.a) posX -= inc;
+                    if (keys.s) posY += inc;
+                    if (keys.d) posX += inc;
+
+                    // Update visual position
+                    spineboy.skeleton.x += posX;
+                    spineboy.skeleton.y -= posY;
+
+                    direction = posX < 0 ? direction = -1 : posX > 0 ? 1 : direction;
+                    spineboy.skeleton.scaleX = .25 * windmill.skeleton.scaleX * direction;
+                    spineboy.skeleton.scaleY = .25 * windmill.skeleton.scaleY;
+
+
+                    const spineboyPosition = {
+                        x: spineboy.worldX + spineboy.skeleton.x - spineboy.bounds.width / 2 * spineboy.skeleton.scaleX * direction,
+                        y: spineboy.worldY + spineboy.skeleton.y ,
+                        width: spineboy.bounds.width * spineboy.skeleton.scaleX * direction,
+                        height: spineboy.bounds.height * spineboy.skeleton.scaleY,
+                    }
+
+                    ammoLocations.forEach(element => {
+                        const width = element.attachment.region.width * windmill.skeleton.scaleX;
+                        const height = element.attachment.region.height * windmill.skeleton.scaleY;
+                        const x = windmill.worldX + element.bone.worldX - width / 2;
+                        const y = windmill.worldY + element.bone.worldY - height / 2;
+
+                        if (isIntersecting(spineboyPosition, { x, y, width, height })) {
+                            if (element.darkColor) {
+                                ammo = 5;
+                                element.darkColor = null;
+                                ammoLocationActive = false;
+                            }
+                        }
+                    });
+
+                }
+
+                document.addEventListener('keydown', handleKeyDown);
+                document.addEventListener('keyup', handleKeyUp);
+            })();
+
+
+            function isIntersecting(rect1, rect2) {
+                return (
+                    rect1.x < rect2.x + rect2.width &&
+                    rect1.x + rect1.width > rect2.x &&
+                    rect1.y < rect2.y + rect2.height &&
+                    rect1.y + rect1.height > rect2.y
+                );
+            }
+
+        </script>
+
+
+        <div class="split-bottom">
+            <pre><code id="code-display">
+                <script>
+                escapeHTMLandInject(`
+<spine-widget
+    atlas="assets/spineboy-pma.atlas"
+    skeleton="assets/spineboy-pro.skel"
+    animation="walk"
+></spine-widget>`)
+                </script>
+            </code></pre>
+        </div>
+    </div>
+
+    <!--
+    /////////////////////
+    // end section //
+    /////////////////////
+    -->
+
 <script>
     spine.SpineWebComponentWidget.SHOW_FPS = true;
 </script>