Pulp How-To: Drawing Frames from a Single Tile

I'm making an Art Gallery in pulp in which I'd love to host work from the community, but to build it and display complex multi-tile artwork, I needed a good solution to organize each piece without cluttering up my world tiles. Shoutout to @NaOH on discord who tipped me off to drawing all of the artwork into a single world tile as animation frames and then telling pulp where to display each frame.

I've seen a couple other folks ask about this method, so here is my process for tiling art.

First off, create whatever art you want to display - either frame by frame in the pulp editor or another graphics program of your choice. (Stay tuned for a way to import large artwork to a single tile later in this post)

I used Photoshop to create 1-bit art but any program will do. You need either a png of the correct dimensions that you want to display or if you did it all in pulp (this can be laborious and is exactly what I did at first) then you're set. For this post, I'm going to use a piece called 'Bleh'


The starting photo

bleh 6x8
The 1-bit artwork. Note this is a 3x4 aspect ratio image that I display over 6x8 tiles so it's dimensions are 48x64px which also equals out to 48 tiles. That's important later.

Once you have the artwork in, it should show up something like this.

Again this image is 48 8x8 frames, but I have 10x10 artwork, 16x9 and even tryptychs which is artwork spread over three panels. You can do any rectangle with this method and by complicating it, could do any other tileable shape.

For each artwork, I make a separate room (and created a frame for it and other elements). The player wanders the gallery and accesses each art and enters that art's room.


Under Construction :laughing:

Even have an info panel :smile:

Pulp tiles the artwork on entering the room. In the editor it looks like this:


As you see, in pulp, only the first frame of the animation is displayed and it fills the space that I want it to display. The animation is set to 0 FPS -- this is REQUIRED.

I initially brute-forced the code to display a particular frame at every x,y I wanted drawn, but that was a stupid amount of code that I fixed with a couple while loops:

