The Unfortunately Named SniffPaint

One of the researchers we work with is interested in getting kids to design video games to explore social issues (a little like the Serious Play approach). Having worked with groups of children to develop their ideas he approached us to help help them actually turn those ideas into playable games.

This led us to develop the Sprite system we've posted about recently, which makes it easy to write simple Sprite based games in Sniff. In our initial classroom tests this worked really well, and a group of KS3 kids who had never used Sniff before were able to work through a series of exercises and get a working game in an afternoon.

We learnt a lot from that trial, and made a few changes to the Sprite system to make things easier. For example you can now tell a sprite to "move to", or turn by" rather than the more "programmer" style "moveTo" or "moveBy". Well D'uh! Of course that was obvious if you're a kid, but its hard for grown up programmers to remember what it was like to not be programmers. Programming like a kid, rather than like a middle aged guy is why we built Sniff, so we fixed it! The kids' way is better!

One of the things that was surprisingly hard for kids to do as actually make artwork for their games. You would think that this wouldn't be a problem - its 2015! We have a million tools for making images... well no actually we don't! If this was the 80's or 90's we'd have MacPaint or Windows Paint(aka Paintbrush). Now we don't. On Windows 10 "FreshPaint" is an optional "Freemium" install, and costs "from Free to £77.29". I've only spent a few minutes with the free version during which I've been offered several in-app purchases, but I've yet to see anything that actually involves drawing an image!

Of course at the other end of the scale you've got photoshop. While that may be a great tool (not convinced - looks clunky and badly designed!), its certainly expensive and complex. We wanted something that could

• make basic, low res icons
• ran on all platforms
• be learnt in 2 minutes
• load/save BMP
• doesn't cost anything

There are some web tools out there that provide some of those features, but getting images out of the web and into the games in the right format was a clunky process.

So we build SniffPaint. It's written if Sniff of course! "Dogfooding" is a great development tool. By writing it in Sniff we get a tool that runs on all Sniff systems, develop and debug the language, and get a really cool demo of how flexible Sniff is. Sniff Paint is included in Sniff R20, both as an executable (just type sniffpaint) and full source (examples/Hosted/sniffpaint.sniff) so you can add your own features if you like. We built the tools using the tools we give you!

SniffPaint isn't going to scare adobe anytime soon! It's very basic, but based on the experiences of the "in house testing team" a 7 year old can produce exactly the sort of artwork we need after only a few minutes. It's not particularly tied to the Sniff code, so you can just use it on its own to generate images for any of your projects. You can even try an online demo version online - just remember the online demo can't save anything, as its running in a sandbox and can't access your real files!

Using SniffPaint

To get started, just click on a colour in the palette and then click a pixel in the canvas. When you're done hit save (hint - up down cursor keys work great in the load/save panel).

Default resolution is 46x46 pixels. This just happens to fit well with the screen size. Hitting HiRes will double the current resolution so you can add more detail. LoRes halves the resolution. 46x46 is a good size for small game objects, 96x96 is about right for larger characters. If you want a nice 8-bit look then design at low-res, and then size up when you're done!

At this resolution drawing a single pixel at a time produces the best results, but you can draw circles or lines by clicking the button, then clicking and dragging on the canvas. Selecting a tool like this is a "one shot" option, and you're dumped back into single pixel mode immediately. If you want to draw lots, use the keyboard shortcuts - just press the letter for the tool you want to select. Dropper allows you to select a colour from the canvas, and fill (sort of) fills areas.

New Internal Bitmap Support

Sniff paint is written in Sniff! In order to make Sniff Paint possible we improved support for bitmap images. Previously you could draw bitmaps on a display using tell display to "draw image" but pushing that file access functionality into the display code was always something that needed looked at, so we fixed it. "draw image" will be available for the next few releases, but gradually we're going to remove it from display devices.

We've now got a new "bitmap" device. It currently only works with the Window device but we hope integrate it so you can use it on any display in the future.

In SniffPaint the default canvas is 46x46 and black, which we can create with:

make canvas bitmap device

when start
.set displayColor to 000
.set displayX to 46
.set displayY to 46
.tell canvas to "new"

Then we can draw it by simply setting the position, and calling draw:

.set displayX to 10
.set displayY to 10

.tell canvas to "draw"

When you draw them bitmaps are automatically "keyed" to remove the background, so you don't need to worry about Alpha (we may add a way to control this inf the future, but the default 

To edit it, we can use 

.tell canvas to "set pixel"

.tell canvas to "set pixel"

Load and save work with BMP files - not the most up to date format, but simple and easy:
.set fileData to "myDrawing.bmp"

.tell canvas to "load"

.tell canvas to "save"

If you've loaded an image in it can be useful to know how big it is: 

.tell canvas to "get size"

.say join "width:"[displayX]

.say join "height:"[displayY]

The next plan is to use what we've built as part of a 2 day games jam that will take place in September, where groups of kids will build a game over a weekend. We'll announce more details later, but if you interested in taking part let us know.