PICO-8: How do I shoot? Dynamic objects and tables

Shooting in Pico-8

PICO-8 is a small and sweet game engine aka fantasy console. This article explains how to add and remove objects like bullets to a game at playtime in PICO-8.

One question that I always get asked is: how do I add and remove multiple objects to a game dynamically. Stuff like projectiles, bullets or particles. No problem: I will show how to create objects on-the-fly in PICO-8.

BulletOne, BulletTwo, BulletThree, BulletFour

Probably the first idea is to make a new table for each object and saving it on a variable. We can just define a bunch of bullets and then set them when we press shoot.

local bulletOne = {
	x = 32, y = 32, 
	active = false, 
	draw = function(self)
		circfill(self.x, self.y, 7, 8)
	end
}

In our _draw callback we execute the draw() function of bulletOne: bulletOne:draw(). Making tables might be ok but having one variable for one object is very limiting. Is there a better way?

There must be a better way

Arrays can save you a lot of writing and duplicate code. Instead of using individual variables we can use a holding object.

bullets = {}
add(bullets, {
	x = 32, y = 32, 
	active = false, 
	draw = function(self)
		circfill(self.x, self.y, 7, 8)
	end
})

This way we can add as many objects to the bullets table as we like. And without creating a new variable every time.

Use PICO-8 iterators

How do we call the draw function for all the bullets in our _draw callback function? We use PICO-8 all() iterator function:

function _draw()
    for bullet in all(bullets) do
        bullet:draw()
    end
end

 

Additional: Global vs Local Variables

Global means that it can be accessed anywhere in your program. But there is also a table for the local scope. Local means that it is only accessible in the current part of your program. You can assign a variable to the local scope using the local keyword.

 

Seven Fav Pico-8 Games

#7FavePico8Games
PICO-8_38
Ufo Tofu
http://www.lexaloffle.com/bbs/?tid=4055

 

PICO-8_36
Uhura
http://www.lexaloffle.com/bbs/?tid=3736

 

PICO-8_34
Matchy Matchy
http://www.lexaloffle.com/bbs/?tid=4022

 

PICO-8_37
Tea
http://www.lexaloffle.com/bbs/?tid=2829

 

PICO-8_39
Triotos-8
http://www.lexaloffle.com/bbs/?tid=3996

 

PICO-8_40
Nora’s Mouse Chase
http://www.lexaloffle.com/bbs/?tid=3414

 

PICO-8_41
P.Craft http://www.lexaloffle.com/bbs/?tid=3200

 

Not included anything by Benjamin Soule. His are all A+. Also check out Sophie Houldens game!

NanoFL and HiDPI

NanoFL is a minimalistic and free alternative to Animate CC (formerly Flash Professional). It publishes to Apaches Cordova or HTML5 with for example an CreateJS generator. While fiddling around with it I ran into the usual high resolution issues that always come up with HTML5: Blurry images and text.

Thankfully, there is an easy fix:

If you use the CreateJS just add a Scene class in the Document Properties Screen Shot 2016-04-07 at 13.36.14

If you hit publish a directory structure is created:

├── bin
│   └── library.js
├── gen
│   └── base.js
├── library
│   └── scene.xml
├── publish
│   ├── cordova
│   └── html
│       ├── bin
│       │   └── library.js
│       └── test.html
├── src
│   └── Game.js
├── test.html
└── test.nfl

Inside the src folder you will find a Game.js file with some boilerplate code. As suggested by Kevin Newman it is quite easy to change the canvas of CreateJS to use the HiDPI settings. We modify the code from his blog to fit our NanoFL environment into the init function of the Game prototype:

var canvas = document.getElementById("mainCanvas");
var stage = this.parent;
if (window.devicePixelRatio) {
    // grab the width and height from canvas
    var height = canvas.getAttribute('height');
    var width = canvas.getAttribute('width');
    // reset the canvas width and height with window.devicePixelRatio applied
    canvas.setAttribute('width', Math.round(width * window.devicePixelRatio));
    canvas.setAttribute('height', Math.round( height * window.devicePixelRatio));
    // force the canvas back to the original size using css
    canvas.style.width = width+"px";
    canvas.style.height = height+"px";
    // set CreateJS to render scaled
    stage.scaleX = stage.scaleY = window.devicePixelRatio;
}

Et voila, that’s it!

Burn The Boards – Background Information

Georg wrote a pretty interesting article about the development and background of the Burn The Boards project for Madewithunity: http://madewith.unity.com/stories/burn-boards-making-unpleasant-reality-immersive-gaming-experience-1.

I was involved in the creation of the project and was part of the design team for it. The problems of electronic waste and the associated health risks of workers are a topic that interest me greatly. If you want some insight into how that serious game was made check out the article.

Pico-8 Palette CLR for OSX

Pico-8 is an awesome fantasy console by lexaloffle. I really wanted to use the palette in other pixel art editors so I made a clr file, to be used with the standard color picker under OSX.

How To Use:

  1. Download the pico8.clr

  2. Copy the file to ~/Library/Colors/

If you open your color picker (for example in the amazing pikopixel pixel art editor) you will be able to find it in the drop down menu under the ‘Color Palettes’ tab.

Screenshot 2015-11-16 17.57.05

Have fun!

Minipixel Style – A New Indie Aesthetic

Thinking about game design and art is one of my hobbies. And I admit it: I love pixel art. And the last couple of years were a renaissance of pixel art fueled by the indie boom and games like minecraft. And right as you think you have seen it all – a new style seems to emerge: the minipixels

What?

Pixel art is often seen scaled up by 2x, 3x or more. Minipixels are different. The art usually isn’t scaled at all but still the edges are hard and no anti-alias is used. Pixelart is very small and detailed but minipixels are usually bigger pictures with bigger uniform areas since there is no upscaling involved in the postprocess. It can be made with the same tools as pixelart: the pen tool in PS/GIMP and by turning of anti-aliasing for your fills.

Examples

Relic Hunters is a free game that uses this for it’s feature art and mixes it with more ‘traditional’ pixel art:

01

http://www.relichunters.com.br/

The colors are totally different but in Orcish Inn we also see minipixels. Steven Colling, the developer of orcish inn, calls this a “grispy style”.

shot_a_typical_inn

http://orcish-inn.stevencolling.com

(Disclaimer: I work on the music for that game. But that does not change that I really like the graphics that Steven made!)

Is this is a thing now?

I don’t know if this a thing or will be. But I think it might be. It is nice to look at when used correctly and a nice fresh breeze after years of blocky pixels. Do you have more examples? Do you like this style? Do you want to see more games with this?

MUDJAM

Starting monday you can submit to MUDJAM on itch! MUDJAM accepts anything related to Multi User Dungeons, be it a tool, a small MUD experiment or anything else. Even if it is not finished you should submit – see it as a learning experience.

mudjam

MUDs might not be the most popular at the moment but is still a niche interesting for some. MUDJAM is a playground where you can test things out.

My plan for MUDJAM is to write a small, small MUD that can be played from the browser and is mostly hypertext…but we will see how far this goes.

Let me know if you enter for example here in the comments or on twitter @headchant or #MUDJAM