Share your repls and programming experiences

← Back to all posts
Renderspice - A 2D game engine for the HTML canvas
h
SpicedSpices (295)

To make a game in the browser, there are many choices, but usually the main option is to use the HTML canvas. The HTML canvas is a section of the webpage that can be manipulated using Javascript. The basic setup is this:

  • Create a canvas element in HTML
  • Retrieve the canvas DOM element in Javascript
  • Setup P5 or use the vanilla canvas context
  • Create your game

Almost all of these steps are necessary for a game in the browser, except the third. Although P5 is a great option for creating graphs, shapes, and diagrams using the HTML canvas, it is for a broad use and lacks specifics needed for game development. Also, almost every line of code in P5 can be replaced a line of the canvas context.

This is where Renderspice comes in.

What is Renderspice?

Renderspice is a game development tool for the HTML canvas imported with a simple line in the HTML code. It differs from tools such as P5 because of its niche towards game development. Something it could be related to is Unity, in the way that objects have many properties such as gravity, velocity, and position to name a few. It also makes user input easy to control without having to resort to tens of lines of event listeners.

How Do I Use It?

To import Renderspice, you just need one line above your script tag in the HTML.

<script src="https://renderspice.repl.co/2d/v001.js"></script>

This Repl talk post is attached to an example of Renderspice, only using 20 lines of code.

The documentation and some examples such as creating Geometry Dash in less than 60 lines is at https://renderspice.repl.co

Basic Setup

To setup a simple game such as the one below, we will need to import Renderspice create a canvas, and then we can go into our code and set the camera settings.

rs.setCanvas("#gc"); // The canvas id
rs.camera.w = 50;
rs.camera.h = 25;
rs.camera.background = "lightblue"

This will retrieve the canvas from the HTML code and tell Renderspice that that is the id of the canvas to change. It will then set the width, height, and background of the camera.

Now lets setup the player and the ground.

let player = rs.newObject.rect(0, 0, 2, 2, 0, "#FF523B");
let ground = rs.newObject.rect(0, -20, 50, 20, 0, "#00FF00");

player.gravity = -30;
player.ground = -10 + cube.h/2;

This code will create a new rectangle for the player and for the ground. It will then add gravity to the player and set the player's ground to the top of the ground rectangle.

Now we can add some movement and user input:

function move(){
  if(rs.key['a']) player.x -= 15 * rs.deltaTime;
  if(rs.key['d']) player.x += 15 * rs.deltaTime;
  if(rs.key[32] && player.y == player.ground) player.velocity.y += 20;
}

This code, if called repeatedly, will move the player 15 blocks a second left or right, and if the player is touching the ground, will make it jump into the air.

Now we can create a render loop and also call the movement function.

setInterval(() => {
  move()
  rs.render()
}, 1000/60);

This code will render the screen and call the movement function 60 times per second, or 60 fps.


This is my first release of Renderspice, so it most likely isn't final, but I have been working on it on and off since June when Bramley's game jam was released.

Helpful Links:

If you found this interesting or helpful, an upvote would be appreciated, if not, please let me know how I could improve this in the comments or on discord. Thanks :)

Comments
hotnewtop
duck132912 (211)

it says not found : (

fuzzyastrocat (1513)

Cool! Seems kinda like a 2D version of THREE.js (TWO.js lol), which is pretty neat.

One thing though... please don't recommend using a setInterval for a game loop! requestAnimationFrame is much better since it won't run when the window/tab isn't active and in general it uses less resources.

WilliamRoss6 (9)

Whoa this is really cool. I actually tried to make something like this recently. It went okay, but yours is definitely better. Nice job!