Here is the code for all 3x4 ratio rooms (I call them 6x8 as that's the actual tile arrangement I need for this display)

// tiling code for 6x8
on enter do
	x = 9
	y = 3
	f = 0
	while y<=10 do
		while x<=14 do
			tell x,y to
				frame f
			end
			x++
			f++
		end
		y++
		x = 9
	end
end

x & y are set to the top left coordinates of the area i want to draw and the while loops run until they hit the bottom right coordinates of the draw area.

Some Notes:

  • The code will hang if there are less frames in the tile you are drawing then are expected in the while loops. This piece is 48 frames whereas a 10x10 is 100 frames. If I tried to draw this art on a 10x10 area the loops for that room would hang and then draw all the available frames and leave whatever frames were still there from a previous room. So you must be precise.
  • For multiple panels, I just run the loop 3 times (for a triptych) but this could be played with.
  • I can easily see folks drawing entire rooms like this. I have them set as sprites, but it should work just fine as world tiles. I mainly do that for organization.
  • This is Great for Organization. I'd go mad sorting through tiles without this method.
  • You CAN draw on top of the tiles afterward. I have one piece of art that I tile and then have world tiles with animations drawn on top covering up some of the frames. So drawing a complex scene and then animating just specific tiles could be really cool.
  • I was initially confused as to how to tell pulp Which Tile to pull the frames from but it will change the frame of whatever Tile is at the x,y coords it is looking at. That's why I fill that whole space in the editor with Specified Tile of the Art and then the code adjusts which frame is written to each coord as soon as you enter the room.
  • Making these as Player Tiles with transparency got real weird. I haven't tested this much and probably won't for this project. I assume a player could walk over these with transparency but again, haven't tried yet.
  • I don't know how performant this is, as I haven't tested on real hardware. The code only calls on enter room so I don't think there should be any issues, but would love for someone to try it out and let me know it works fine. I'm hoping to release a prototype soon.

AND NOW for that hot-importing-art tip I mentioned!

I was originally drawing in photoshop and replicating it in pulp, dot by dot. It was taking Hours. I needed a way to import artwork into a single tile as multiple frames. @Neven mentioned somewhere along the line that for importing and exporting, Pulp gives what it expects. So I exported a single one of my art tiles and got the magic naming structure!

I have an image of Bleh saved as 'Bleh 6x8.png' in my laptop folders but to import it as a single tile it must be saved nearly exactly as follows:

pulp-tile-0-layer-Sprites-fps-0-count-48-table-8-8.png

It Must start with pulp- etc from what I can tell, but I save a copy of every art now and name it exactly that with one exception. I change the count - in this case 48 - to whatever number of frames the artwork will take. So a 10x10 would be 100

pulp-tile-0-layer-Sprites-fps-0-count-100-table-8-8.png

and a 16x9 would be 144

pulp-tile-0-layer-Sprites-fps-0-count-144-table-8-8

Since I organize all my artwork into a separate folder per piece on my PC, I can keep them separate and just use these specifically named files for import.

Ok, so that was a Lot! But I have my process down now, and I can't wait to see what other people do with this system. Pulp has been a blessing and I'm excited to dig into the SDK for more complicated projects.

Also! I'll also post separately soon, but if you have cool art, I want to see it! I'm hoping to fill this gallery with pieces from the community and offer it to the community ideally free of charge. I could even see doing periodic showings/collections and making it something like an interactive zine. So stay tuned and in the meantime, hit me up if you want in!

7 Likes

This method will be very helpful to some people (like me :smiley: ) thanks for sharing it!!

1 Like

Thanks for this, especially the import trick! Smart to do it all as a single 0fps animated tile :slight_smile:

1 Like

This is very interesting. Can you please give an example of an image file or zip of image files that are arranged in the way that pulp expects for this, and as a comparison the original image file too?

Also -- I'm interested in the art gallery idea. What are the constraints for the artwork? (dimensions, etc.)

1 Like

Thanks a bunch for this tutorial! I've been trying to do this starting from inside Pulp and finding it difficult to work across multiple tiles. Love the artwork, too!

1 Like

Sure! here's a screenshot of my actual files/folder for Bleh

bleh files

When I output the final png i just duplicate it and rename it to the format mentioned and make sure the 'count' is accurate to the dimensions of the piece

1 Like

also I'll do more of an announce post soon but if anyone is interested in submitting art for the gallery, i specifically want folks from this community as well as my art and a few friends for this first showing.
I'm @ledbetter on the playdate squad discord so feel free to message!

You could do a flat image like a painting or photograph, but I'm also going to have spots for sculpture tho in this case it would be a 2d image of a sculpture of course. contact me if you want to talk animation on or of any of these pieces.

the dimensions i need are as follows:

Aspect ratio
16X9 = 128x72px
10x10 = 80x80px
3x4 (displayed over 6x8 tiles) = 48x64px

I also have a set up for triptychs that is 3 5x10 pieces. that is 150 frames total and should be submitted as 1 png at 120x80px

for Sculpture, it could reasonably fit anywhere in the following 17x15 area, so 136x150px

Every artist will have their info displayed and I'm happy for you to talk a bit about your projects if you have any!

I really don't do very much pixel art, but I do want to practice. I just drew Marisa from Touhou for the gallery if you'd like it! (Criticism appreciated!)

image

2x scale:
image

so i don't have a 16x12 setup yet (tho I prob should look at doing that) but here's how easy it was to add it to the 16x9 tho it cuts off the bottom

Ah, sorry, I thought it would fit the "48x64px" aspect ratio, but I guess I misunderstood! Very impressive that you added it so quickly though :slight_smile:

Edit: If this is going to be like a virtual space, it could be cool to have other NPC visitors walking around in the gallery at random. Could add a sense of "space" to it :slight_smile:

oh they're definitely in there. that's part of the next phase is getting in all the little patrons

16x12 established :slight_smile:

1 Like

Awesome! Although I had actually intended it to be at 1x pulp scale, so it could be 8x6. (Unless you think 16x12 is better!)

Edit: Also, it could be neat to add a shadow effect to the outside border of the frames.

the aspect ratio/frames are defined by the actual dimensions of the png. i just saved the image and went off that. if it were to display smaller it would need to be saved smaller first and then imported with the new frame count :slight_smile:

1 Like

I've created a 10x10 (80x80px) piece if I can submit it?

The Death of the Jade Rabbit

the_death_of_the_jade_rabbit_by_orkn

Description: In Chinese mythology it is said you can see a Jade Rabbit living on the Moon. Like the Man in the Moon, the Jade Rabbit is an example of pareidolia, the tendency to see meaningful shapes in random patterns. In this piece, small scale dithering evokes a larger scale pattern of random noise. Paradoxically this leads the eye to resolve not order, but disorder.

I like it! For everyone else that wants to submit please hit me up on discord @ledbetter :slight_smile: