Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/digitsensitive/juno
Juno is a simple and lightweight 2D game framework written in TypeScript for making tiny pixel style HTML5 Games
https://github.com/digitsensitive/juno
Last synced: 2 months ago
JSON representation
Juno is a simple and lightweight 2D game framework written in TypeScript for making tiny pixel style HTML5 Games
- Host: GitHub
- URL: https://github.com/digitsensitive/juno
- Owner: digitsensitive
- License: mit
- Created: 2018-09-01T15:37:52.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-08-09T11:46:37.000Z (almost 4 years ago)
- Last Synced: 2024-03-03T06:05:04.159Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 471 KB
- Stars: 20
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Lists
- awesome-gamedev - Juno - Clean and lightweight 2D game framework written in TypeScript (Table of Contents / Engines and Frameworks)
- magictools - Juno - Clean and lightweight 2D game framework written in TypeScript (Code / Engines and Frameworks)
- anything_about_game - Juno TypeScript - Clean and lightweight 2D game framework written in TypeScript (GameEngine Design)
README
[](https://david-dm.org/digitsensitive/juno)
[](https://github.com/digitsensitive/juno/issues)
[](https://github.com/digitsensitive/juno/stargazers)
[](https://github.com/digitsensitive/juno)
Juno is a simple and lightweight 2D game framework written in TypeScript for
making tiny pixel style HTML5 Games. The structure of Juno is similar to that of
[fantasy consoles](https://github.com/paladin-t/fantasy) with a simple API.
Creating prototypes has never been easier.
The framework is still in an early stage of development.
What are you waiting for? Start with Juno and create games in a nutshell!
## Getting started
### Installation
```sh
npm install juno-console --save
yarn add juno-console
bower install juno-console --save
```
## Usage
For a boilerplate and examples have a look at the
[Juno examples](https://github.com/digitsensitive/juno-examples).
## API
For more details see comments in the code.
`ipal`
Init your own color palette.
`cls`
Clear the screen.
`pix`
Draw a pixel.
`pget`
Get pixel color index from 2D position.
`load`
Load your spritesheet.
`spr`
Add a sprite.
`map`
Load a Tilemap.
`mget`
Get map tile index.
`mset`
Set map tile index.
`circ`
Draw a filled circle.
`circb`
Draw a circle outline.
`line`
Draw a line.
`rect`
Draw a filled rect.
`rectb`
Draw a rectangle outline.
`print`
Draw some text.
`trace`
Trace a variable for it's value.
`key`
Check if a key is currently pressed.
`keyp`
Check if a key was pressed in the frame before (only once).
`mouse`
Get the mouse coordinates.
`ggw`
Get the game width.
`ggh`
Get the game height.
`ticks`
Get the ticks since start of the game.
`rnd`
Get a random number between min and max value.
`crc`
Simple circle-rectangle-collision.
`rrc`
Simple rectangle-rectangle collision.
`anim`
Animate your sprite.
## FAQ
**How is the basic setup?**
Have a look at the [Juno examples](https://github.com/digitsensitive/juno-examples).
You will find a boilerplate.
Basically, only three functions are required. The `init()` function can be used
to initiate the color palette, load the sprites or the json map file and define variables.
With the `update()` function parameters are adjusted and the `render()`
function draws your masterpieces.
**How do I load my sprites?**
Make a call of the `load()` function in your `init()`. The path is relative
to your root folder. You can then draw your sprites in the `render()` function.
```typescript
init(): void {
this.api.load("sprites", "./src/assets/sprites.png", 8);
}
render(): void {
this.api.spr(0, 10, 10);
}
```
> Be aware: Currently you can only load one sheet (spritesheet and Tileset together)
**How do I load my JSON map?**
Similar as loading your sprites. Be sure to load your tiles before.
```typescript
init(): void {
this.api.load("tiles", "./assets/tiles.png", 8);
this.api.load("map", "./assets/map.json", 8);
}
render(): void {
this.api.spr(0, 10, 10);
}
```
> Be aware: Currently you can only load one sheet (spritesheet and Tileset together)
**How do I load my own color palette?**
One palette comprises a total of 16 colours. By default, a predefined palette
is loaded. Your own palette can be loaded using a chain of hex strings (6 x 16 = 96 characters).
```typescript
init(): void {
this.api.ipal(1a1c2c572956b14156ee7b58ffd079a0f07238b86e276e7b29366f405bd04fa4f786ecf8f4f4f493b6c1557185324056);
}
```
**OK, so I have chosen a color palette, but how do I get the colors into my graphics editor?**
The easiest way is to load the already defined
[.css swatch](https://github.com/digitsensitive/juno-examples/tree/master/assets/swatches)
directly into your graphics editor. Et voilà!
## Changelog
[Learn about the latest improvements](https://github.com/digitsensitive/juno/blob/master/CHANGELOG.md)
## Contributing
Want to correct a bug, contribute some code, or improve the codes? Excellent! Let me know!
## License
This project is licensed under the MIT License - see the
[LICENSE.md](https://github.com/digitsensitive/juno/blob/master/LICENSE.md) file for details.