https://github.com/sindreslungaard/daisy
HTML5 Isometric Game Engine
https://github.com/sindreslungaard/daisy
Last synced: 4 months ago
JSON representation
HTML5 Isometric Game Engine
- Host: GitHub
- URL: https://github.com/sindreslungaard/daisy
- Owner: sindreslungaard
- License: mit
- Created: 2018-02-28T13:24:56.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-01T23:23:36.000Z (over 3 years ago)
- Last Synced: 2025-09-20T03:46:41.671Z (9 months ago)
- Language: TypeScript
- Size: 525 KB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# daisy
Daisy is an isometric game engine using WebGL. It was tailored for a private project although you could use it for similar games.
Example:
```javascript
import Daisy from 'daisy'
(async () => {
// preloads sprites
await Daisy.preload([
'tile.png',
'tile_outline.png'
])
// items are objects within a scene, cached to improve performance when having multiple instances of the same item in a scene.
// items are split into categorier, each category having its own spritesheet and data (scroll all the way down to see an example of data.json)
await Daisy.ItemCache.add('./adobe/spritesheet.png', './adobe/data.json')
// this event is fired whenever someone clicks on an item
Daisy.Events.ItemEvents.onItemClicked.subscribe((sender, eventArgs) => {
console.log(`item clicked: ${eventArgs.item}. Specific part of item clicked: ${eventArgs.itemPart}`)
})
// create a new instance of the engine
const app = new Daisy.App({
background: 0x1F2024
})
// new scene, objects and characters will be added to it
// make the scene's camera draggable, letting you move everything in the scene around while dragging
const room = new Daisy.Scene({
draggable: true
})
// move the scene to center of screen
room.camera.setPosition(window.innerWidth / 2, window.innerHeight / 2)
// add tiles to the scene
const tiles = new Daisy.TileMap('tile.png', [
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]
])
// make the tiles hoverable, the specified sprite will be displayed over the tile you hover the mouse
tiles.makeHoverable('tile_outline.png')
// add the tiles to our scene
room.addLayer(tiles)
// create a new item, the id must exist in one of the data files of the itemcache
let fridge = new Daisy.Item('adobe_fridge', 3, 0, 0)
// items can be rotated
fridge.rotate()
// add the item to the scene, making it renderable
room.addItem(fridge)
// texturebuilder is for more advanced stuff such as character clothing,
// basically a way to convert multiple loaded textures into a single texture/sprite
let twoTilesCombined = new Daisy.TextureBuilder(64, 110)
twoTilesCombined.addTexture('tile.png', 10, 20, 0, 0, 20, 20)
twoTilesCombined.addTexture('tile.png', 0, 30, 0, 0, 50, 20)
let texture = twoTilesCombined.generateTexture()
// create a new character
let character = new Daisy.Character()
// create a new character state from a still image
character.addState('idle_south_west', Daisy.CharacterCache.getBaseTexture('./avatar.png'), 64 * 15, 0, 64, 110)
// create an animated state from multiple images
character.addAnimatedState('walk_south_west', [
{ baseTexture: texture.baseTexture, fromX: 64 * 16, fromY: 0, toX: 64, toY: 110 },
{ baseTexture: texture.baseTexture, fromX: 64 * 17, fromY: 0, toX: 64, toY: 110 },
{ baseTexture: texture.baseTexture, fromX: 64 * 18, fromY: 0, toX: 64, toY: 110 },
{ baseTexture: texture.baseTexture, fromX: 64 * 19, fromY: 0, toX: 64, toY: 110 }
])
// set the character's offset
character.setOffset(0, -85)
// set the character's current state
character.setState('walk_south_west')
// add character to the scene
room.addCharacter(character)
// finally add the scene to the engine
app.addScene(room)
// slide the character from x: 0, y: 0, h: 0 to x: 1, x: 1, h: 1
character.slide(0, 0, 1, 1, 1, 1)
})()
```
data.json
```json
[
{
"uid": "adobe_fridge",
"name": "Modern Fridge",
"description": "Packed with cold beverages!",
"icon": { "x": 0, "y": 0, "w": 60, "h": 116 },
"parts": [
{
"offsetPosition": { "x": 0, "y": 0 },
"offsetPixels": { "x": 33, "y": 29 },
"states": [
{
"sprites": [
{ "x": 0, "y": 0, "w": 60, "h": 116 }
]
}
]
}
]
}
]
```