Features

• Designed for rapid prototyping
• Built in collisions, autotiling & more
• Scene editor

Getting started

The quickest way to start is by cloning the demo project:

git clone https://github.com/cosmicmountains/jscade-demo.git
cd jscade-demo
npm install
npm start

Note: Node and npm are required.

Demo game

• LEFT and RIGHT to move
• CTRL / Z to fire
• SPACE / X to jump
• W and S to zoom in and out
• F11 to go into fullscreen

Play

Guide

Initialising jscade

To be added.

Game settings

To be added.

Game objects

To be added.

Components

To be added.

Sound

To be added.

Sprites

To be added.

Fonts

To be added.

Tile layers

To be added.

Scenes

To be added.

API

Audio

• playSound(sound, loop = true) Play a sound.
• stopSound(sound) Stop a sound.
• stopAllSounds() Stops all sounds.
• pauseSound(sound) Pauses a sound.
• unpauseSound Resumes playback of a sound.
• getSoundPlaying(sound) Check if a sound is playing.
• getVolume(sound) Gets the volume of a sound.
• setVolume Sets the volume of a sound.

Drawing

• setDepth(depth) Set the current drawing depth.
• drawSprite(sprite, frame, x, y, scaleX = 1, scaleY = 1, angle = 0) Draws a sprite.
• drawAnimation(animation, x, y, scaleX = 1, scaleY = 1, angle = 0, animate = true) Draws an animation. "animate" indicates whether the animation should progress when this function is called.
• drawSpriteColor(sprite, frame, x, y, color, scaleX = 1, scaleY = 1, angle = 0) Draws a sprite with a color tint. Color is an array like [red, green, blue, alpha] where each value is between 0 and 1.
• drawAnimationColor(animation, x, y, color, scaleX = 1, scaleY = 1, angle = 0, animate = true) Draws an animation with a color tint. Color is an array like [red, green, blue, alpha] where each value is between 0 and 1.
• drawRectangle(x, y, width, height, color, angle = 1) Draws a rectangle. Color is an array like [red, green, blue, alpha] where each value is between 0 and 1.
• drawText(text, font, color, x, y, scaleX = 1, scaleY = 1, charsPerLine = -1) Draws text. Color is an array like [red, green, blue, alpha] where each value is between 0 and 1.
• drawBG(sprite, frame, x, y, repeatX = 1, repeatY = 1, scaleX = 1, scaleY = 1) Draws a background.
• drawParallaxBG(sprite, frame, offsetX = 0, offsetY = 0, repeatX = 1, repeatY = 1, parallaxX = 0, parallaxY = 0, scaleX = 1, scaleY = 1) Draws a parallax background.
• drawSpriteHUD(sprite, frame, x, y, scaleX = 1, scaleY = 1, angle = 0) Draws sprite relative to camera.
• drawTextHUD(text, font, color, x, y, scaleX = 1, scaleY = 1, charsPerLine = -1) Draws text relative to camera. Color is an array like [red, green, blue, alpha] where each value is between 0 and 1.
• inView(x, y, overlap = 0) Checks if the given coordinates are in the cameras view. Overlap is how far past the cameras edges the point can be.
• getCanvasWidth() Gets the canvas width.
• getCanvasHeight() Gets the canvas height.

Fonts

• getFontTestString() Gets a string of all the characters in a font.

Game settings

• getGameGridSize() Gets the game grid size.
• setBackgroundColor(color) Sets the background color. Color is an array like [red, green, blue, alpha] where each value is between 0 and 1.

Input

• k k is a way of getting different keyboard keys. For example, k.left is the left arrow, and k.a is the "a" key.
• keyDown(key) Checks if a key is down. "key" will be a value like k.left or k.a.
• keyPressed(key) Checks if a key is pressed. "key" will be a value like k.left or k.a.
• keyReleased(key) Checks if a key is released. "key" will be a value like k.left or k.a.

Runtime

