Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Vorge | WebSocket + WebGL JavaScript Game Engine


Chief
 Share

Recommended Posts

```markdown

__ _ ____ ____ ____ ____
|| // // \\ // \\ // \\ // \\
|| // // // // // // //___//
||// // // // // // //
|// \\__// // \\__// \\__//
//
\\__//

```
**Extensible/Modular, Event-Driven, Multiplayer, Entity/Component/System-Powered JavaScript Game Engine**
https://github.com/cyclonic-games/vorge

---

#### **What is it exactly?**
The tagline says it all, if not too much. Vorge is built to be focused around ECS and event-driven programming. With WebSockets for networking, and WebGL for rendering, Vorge is fast and powerful enough for most projects (especially for 4:3 2D online RPGs).

---

#### **What are the features?**
Before I list them out, it's important to understand how Vorge works. The basic idea is to create a high-throughput application scaffolding that allows for several ways of customization. Vorge ships with some basic, common functionality in the shape of **Modules**, **Libraries**, and **Plugins**, but Vorge itself is just designed to handle data flow and communication between moving parts (including client <-> server).

##### **Modules**
Vorge modules are essentially core blocks of logic that make up the majority of the internal logic of the engine. Modules allow you to replace existing modules or create entirely new ones that add unique functionality.

##### **Libraries**
With an Entity/Component/System architecture, managing all of these objects can become difficult. Libraries in Vorge consist of prebuilt entities, components, and systems that you can reference in your modules, other libraries, or plugins.

##### **Plugins**
These are simple; want to run some code when the game is instantiated. This allows you to subscribe to events, swap modules, communicate with the server, among many other things.

---

#### **But seriously, what are the features?**
High-ish throughput networking via WebSockets
High-ish performance graphics via WebGL
100% Web compatible, meaning completely cross-platform
Event Driven; hook into the engine's event system and react to engine internals
Entity/Component/System -- look it up, it's all the rage
Flexible customization toolkit
Git-based package management
Open Source & 100% Free
TBD

---

#### **But does it have pets system?**
The basic functionality that vorge ships with is enough to get a simple online RPG up and running. I will be working on my own game while I polish up the engine, and all of the modules, libraries, and plugins that I develop for my game I will release as open source for you to use in your games. This means that yes, if someone writes you the plugin, Vorge can support a pets system, and so much more.

##### **Future Planned Features**
- Particles (render beautiful particles)
- Electron (run your game as a desktop app)
- Offline (make a single player game)
- Discord (integrate with discord and its api)
- Web-based administration panel for the server
- TBD

---

#### **Does it come with editors?**
Yes, it will! I want to bake the engine and server out, work on the git-based package management, then jump right into developing the editors/creation suite. It will also be JavaScript and probably run on Electron.

##### **Future Planned Features**
- TBD

---

#### **Screenshots**
None yet. I know.

Vorge is actually decently far along in production, but the focus has been lower level internals. There's not a whole lot to show, visually, but you should check out the github: https://github.com/cyclonic-games
Link to comment
Share on other sites

I just want to show off some code here. The following is an example of a plugin. It's called "common" and ships with the engine to help you get up and running without the included boilerplate.

```javascript
const Plugin = require('../../core/Plugin');

const Gamepad = require('./devices/Gamepad');
const Keyboard = require('./devices/Keyboard');
const Mouse = require('./devices/Mouse');

const fragment = require('./shaders/default/fragment');
const vertex = require('./shaders/default/vertex');

const authorize = require('./tasks/authorize');
const handshake = require('./tasks/handshake');
const spawn = require('./tasks/spawn');

module.exports = new Plugin('common', game => {
game.devices.install(new Gamepad('gamepad'));
game.devices.install(new Keyboard('keyboard'));
game.devices.install(new Mouse('mouse'));

game.tasks.subscribe('handshake').forEach(method => handshake.apply(game, method.arguments));
game.tasks.subscribe('authorize').forEach(method => authorize.apply(game, method.arguments));
game.tasks.subscribe('spawn').forEach(method => spawn.apply(game, method.arguments));

game.viewport.subscribe('mount').forEach(() => {
game.renderer.bind('default', [ fragment, vertex ]);
});
});
```

It should be pretty simple to follow; it registers input devices, subscribes to tasks from the server, and then binds the webgl context to a "default" program (pair of shaders).

I'll be posting other snippets of code here and there to show off the API.
Link to comment
Share on other sites

Just updating some of the readme with planned features: [Does it come with editors?](https://github.com/cyclonic-games/vorge/blob/master/readme.md#does-it-come-with-editors)

---

#### **Does it come with editors?**
Yes, it will! I want to bake the engine and server out, work on the git-based package management, then jump right into developing the editors/creation suite. It will also be JavaScript and probably run on Electron.

##### **Future Planned Features**
- Extensions (Make your own tools!)
- Tile Map Editor
- Quest Editor
- Entity Editor
- Script Editor
- UI Designer
- Deployment Manager (CI/CD)
- TBD
Link to comment
Share on other sites

Been working hard on the engine. Below you can find a code snippet that shows off the "common" plugin. This plugin does a lot of the setup and boilerplate to make your job a lot easier. It's an update from my previous code paste.

```javascript
const Plugin = require('../../core/Plugin');

const Gamepad = require('./devices/Gamepad');
const Keyboard = require('./devices/Keyboard');
const Mouse = require('./devices/Mouse');

const fragment = require('./shaders/default/fragment');
const vertex = require('./shaders/default/vertex');

const amend = require('./tasks/amend');
const authorize = require('./tasks/authorize');
const handshake = require('./tasks/handshake');
const pong = require('./tasks/pong');
const spawn = require('./tasks/spawn');

const utilities = require('./utilities');

module.exports = new Plugin('common', game => {
const std = game.libraries.use('std');

game.devices.install(new Gamepad('gamepad'));
game.devices.install(new Keyboard('keyboard'));
game.devices.install(new Mouse('mouse'));

game.tasks.subscribe('handshake').forEach(method => handshake.apply(game, method.arguments));
game.tasks.subscribe('pong').forEach(method => pong.apply(game, method.arguments));
game.tasks.subscribe('authorize').forEach(method => authorize.apply(game, method.arguments));
game.tasks.subscribe('spawn').forEach(method => spawn.apply(game, method.arguments));
game.tasks.subscribe('amend').forEach(method => amend.apply(game, method.arguments));

game.viewport.subscribe('mount').forEach(() => {
game.renderer.bind('default', [ fragment, vertex ]);
});

game.loop.subscribe('update').forEach(() => {
std.systems.move.run(game.initializer.heap.entities.get(game.world.player), game);

for (const id of game.world.entities) {
std.systems.move.run(game.initializer.heap.entities.get(id), game);
}
});

game.loop.subscribe('draw').forEach(() => {
game.renderer.clear();

utilities.fill(game.renderer.webgl);

for (const id of game.world.entities) {
std.systems.render2d.run(game.initializer.heap.entities.get(id), game);
}

std.systems.render2d.run(game.initializer.heap.entities.get(game.world.player), game);
});
});
```

Below now you can find a really stupid looking screenshot, but it helps to show off that the WebSocket networking and the WebGL renderer are both working nicely together when there are multiple players.

![](https://i.imgur.com/PmVh47S.png)

The FPS meter in chrome (top right) bugs out, but the engine gets ~60FPS (max in-browser)
Link to comment
Share on other sites

Extremely early shot of the editor application, just to show progress. The actual UI will definitely change as I go.

![](https://media.discordapp.net/attachments/282274126888960000/463458480095887362/uiuiuiui.PNG?width=841&height=660)
Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...