(shouting)

Playground - scriptable game/animation bbcode

here's a good place for FRIENDLY, ENJOYABLE, and otherwise very GENERAL discussion!
Post Reply
User avatar
rena
type 2 invested entity
Posts: 669
Joined: 7 years ago
First name: cat
Pronouns: spider
https://rena.talkhaus.com/

Playground - scriptable game/animation bbcode

Post by rena »

I posted this in the twitter thread a few times but I dunno where to go with it next so I thought I'd post it here with some instructions.


(arrow keys to move)

To embed it in your post, use the playground bbcode. You can press the quote button above a post to see the source code for any scripts.

You can experiment with this on this little editor page I made, but it doesn't save so be careful and back up your scripts in notepad regularly. I recommend opening your browser's javascript console so you can see any messages or errors, on chrome this is ctrl-shift-i and then go on the console tab, on firefox you can press ctrl-shift-k.

Basics

Playground scripts are written in javascript, and expect a draw() function to be present. This function is automatically called every g_timeStep seconds. For example:

Code: Select all

var time = 0;

function draw() {
  time += g_timeStep;

  var str = "Current time: " + time.toFixed(2);
  console.log(str);

  setDrawColor("#fff");
  clear();
  setDrawColor("#000");
  drawText(str, 20, 120, 200);
}



Drawing commands

setDrawColor(col)

Sets the color for all following draw commands. Takes html colour codes.

Code: Select all

function draw() {
  setDrawColor("green");
  drawCircle(200, 200, 100);
  setDrawColor("#F0F");
  fillCircle(200, 200, 50);
}


clear()

Clear the canvas. Call this before you draw anything if you're doing an animation, or you'll just draw over the old contents.

Code: Select all

function draw() {
  setDrawColor("cornflowerblue");
  clear();
}


drawCircle/fillCircle(x, y, radius)

Draws or fills a circle of the specified radius centred at (x, y).

Code: Select all

function draw() {
  drawCircle(200, 200, 100);
  fillCircle(200, 200, 100);
}


drawRect/fillRect(x, y, width, height)

Draws or fills a rect of the specified width and height with its top left corner at x and y.

Code: Select all

function draw() {
  setDrawColor("green");
  drawRect(25, 25, 50, 70);
  setDrawColor("orange");
  fillRect(95, 25, 50, 50);
}


drawText(text, ptSize, x, y)

Draw text of point size ptSize at position x,y.

Code: Select all

function draw() {
  setDrawColor("indigo");
  drawText("hello world", 30, 120, 180);
}


loadImage(name, url)

Load an image from a url, giving it a name. This name will later be used for drawing. If using this on the talkhaus, make sure to leave the http: off the url. This is for two reasons: one, it will work on either http or https this way; two, otherwise the media plugin will try and embed the image instead and it will cause a syntax error in your script.

Code: Select all

loadImage("patchouli", "http://i.imgur.com/6h0cqoW.png");


drawImage(name, x, y, [rotation, anchor])

Draw a loaded image at a position. Rotation and anchor are optional. Rotation specifies the rotation of the image in degrees, and anchor specifies the center point of the image.

Anchor is in the form {x: value, y: value}, where the value of x and y are from 0 to 1 and specify where on the image the center is. For example, the default value for anchor is {x: 0.5, y: 0.5} which means the image will be centered on x,y.

Code: Select all

loadImage("patchouli", "//i.imgur.com/6h0cqoW.png");

function draw() {
  drawImage("patchouli", 200, 200);
}





Input

Input is currently limited to keyboard input. You can handle keyboard input by specifying a keydown, keyup, or keypress event. For example, the following listens for keydown events and shows what key has been pressed.

Code: Select all

var lastKeyPressed = "<press a key>";

keydown = function(code) {
  lastKeyPressed = code;
}

function draw() {
  setDrawColor("#fff");
  clear();
  setDrawColor("#000");
  drawText("Last key pressed: " + lastKeyPressed, 20, 5, 25);
}





Feature requests / updates

I'm open to accepting feature requests and updating if anybody uses it. Obvious omissions are sound and other forms of input.
User avatar
rena
type 2 invested entity
Posts: 669
Joined: 7 years ago
First name: cat
Pronouns: spider
https://rena.talkhaus.com/

Re: Playground - scriptable game/animation bbcode

Post by rena »

bump
User avatar
Ashan
The world has become a place
Posts: 2803
Joined: 14 years ago
Location: Canada
https://ashan.talkhaus.com/

Re: Playground - scriptable game/animation bbcode

Post by Ashan »

I """made""" this a while back


I'd probably make something original and cool but I don't like Javascript
Image
Image
Image
Image
Image
Image
Post Reply