puchitto

KO | EN

gitlite — search

#javascript #python #react #ai #go #android #machine-learning #windows #cli #vue #security #openai #mcp #ios

(★ 11)

A framework for building interactive multiplayer 3D websites.

puchitto 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

puchitto (プチッと) 
	adj. (japanese loan from french) - petit

<hr>

A tiny framework for building interactive multiplayer 3D websites. This is the client equivalent to [Puchitto.Server](https://github.com/purifetchi/Puchitto.Server).

## Why?

While I was building my personal website (prefetcher.net), I started working on a thin framework on top of THREE.js that could support building multiplayer worlds, with easy level bundling and extending. It grew a bit in scope, so I've decided to split it into its own thing.

It's very much tailor-built to fit my own needs, but I thought some people might benefit from it too, so here's that.

## Features

- Full client/server architecture over WebSockets, with the server-side written in C#.
- Ability to define own objects and packets by extending the base Game class.
- Loading and reconstructing levels from ALF (Agiriko Lump Format) bundle files.
- Tiny LISP-based scripting language (called MiniAntics) for scripting interactions within the level.
- An event stream for most framework-related happenings, like loading or object creation.
- Tweening.

## How to start?

You can create your own project by extending the abstract `Game` class. Custom entities can then be defined within the `registerCustomEntities` method, whilst custom packets can be registered by extending the `registerCustomPacketHandlers` method.

An example game can be seen below:

```ts
import { Game } from 'puchitto'

export default class PrefetcherGame extends Game {
 protected registerCustomEntities(factory: EntityFactory): void {
 factory.registerEntity<AtaObject>("ata", AtaObject)
 }

protected registerCustomEventStreamHandlers(): void {
        this.eventStream.on("loading", (percent) => {
            console.log(`${percent * 100}%...`)
        })
    }

protected registerCustomPacketHandlers(): void {
        this._networkManager.addPacketHandler(PrefetcherPacketTypes.MOVE_ATA, async (nr, game) => {
            const packet = readMoveAtaPacket(nr)
            
            const entity = game.getObjectById(packet.id) as AtaObject
            if (entity === undefined) {
                return
            }

entity.doMove(packet.to)
        }) 
    }
}
```

To then create an instance of the game, you instantiate a new object of your game class, and call run on it. You must also pass the address of the server, and the element where the THREE.js renderer will bind.

```ts
import PrefetcherGame from "./prefetcherGame";
 
const game = new PrefetcherGame()
game.run({
    element: document.getElementById("game")!,
    server: "http://localhost:8080/"
})
```

The game will then autoconnect to the server and fetch the currently present level to load into it.

## Configuration

This project utilizes ECMAScript Stage 3 decorators. Because modern environments are still rolling out native support, you must configure your build toolchain to target `es2022` (or newer) to process the syntax correctly.

### Astro
Update your `astro.config.mjs` to pass the `es2022` target down to Vite and esbuild:
```javascript
// @ts-check
import { defineConfig } from 'astro/config';

export default defineConfig({
  vite: {
    esbuild: {
      target: 'es2022'
    },
    build: {
      target: 'es2022'
    }
  }
});
```

### Vite
If you are using standard Vite, configure the targets directly in your `vite.config.js` or `vite.config.ts`:
```javascript
import { defineConfig } from 'vite';

export default defineConfig({
  esbuild: {
    target: 'es2022'
  },
  build: {
    target: 'es2022'
  }
});
```

### TypeScript
If you are relying on `tsc` for compilation or type-checking, update your `tsconfig.json`. You must set the target to `ES2022` (or newer) and ensure that legacy experimental decorators are disabled:
```json
{
  "compilerOptions": {
    "target": "ES2022",
    "experimentalDecorators": false 
  }
}
```
> **Note:** `experimentalDecorators` defaults to `false` in modern TypeScript versions, but if it is enabled elsewhere in your config, it will override the modern Stage 3 standard and cause errors.

## Contributing

If you'd really want to contribute to this project (thank you!) please adhere to the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) commit format as much as you can.

puchitto

puchitto 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

puchitto

puchitto 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README