Images in my Code?

Im Programming a Little Game with a Boy in a House, and for decoration i Need a bed. So how can i put an image into my code and how do i use and draw it and btw how does the spritely-image-editor work??

Hmm - we need a “how do I use spritely images in my own code” tutorial. I know how it saves (ie. as lua code), but I don’t know off hand how exactly to get that into my own code. (I think it saves to global storage - and you can just do a loadstring() once you retrieve it - but an example/walkthru is probably a handy thing to have, somewhere, if it’s not already on the wiki somewhere).

The answer to your question is: if it’s not in a spritepack, you use spritely. You can hack a new spritepack in (my first post ever was about that), but then only you can use it. Support for image importing (of some sort) is on the wishlist. You CAN play games with decoding to a raw format and importing as text, but it’s ugly - images have a LOT of data, especially uncompressed. (I did it here as a stunt: - but that’s only 64x64 pixels).

Yeah, using Spritely is more than a little clumsy. I’d like to make it easier, if I could think of how.

Basically, when you edit an image in Spritely, you can save it to local storage, or you can save it to global storage. Because I didn’t want to litter global storage with a bunch of data that gets forgotten, it always saves icons in global storage under the same name.

When you create a new project, you need to decide how to get the data into your project. I created the SpitelyLoader class (included in the Spritely project) to make it easier. Create an instance of this class, give it a name, and it takes the image out of the global data and loads it into your project.

As Bortels mentioned, Spritely saves images in the form of all the set commands it takes to draw that image. To use it in the code, you use loadString to bring in the code and create an image.

The instructions should be in comments in the SpritelyLoader class. Wish I could give an easier answer, but since Spritely can’t write data to other projects, the hopscotch through global data seems like a necessary evil.

One other option: Spritely has a “print” function that will write out all the code needed for an image. Do a select all, copy on that code and paste it into your project.

Suggestion - have Spritely save, to global storage, the following metadata:

  1. The sprites themselves, in a compact form (hex, or base64 encoded)
  2. A table of sprite names that you’ve saved globally
  3. a chunk of code, that can be extracted from global storage and run with loadstring(), that takes the name of a sprite saved in global storage, decodes it, and puts it in an image.

Idea being - use Spritely to edit your sprites, and to manage them in global storage (delete, copy, etc). A program wanting to use a spritely sprite would do something like (forgive me, Maddy my 3 year old hill troll daughter has my ipad, won’t give it back! I don’t know if the syntax is exactly right):

spritely = loadstring( readGlobalData("Spritely")) 
myimage = spritely:load("Mario")

The first line setting up a Class() that has load (and maybe save?) methods.

This is part of a “global library” concept that’s been floating around - idea being, instead of having to cut and paste a tab with a font or other library - we store the data in global storage, along with an “accessor” chunk of code - and if you want to use it in your project, boom - a few lines. The .codea file (while they exist, sight) would basically be an installer/uninstaller/manager (and, in the case of Spritely, and editor).

PS. I’ve thought a lot about this. I like Spritely - a lot. Huge fan. Just sayin.

PPS. In the long term, I’d like to see the functionality I suggest above replaced by a way to add custom Spritepacks, add/delete images in them, both via some sort of menu, and programatically.

PPPS. I don’t see Spritely as doing anything wrong here - I think this is precisely what global data should be used for. In fact, it’s this sort of sharing that I was thinking about when I suggested they add it! :slight_smile:

I Love it too - in the moment its replacing costum spritepacks. But how can i give names to my spritely image and save it to global data?

PS: Thanks for the responses, i Love this community! Just what every new lua-user needs :slight_smile:

I added those features here

@Maxiking16 - I have really nice graphics of furniture made in spritely. I’ll get it to you when I get to my iPad. I’m creating a game where you have to clean your room by throwing things under furniture before your mom gets to your room.

I love the flood fill and partial image drag. Very, very cool.

genius idea! amazing!
looking forward to your images :wink: and how did you import them?

Hmm - I’m only getting black screen (with the sliders and console on the side). no idea why… but a lot of my apps are being crashy outside of Codea, it may be time to reboot.

the new version is genious! oh my god i love the way you managed to save the pictures. but i have a two questiones:

  • whats the difference between “bitmap”, “image font” & “spritely”?
  • how do i use the pictures then? with ~~~ loadGlobalData(name) ~~~ ?

Spritely - it’s the original format. Basically saves code that reconstructs the image

Bitmap - saves the position and color of each non zero pixel, so not really a bitmap. Similar to spritely but smaller files

ImageFont - similar to bitmap, but no color. This is the format i used when i converted Bortels fonts to images. I added it here to do some touch ups on the font. For example try loading char_a from project data to see the image for ‘a’

As for loading images in another project, there’s a function called loadSpritely. Copy-paste that function to your project and you should be able to use it to load stuff

in my project:

error: [string “…”]:28: bad argument #1 to ‘readProjectData’ (string expected, got nil)
Pausing playback

in the spritely editor:

unknown format: Spritely

Did you choose global when you saved the image? That’s the only way to see that image in another project.

Also when loading you need to load from global. Something like


yes i did…

the error is in this line:

data = readGlobalData(filename)

Sounds line it’s not finding the filename, so readGlobalData is returning nil. Not sure how to help here

oh okay, maybe i spelled it wrong… thanks anyway!

It’ll take me a couple of days (I have to actually work on something else), but I’m hoping to get another version up that steals… er, borrows all the fine ideas ruilov and others have provided and puts the program in a more solid “frame.”

I’m playing with some global storage ideas, and hope to have something peachy to show soon.