Saving Images to Project

I’ve got a bunch of images in my Dropbox, and I want to save them into my Project. Is there an easy way to do this?

I found a script that, if you feed in a bunch of URL’s or Dropbox URI’s, it can save the images into your project:

https://gist.github.com/interactivenyc/2f5d48503e00133deb814e52e6bcebdf

Is there a way to automate this by reading all the images in your Dropbox programmatically so you can save them into your project?

Or are there other nifty tricks to achieve this?

Thanks in advance

What do you mean by “save images into your project”?

If your Dropbox is linked to Codea, then you can drag and drop the images into the Dropbox/Apps/Codea folder that Codea creates when you connect it to Dropbox. In Codea, hit sync from the Dropbox folder browser. Then you can access those images with “Dropbox:mySprite” or whatever.

If you’re wanting to transfer them all to the Project: folder for some reason, then you could do saveImage and save each one to Project: Is this what you meant by saving into project? I’d recommend just keeping the assets in “Dropbox:” as they’re more readily accessible there for all your projects if you’re reusing assets, plus you can easily edit it from your desktop Dropbox folder.

Is it because you’re wanting to take advantage of the automatic bundling of assets in the Project: folder when you do Codea export project? If that’s the only reason, then you could manually add the images to the git repository you’re exporting to.

Thanks Yohimbo! I wound up writing a loop to do readImage/saveImage from Dropbox into my Project.

I wish there were a way (is there?) to organize assets by folder. I have 48 images for this one character I imported, and I might want to have several characters in my project. This makes for an unwieldy root folder in my Project, and also when I save my project to GitHub through Working Copy.

Are there any other tricks you can suggest for how to manage a large number of assets other than naming conventions?

@interactivenyc - the usual solution is to create spritesheets, eg put all 48 images into one image. The size limit is 2048x2048 pixels per image.

Then when your program starts, you can read the image in and copy the parts of it into 48 separate images (or, once you get to using shaders, keep a single image and use the shader to pick the part of the image you want).

I would use this approach even if there were folders available.

Well, you don’t need to use a shader to change which part of the sprite sheet you’re drawing, just a mesh with rects and then setRectTex when the animation frame changes. It’s a few more lines of setup than sprite, but worth it for the performance, if you have lots of objects flying around.

That’s great advice - thanks! In the meantime, I discovered the trick I was looking for - if you hit the edit button in the image browser, the option comes up to copy images into a new destination.

http://www.screencast.com/t/0do5gMxdx

Here’s my modified script to load images off of my server. It gets as far as making the http request for the image, but apparently it’s never loading - the callback function never gets called. Anyone know what I’m doing wrong here?

https://gist.github.com/interactivenyc/96d4fb41b24e9b6d82eb2931851df3cb

Solving this might solve my bigger question about how to distribute my source code, and deal with distributing my assets to other users :slight_smile:

well, this loop isn’t going anywhere

for var=0,0,1 do

It tries to load just the first image. If you run it, you can see evidence of the attempt in the output.

Your first image is

http://www.interactivenyc.com/projects/codea/joystick/images/gyrobot0-a.png

I put it in a browser URL and it is 404 not found

Grrr! That’s useful, thanks.

The images are in the right directory, but they’re showing up 404 when I click them. My server must not like PNGs.

http://www.interactivenyc.com/projects/codea/joystick/images/

This one’s a little closer - the images are now JPEGs, and the loop is set to load all 24 images. It gets to the place where it appears finished, LoadImages is called from inside the ImageDownloaded function, which indicates that they’re all successfully loaded. The funny thing is, I never see the traces from inside ImageDownloaded, and the images don’t appear in my Project.

https://gist.github.com/interactivenyc/96d4fb41b24e9b6d82eb2931851df3cb

The biggest bummer about this approach, and why it will never really work for me is that the images lose their transparency when converted to JPEG. :frowning:

I put my PNG images on Photobucket, and linked to the raw image URL

The reason you don’t see them may be that Dropbox images need to be manually sync’d first - which is why I save my images to Documents instead

One other thing I do, when I am asking other people to try my project, is give the images names that run in sequence, so when they are done, people can find them and delete them easily. I see you are naming them in sequence, which is good!

Photobucket. It’s worth a try!

Github raw links are good for all kind of files

Github might be better, Photobucket is full of ads

GitHub it is then. Thanks!

Another drawback to Photobucket is that it adds a weird string of characters to the filename, making it impossible to write a loop that goes through a numbered sequence of images. GitHub does NOT do that. YAY GITHUB!

Success! Thanks guys.

https://gist.github.com/interactivenyc/96d4fb41b24e9b6d82eb2931851df3cb

Guess what? I’M STUCK AGAIN! (Big Surprise…)

Here’s a new version of the ImageLoader:

https://gist.github.com/interactivenyc/841562be1d7468c2525ba05354199164

In it, there’s some code at the top that’s commented out with IT WORKS… As a comment. This code works, and loads all the “a” images in my sequence.

Below that there’s un-commented code that’s practically identical, but it tries to load all of the “b” images in the sequence. This code gets stuck in a loop and keeps trying to load the images over and over - the final AllImagesLoaded() function never gets called, even though all 24 images load into the Project assets.

WTH?

Can anybody try this and see if they see anything fishy? I’m so close to being able to distribute this code and have all the images get pulled in dynamically.

If you get wind up getting the images loaded, you could try my latest version of the Joystick code, that now has a top-down rotating character - I’m pretty happy with how it’s working, though it certainly could be improved. My math skills have gotten me this far, but you’ll notice the direction of the character should be shifted by 7.5 degrees counter-clockwise. I’ve also got a Step Timer happening in the Hero class that could maybe be done in a more sophisticated fashion. Any help would be mucho appreciated - as usual!

New Joystick Code:

https://github.com/interactivenyc/CodeaJoystick

TIA

Steve