PIP: Skull Demo is live!

Showcase
1

Finally! Check out this short game demo I made with ThreeJs. Previous to this, I did a Unity Demo about a year ago before all the Unity Licensing drama unfolded, then I put a stop to it and recently decided to give threejs a go. In retrospective, the development in threejs felt a bit more dynamic and since using Javascript I had more room to bend things. But on the other hand, I did had to use a lot of time to build a framework before I could start coding for the game itself.

Live link —> PIP : Demo

screenshot
screenshot1834×941 119 KB

The trailer:

** GAMEPLAY **

7 Likes
2

Didn’t load for me.. is it in flux?

image
image2174×1136 228 KB

3

Looks like its accessing GamepadButton[12] but there are only 11 elements in the array.

4

Ohh… I have this for the buttons, is this wrong? What joystick are you using? what model how many buttons does it have? ( thanks for reporting this I will add you to the credits once I fix this )

this.buttons = [
            [0, controls.action],  // A button
            [1, controls.jump],    // B button
            [12, controls.up],     // D-Pad Up
            [13, controls.down],   // D-Pad Down
            [14, controls.left],   // D-Pad Left
            [15, controls.right],  // D-Pad Right
            [9, controls.pause]      // Start button is pause
        ]

The Gamepad API follows a “standard” layout (based on common controllers like Xbox/PS). Here’s the typical button index mapping:
0: A (bottom face button)
1: B (right face button)
2: X (left face button)
3: Y (top face button)
4: Left shoulder (LB/L1)
5: Right shoulder (RB/R1)
6: Left trigger (LT/L2)
7: Right trigger (RT/R2)
8: Back/Select
9: Start
10: Left stick press
11: Right stick press
12: D-Pad Up
13: D-Pad Down
14: D-Pad Left
15: D-Pad Right

5

USB XBox controller.

12 buttons:

image
image1800×1096 116 KB

and 10 analog channels.

6

could you paste this code in the console and press one by one each button if your joystick?

function checkGamepad() {
    const gamepads = navigator.getGamepads();
    const gamepad = gamepads[0];
    if (gamepad) {
        console.log("Buttons length:", gamepad.buttons.length);
        gamepad.buttons.forEach((btn, idx) => {
            if (btn.pressed) console.log(`Button ${idx} pressed`);
        });
    }
    requestAnimationFrame(checkGamepad);
}
checkGamepad();
7

Oh sorry, I was looking at the wrong controller. I have 2. The 12 button one is a Logitech Extreme 3d flightstick.. so that’s probably what it’s reading.

I’m sure a simple null check will fix the exception tho.

if(!r)return;

Is there keyboard/mouse controls as well?

8

yeah plugging in my xbox controller made it work… SORTA.
It got into the game to the first menu.. but then buttons aren’t responding. Keyboard and mouse not working either.

9

yeah it runs on AWSD to move, E to attack, SPACE to jump and ESC to pause.
But wait, so you were using a very old joystick or something? Does it have analog sticks? I’m coding a fallback to use those as we speak. Do you want me to link to your social media in the credits when I add your name or I should just link to your profile here in this site and call you “manthrax” ?

10

Haha manthrax works.
My xbox stick is like 4 years old.. the flightstick is ancient.
kb+mouse doesn’t seem to be active. I think its grabbing my flightstick as the primary controller maybe? my xbox controller isn’t selecting menus.

Hitting the start button on the xbox controller did take me to the menu screen.. but the analog or dpad aren’t changing the menu selection, and no buttons activate it.

no errors in the console.

11

the system should support keyboard + joystick all at the same time… weird, is your keyboard new or mabe old with broken keys?

12

keyboard is new.

13

Fun. It’s like The Mobius Machine as a minigame.

1 Like
14

I didn’t knew that game I had to google it but I see the vibe…