Spider Engine
| Original author(s) | Amine Rehioui[1] |
|---|---|
| Initial release | June 11, 2019[2] |
| Stable release | 1.2.1
/ July 1, 2019 |
| Written in | TypeScript |
| Engine | |
| Type | Game Engine |
| License | GNU GPL[1] |
| Website | spiderengine |
Search Spider Engine on Amazon.
Spider Engine is an open source Game Engine for creating Multimedia applications in a Web browser. It is written in TypeScript and uses WebGL for rendering.
Overview
Spider Engine provides high-level abstractions needed for video game development. It has a dedicated editor front-end developed in React.[3]
Features
- User Interface: Two-dimensional system with alignment, relative positioning, and multi-resolution support[4]
- Entity Component System
- Prefabs: Packages of entities containing visual content and logic
- Animation: Key frame animation and Skeletal animation
- Visual Scripting
- Scenes
- Math Library
- Graphics: 3D renderer with a Material and Shader system
- Camera: Perspective and Orthographic cameras
- Input Handling
- Collision Detection
- Physics: Uses Cannon.js for simulating Physics
Usage
The following displays a rotating box on screen:
import * as spider from "@aminere/spider-engine";
// Get a reference to a canvas element that will be the main output of the engine
const canvas = document.getElementById("targetCanvas") as HTMLCanvasElement;
// Initialize the engine
spider.Engine.create({
container: canvas,
}).then(() => {
// Create a simple shader
// It is also possible to use a default shader from spider.DefaultAssets
const shader = new spider.Shader({
vertexCode: `
attribute vec3 position;
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentCode: `
precision mediump float;
void main() {
gl_FragColor = vec4(1.);
}
`
});
// Setup the Camera
// Spider Engine uses the Entity Component pattern to build functionality
// The Camera is an entity with a Camera and a Transform component
spider.Entities.create()
.setComponent(spider.Camera)
.setComponent(spider.Transform, {
position: new spider.Vector3(0, 0, 4)
});
// Create a Box
// Visual components are the primary way of rendering objects to the screen
const box = spider.Entities.create().setComponent(spider.Visual, {
material: new spider.Material({ shader }),
geometry: new spider.BoxGeometry()
});
// Update callback
spider.Update.hook.attach(() => {
box.updateComponent(spider.Transform, {
rotation: spider.Quaternion.fromEulerAngles(
spider.Time.time,
spider.Time.time,
0
)
});
});
});
Community
Examples made with Spider Engine are available on the Projects page..[5] An online IDE with auto-complete and live-preview is available on the Spider Engine Playground.[6] Support for developers is available through a Forum[7] and Github Issues[8]
References
- ↑ 1.0 1.1 "spider-engine/license". github.com/aminere. Retrieved 17 June 2019.
- ↑ "First commit". github.com/aminere. Retrieved 10 June 2019.
- ↑ "Spider Editor". spiderengine.io. Retrieved 2013-07-06.
- ↑ "2D System Documentation". spiderengine.io. Retrieved 2013-07-06.
- ↑ "Spider Engine Projects". spiderengine.io. Retrieved 2013-07-06.
- ↑ "Spider Engine Playground". spiderengine.io. Retrieved 2013-07-06.
- ↑ "Spider Engine Forum". spiderengine.io. Retrieved 2013-07-06.
- ↑ "Github Issues". github.com/aminere. Retrieved 2013-07-06.
External links
This article "Spider Engine" is from Wikipedia. The list of its authors can be seen in its historical and/or the page Edithistory:Spider Engine. Articles copied from Draft Namespace on Wikipedia could be seen on the Draft Namespace of Wikipedia and not main one.
