Spritely -- a simple image editor

@ruilove THAT’S why I was confused about the save and load buttons :slight_smile: @Mark - they were the right way around, I was just running your editor on a build of 1.2.6 and forgot the images would be upside down.

Yes, I should have realized that when you talked about a blue down arrow that you were using the update image format.

This one should include noSmooth & have images flipped. I kept my internal grid top-left based and just modified the spots that translate between grid array and image.

http://devilstower.posterous.com/spritely-040-simple-image-editor-19454

The new version is awesome! Thanks for sharing this!

I have one issue with the palette: when a color from palette is chosen the sliders no longer show correct values of RGBA. I guess this is how the iparameter’s work when the variable value is changed in the code. I’m not sure how one could fix it.

Yeah, I can’t think of any way to address this. I tried recreating the Iparameter after each color selection, but the sliders are unaffected.

I’ve made a small update that adds a “global” button. This button saves the current image to global data rather than Spritely project data. Also included is a sample SpritelyLoader class to grab the global data and move it to your project.

The set of images in the save / load dialog are saved to project data, so you’ll need to shuffle globals over one at a time, but it beats copy/pasting the data in.

http://devilstower.posterous.com/spritely-050-simple-image-editor

One way would be to implement custom sliders, maybe as here:
http://szleski.posterous.com/hslider
but where to place them? Either on top, or use full screen mode and place sliders on the left (there is no way then to copy output - but maybe it is not needed anymore?).

BTW, I can’t get watch() to work with object’s attributes - watch(“ss.val”) does not work as expected.

As far as I understand it, watch only works on global variables. I iften watch("debug") and then set debug to mirror whatever I’m currently interested in.

(There’s another example of my “i”-“o” displacement on an iPad keyboard.)

Hey Mark, I merged spritely into an UI framework that I put together. Hope it’s useful.

Edit: http://ruilov.posterous.com/spritely-in-sup-01

Could someone post a simple program that uses Spritely to draw ( a simple box) and then uses spiritely loader to get that data into the project. I did read the comments and looked at the code for invaders but couldn’t put everything together to get in working in my test program. I’m just trying to learn the program
TIA

There are basically four steps.

  1. draw the icon in Spritely and save it to global data by touching the globe icon. (you should hear a little whistle to let you know it worked)

  2. copy the text of the SpritelyLoader class into your project.

  3. create an instance of the SpriteLoader class in the setup of your main file. For example:



    myLoader = SpritelyLoader(“bob”)



    Now run your project. This will take the icon from the global data and save it in your project data under the name “bob.”

Once you’ve done this, you should remove the reference to the loader from your code. In fact, if you only want to load a single icon, you can now do away with the whole SpritelyLoader class. I know you can’t see anything yet, but the loader’s job is done.

  1. Now to display your icon. To do this, you’ll load it into a string, and execute that string to build the image.

createImage = loadstring( readProjectData("bob"))
anImage = createImage()

You still can't see anything? That's okay. You need to add one more line to the draw() function of you project's main file.

sprite(anImage, 100, 100)

Now! The image stored as bob and rendered in anImage should finally be on the screen.

Sorry that it’s more than a bit awkward. As Codea goes forward, I’d bet we’ll find it easier to save images and to move them between projects. When we do, I’ll update Spritely.

Thank you very much Mark, this is what I was looking for! Keep up the fantastic work!

I’m sorry but I still can’t quite figure out how to get the sprite into my project. I’m not sure if I followed the directions wrong? Is there a simpler way??

You could try just reading the image from the global data. Paste this into the draw() function and see what you get



createImage = loadstring( readGlobalData(“SpritelyGlobal”))

anImage = createImage()

sprite(anImage,100,1o0, 32, 32)

Do I need to have the Spritely Loader code in my project as well?

Never mind, got it working. However, I have a question. The sprite appears tiny, is there a way to enlarge it?

Render with sprite( image, width, height )

Change the width and height to something larger. If you just specify the width, the height will be computed to preserve the aspect ratio of the image.

If you turn on noSmooth() the image won’t blur when it is upscaled.

How do you turn on noSmooth(). Sorry, I am a total beginner. First time ever coding

Just add noSmooth() to the draw() function (or setup) before you draw the sprite.

Ok. Thx. Love your program it works great. I’m working on merging it with Lua Jump so you will first draw your character and then begin the game.

Made a picture of bender with it: http://yfrog.com/z/hs33nhp

Bender