https://github.com/dinubs/lucid
2D Javascript platforming engine
https://github.com/dinubs/lucid
game-engine javascript platformer
Last synced: 10 months ago
JSON representation
2D Javascript platforming engine
- Host: GitHub
- URL: https://github.com/dinubs/lucid
- Owner: dinubs
- License: mit
- Created: 2017-12-22T11:28:10.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T00:50:44.000Z (about 3 years ago)
- Last Synced: 2025-03-21T11:22:27.240Z (10 months ago)
- Topics: game-engine, javascript, platformer
- Language: JavaScript
- Homepage: https://lucid.dinubs.now.sh
- Size: 593 KB
- Stars: 12
- Watchers: 2
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Lucid
Lucid is a 2D Javascript game-engine, primarily for the platforming genre. Heavily based on the game-engine Dissimulate posted on both [GitHub](https://github.com/dissimulate/Clarity) and [CodePen](https://codepen.io/dissimulate/pen/CqIxk) name Clarity. It's quite evolved from that engine, as things are much more broken apart now, and easier to extend on. The benefit of a lightweight engine like Lucid is to get a playable version as fast as possible that you can build upon.
There are a handful of [code examples](https://github.com/dinubs/lucid/tree/master/example) (I've done my best to comment as much as possible) and examples you can [play](https://lucid.dinubs.now.sh).
# Install and Use
You can install the engine with `npm install lucid-game-engine`. Then you can use the package like the below.
```javascript
import { Lucid, Map, Block } from 'lucid-game-engine';
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var game = new Lucid({
alertErrors: true,
canvas,
logInfo: true,
});
var Loop = function () {
game.setViewport(canvas.width, canvas.height);
game.update();
game.draw();
window.requestAnimFrame(Loop);
};
class MyCustomMap extends Map {
constructor() {
super({
backgroundColor: "#4e4e4e",
tileSize: 29,
playerStart: {
x: 1,
y: 2
},
movementSpeed: {
jump: 8,
horizontal: 1
}
});
// Load the blocks so the engine knows which one to render
// based on the map data.
this.blocks = [Block];
// mapData signifies to the engine what blocks to render where.
// An empty space will render an EmptyBlock.
this.mapData = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, , , , , , , , , , , , , , , , , , 0],
[0, , , , , , , , , , , , , , , , , , 0],
[0, , , , , , , , , , , , , , , , , , 0],
[0, , , , , , , , , , , , , , , , , , 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
}
}
game.loadMap(new MyCustomMap());
Loop();
```
I personally suggest using [Parcel](https://parceljs.org/) to get things up and running, it's very straight forward. Check out the [example](https://github.com/dinubs/lucid/tree/master/example) directory for how it works, and run them using `npm run example` when you clone the repo (it uses Parcel to run).
# TODO
- [ ] Rename Map to something else, realized a little late that Map is a reserved keyword in JS
- [ ] Particle engine
- [ ] Entities (Think NPCs and enemies that the player can interact with).
- [ ] Allow adding a custom player class to the game, will be easy to do, but forgot to integrate it.
- [ ] Allow setting a custom EmptyBlock per map, that way you can do any custom rendering on the block you want.
- [ ] Add more information to the readme.
If you want to tackle any of the above TODO items, please open a pull request, I'd gladly review it :D