npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

dudes

v0.1.26

Published

[dudes!](https://dudes.gatunes.com/) [![npm-version](https://img.shields.io/npm/v/dudes.svg)](https://www.npmjs.com/package/dudes) ==

Downloads

8

Readme

dudes! npm-version

screenshot

Live examples

  • demo | source - Menu
  • demo | source - DudeBrush: A VR sculpting tool with import/export
  • demo | source - A scene to debug the voxel updates, the physics contact callbacks and the dudes pathfinding.
  • demo | source - A helicopter gameplay where you help "The Chief" fly dudes up to the party.
  • demo | source - A rave party where you can change the song by showing both thumbs down to "The Chief".
  • demo | source - A worldgen happy accident
  • demo | source - A stress test
  • demo | source - Some state-of-the-art poop tech

Hello World / Boilerplate

https://github.com/danielesteban/dudes-boilerplate

# clone the boilerplate
git clone https://github.com/danielesteban/dudes-boilerplate.git
cd dudes-boilerplate
# install dev dependencies
npm install
# start the dev environment:
npm start
# open http://localhost:8080/ in your browser

Multiplayer server

Remix this project on glitch and host it for free:

https://glitch.com/edit/#!/dudes-server

To host it on your own server:

# install the server
npm install -g dudes-server
# start the server:
dudes-server

See the config options in the server README.

Gameplay constructor options

{
  world: {
    // For singleplayer
    chunkSize: 16,   // Size of the rendering chunks (default: 16)
    scale: 0.5,      // Scale of the rendering chunks (default: 0.5)
    width: 256,      // Volume width (should be a multiple of the chunkSize)
    height: 64,      // Volume height (should be a multiple of the chunkSize)
    depth: 256,      // Volume depth (should be a multiple of the chunkSize)
    seaLevel: 6,     // Sea level used in the generation and pathfinding
    seed: 987654321, // Uint32 seed for the rng. Will use a random one if undefined
    // Built-in generators
    generator: 'default', // 'blank', 'default', 'menu', 'debugCity', 'partyBuildings', 'pit'
    // Custom generator
    generator: (x, y, z) => (y < 6 ? { type: 'stone', r: 0xFF, g: 0, b: 0 } : false),

    // For multiplayer
    server: 'ws://localhost:8081/', // Server url

    // This will be called on every voxels contact if the physics are enabled
    onContact: (contact) => {},
  },
  dudes: {
    searchRadius: 64, // The search radius for the pathfinding (default: 64)
    spawn: {
      count: 32, // Number of dudes to initially spawn (default: 0)
      radius: 64, // The search radius for the spawn algorithm (default: 64)
      // Optional origin for the spawn algorithm.
      // It defaults to the center of the world if undefined
      origin: { x: 0, y: 0, z: 0 },
    },
    // This will be called on every dudes contact if the physics are enabled
    onContact: (contact) => {},
  },
  ambient = {
    range: { from: 0, to: 128 }, // Ambient sounds altitude range (in worldspace)
    sounds: [
      {
        url: '/sounds/sea.ogg', // Public url of the sound
        from: 0,                // Normalized altitude range
        to: 0.75,
      },
      {
        url: '/sounds/forest.ogg',
        from: 0.25,
        to: 1,
      },
    ],
  },
  explosionSound: '/sounds/blast.ogg', // Public url of the explosion sound
  projectileSound: '/sounds/shot.ogg', // Public url of the projectile shooting sound
  rainSound: '/sounds/rain.ogg',       // Public url of the rain sound
  audioStream: false, // Request player audio stream (for voice chat) (default: false)
  explosions: false,  // Enable explosions (default: false)
  physics: true,      // Enable physics (default: true)
  projectiles: false, // Enable projectiles (default: false)
  lightToggle: false, // Enable light toggle UI (default: false)
  rainToggle: false,  // Enable rain toggle UI (default: false)
}

Gameplay overridable functions

onLoad(options) {
  super.onLoad(options);
  // Do the things you want to do at construction
  // but require the world to be loaded/generated here
}

onUnload() {
  super.onUnload();
  // Dispose additional geometries/materials you created here
}

onAnimationTick({ animation, camera, isXR }) {
  const { hasLoaded } = this;
  super.onAnimationTick({ animation, camera, isXR });
  if (!hasLoaded) {
    return;
  }
  // Do input handling and custom animations here
  // This runs right after the physics and before the rendering
}

onLocomotionTick({ animation, camera, isXR }) {
  const { hasLoaded } = this;
  if (!hasLoaded) {
    return;
  }
  // You can use this to implement a custom locomotion
  // This runs right before the physics
}

Gameplay helper functions

spawnProjectile(
  position = { x: 0, y: 0, z: 0 },
  impulse = { x: 0, y: 10, z: 0 },
);

spawnExplosion(
  position = { x: 0, y: 0, z: 0 },
  color = new Color(),
  scale = 0.5
);

updateVoxel(
  brush = {
    color: new Color(),
    noise: 0.1,    // color noise
    type: 'stone', // 'air', 'dirt', 'light', 'stone'
    shape: 'box',  // 'box', 'sphere'
    size: 1,       // brush radius
  },
  voxel = { x: 0, y: 0, z: 0 }
);

Input state

onAnimationTick({ animation, camera, isXR }) {
  const { hasLoaded, player } = this;
  super.onAnimationTick({ animation, camera, isXR });
  if (!hasLoaded) {
    return;
  }

  // VR controllers input
  if (isXR) {
    player.controllers.forEach(({
      hand, // The hand mesh. Also used to detect controller presence
      buttons, // Buttons state
      joystick, // Joystick axes
      raycaster, // A threejs raycaster with the hand position and direction
    }) => {
      if (hand) {
        console.log(hand.handedness); // 'left' or 'right'
        console.log(
          buttons.trigger, // always true while the trigger is pressed
          buttons.triggerDown, // only true the first frame after the trigger was pressed
          buttons.triggerUp, // only true the first frame after the trigger was released
          buttons.grip, // always true while the grip is pressed
          buttons.gripDown, // only true the first frame after the grip was pressed
          buttons.gripUp, // only true the first frame after the grip was released
          buttons.primary,       // A/X button
          buttons.primaryDown,
          buttons.primaryUp,
          buttons.secondary,     // B/Y button
          buttons.secondaryDown,
          buttons.secondaryUp,
          buttons.forwards,       // Joystick forwards
          buttons.forwardsDown,
          buttons.forwardsUp,
          buttons.backwards,      // Joystick backwards
          buttons.backwardsDown,
          buttons.backwardsUp,
          buttons.leftwards,      // Joystick leftwards
          buttons.leftwardsDown,
          buttons.leftwardsUp,
          buttons.rightwards,     // Joystick rightwards
          buttons.rightwardsDown,
          buttons.rightwardsUp
        );
      }
    });
  }

  // Desktop input
  if (!isXR) {
    const {
      buttons, // Buttons state
      keyboard, // Keyboard axes
      raycaster, // A threejs raycaster with the camera position and direction
    } = player.desktop;
    console.log(
      buttons.primary,      // Left mouse button
      buttons.primaryDown,
      buttons.primaryUp,
      buttons.secondary,    // Right mouse button
      buttons.secondaryDown,
      buttons.secondaryUp,
      buttons.tertiary,     // Middle mouse button (or F)
      buttons.tertiaryDown,
      buttons.tertiaryUp,
      buttons.view,         // V
      buttons.viewDown,
      buttons.viewUp
    );
  }
}

Physics

// A box
mesh.physics = {
  shape: 'box',
  width: 1,
  height: 1,
  depth: 1,
};

// A capsule
mesh.physics = {
  shape: 'capsule',
  radius: 0.5,
  height: 1,
};

// A sphere
mesh.physics = {
  shape: 'sphere',
  radius: 0.5,
};

// A plane
mesh.physics = {
  shape: 'plane',
  constant: 0,
  normal: { x: 0, y: 1, z: 0 },
};

physics.addMesh(
  mesh, // A threejs Mesh (or InstancedMesh) with a physics definition
  {
    // Optional flags
    isKinematic: true,
    isTrigger: true, // This will call mesh.onContact on every contact
  }
);

physics.addConstraint(
  mesh, // Mesh that was already added to the physics with physics.addMesh
  instance = 0, // For instanced meshes
  options = {
    type: 'p2p',
    mesh: anotherMesh, // Another mesh already added to the physics
    pivotInA: { x: 0, y: 0, z: 0 },
    pivotInB: { x: 0, y: 0, z: 0 },
  },
);

physics.addConstraint(
  mesh, // Mesh that was already added to the physics with physics.addMesh
  instance = 0, // For instanced meshes
  options = {
    type: 'hinge',
    mesh: anotherMesh, // Another mesh already added to the physics
    pivotInA: { x: 0, y: 0, z: 0 },
    pivotInB: { x: 0, y: 0, z: 0 },
    axisInA: { x: 0, y: 1, z: 0 },
    axisInB: { x: 0, y: 1, z: 0 },
    friction: true, // simulate friction using an angular motor
    limits: { // optional limits
      low: 0,
      high: Math.PI * 2,
    },
  },
);

physics.applyImpulse(
  mesh, // Mesh that was already added to the physics with physics.addMesh
  instance = 0, // For instanced meshes
  impulse = { x: 0, y: 10, z: 0 },
);

physics.setTransform(
  mesh, // Mesh that was already added to the physics with physics.addMesh
  instance = 0, // For instanced meshes
  position = { x: 0, y: 0, z: 0 },
  rotation = { x: 0, y: 0, z: 0, w: 1 },
);

physics.raycast(
  origin = { x: 0, y: 0, z: 0 }, // ray origin
  direction = { x: 0, y: 0, z: -1 }, // ray direction
  mask = 1, // collision mask (-1: ALL | 1: STATIC | 2: DYNAMIC | 4: KINEMATIC)
  far = 64
);

Voxelizer

import { Voxelizer } from 'dudes';

const voxelizer = new Voxelizer({
  maxWidth: 256,
  maxHeight: 32,
  maxDepth: 256,
});
voxelizer.voxelize({
  scale: 0.5,
  offset: {
    x: voxelizer.world.width * -0.5,
    y: -1,
    z: voxelizer.world.depth * -0.5,
  },
  generator: (x, y, z) => {
    const r = Math.sqrt((x - 128.5) ** 2 + ((y - 16.5) * 2) ** 2 + (z - 128.5) ** 2);
    if (
      r > 32 && r < 64 && y < 16
    ) {
      return {
        type: 'stone',
        r: 0xBB - Math.random() * 0x33,
        g: 0x66 - Math.random() * 0x33,
        b: 0x44 - Math.random() * 0x22,
      };
    }
    return false;
  },
})
  .then((mesh) => {
    this.add(mesh);
  });

Engine dev dependencies

To build the C code, you'll need to install LLVM:

On the first build, it will complain about a missing file that you can get here: libclang_rt.builtins-wasm32-wasi-12.0.tar.gz. Just put it on the same path that the error specifies and you should be good to go.

To build wasi-libc, you'll need to install GNU make.

Engine dev environment

# clone this repo and it's submodules
git clone --recursive https://github.com/danielesteban/dudes.git
cd dudes
# build wasi-libc
cd vendor/wasi-libc && make -j8 && cd ../..
# install dev dependencies
npm install
# start the dev environment:
npm start
# open http://localhost:8080/ in your browser