• restartGame() Restarts the game.
• goToScene(sceneName) Goes to a new scene.
• createInstance(gameObject, x, y, customData = {}, removedComponents = []) Creates an instance.
• deleteInstance(instance) Deletes an instance.
• select(gameObject, callback) Allows you to loop through other instances. The first argument of the callback will be the looped instance.
• selectByComponent(componentName, callback) Allows you to loop through other instances based on a component. The first argument of the callback will be the looped instance.
• addComponent(instance, componentName) Adds a component.
• removeComponent(instance, componentName) Removes a component.
• hasComponent(instance, componentName) Checks if an instance has a component.

Physics

• createMask({left = -4, top = -4, right = 4, bottom = 4}) Creates a mask. This would generally be assigned like so instance.mask = createMask({left = -4, top = -4, right = 4, bottom = 4}). If you need multiple masks, you can assign the mask to other properties on the instance. Just make sure you reference the right mask in overlap and collision functions.
• addCollision(x, y, colType) Adds a collision to the collision grid. The given x and y positions will be snapped to the correct grid cell. "colType" can be set to true for normal collisions and 2 for top-only collisions.
• removeCollision(x, y) Removes a collision from the collision grid. The given x and y positions will be snapped to the correct grid cell.
• approach(start, end, shift) Approach a given value with a specified shift value. Useful for friction, for example:
  instance.speedX = approach(instance.speedX, 0, 0.1) // Reduce speedX to 0 at a rate of 0.1 per frame
  Function created by Matt Thorson.
• overlap(instance1, instance2, mask1 = instance1.mask, mask2 = instance2.mask) Returns true if instance1's mask is overlapping instance2's mask. Supplying the masks are optional. If you leave them out, it will assume the mask is stored at instance1.mask and instance2.mask.
• overlapTile(instance, tileLayer, sheetCellX, sheetCellY, mask = instance.mask) Returns true if instance1's mask is overlapping the tile at sheetCellX and sheetCellY on the given tileLayer. Supplying the mask is optional. If you leave it out, it will assume the mask is stored at instance1.mask.
• collisionPoint(x, y) Returns true if the position matches a collision on the collision grid.
• collisionMaskX(instance, moveX = instance.speedX, mask = instance.mask) Simulates moving the instance on the x-axis and checks for a collision on the collision grid. Note: this function should also take a moveY. This will be added soon.
• collisionMaskY(instance, moveX = 0, moveY = instance.speedY, mask = instance.mask, allowTopOnlyCollisions = true) Simulates moving the instance on the y-axis checks for a collision on the collision grid.

Scenes

• getActiveScene() Gets the name of the active scene.
• getSceneWidth() Gets the width of the scene.
• getSceneHeight() Gets the height of the scene.

Tiles

• placeTile(tileLayerName, sheetCellX, sheetCellY, cellX, cellY) Places a tile at cellX and cellY.

Animations

• createAnimation(sprite, fps, frame = 0) Creates an animation.
• getAnimationFrameAndAnimate(animation) Gets the animation frame and continues animation.
• getAnimationSprite(animation) Gets the animation sprite.
• getAnimationSpeed(animation) Sets the animation speed.
• getAnimationFrame(animation) Gets animation speed in frames per second.
• setAnimationSprite(animation, sprite, resetFrame = true) Updates the sprite for the animation. "resetFrame" means the frame will go back to 0 when swapping the sprite.
• setAnimationSpeed(animation, fps) Sets animation speed in frames per second.
• setAnimationFrame(animation, frame) Sets the animation frame.

General

• rgba(r, g, b, a) Converts the given values (each between 0 and 255) into a 4 index array (each between 0 and 1). For example, rgba(255, 255, 0, 255) would return [1, 1, 0, 1]. This is useful in the drawing functions for setting the color.

Maths

• getDistance(x1, y1, x2, y2) Get the distance between two points.
• getDirection(x1, y1, x2, y2) Get the direction between two points.
• getMotionX(distance, direction) Get the motion on the x-axis for a given distance and direction.
• getMotionY(distance, direction) Get the motion on the y-axis for a given distance and direction.