Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Register

Categories

In this Discussion

Two Lives Left on Twitter
Two Lives Left on Facebook
Codea Wiki
Codea Development on Twitter

Basic side scroller code

WestWest
edited June 2013 in Code Sharing Posts: 892

Here is a simple side scroller. It's aimed at helping beginners understand some of the basics involved in meshes, spritesheets and collision detection. It's by no means perfect but hopefully someone will find it useful. I've included a spritesheet which you are free to use, modify, whatever.

Code:https://gist.github.com/Westenburg/5743643

Spritesheet:https://www.dropbox.com/s/ztwc51abhl3ks1k/foggyspritesheet@2x.png

Video of gameplay:

«1

Comments

  • IgnatzIgnatz Mod
    Posts: 5,396

    Cool. I aim to write some tutorials about sidescrollers, so I'll read this with interest.

  • ElturroElturro
    edited June 2013 Posts: 18

    Cool, but i have only a Blue/withe screen. I have downloaded your Image and put it in the dropbox and activated it in the code.

  • WestWest
    Posts: 892

    Try saving it to documents. You also might want to rename the file to something simpler.

  • BriarfoxBriarfox Mod
    Posts: 1,542

    @west Very cool. Wish I would have had this to reference on my last side scroller. Really informative!

  • Diablo76Diablo76
    Posts: 68

    Cool, it's nice :)

  • ElturroElturro
    Posts: 18

    @West Thank you, it works.
    I can't find a exit option to codea.

  • matoxmatox
    Posts: 79

    @ West. Did the image loads and renamed foggyspritesheet. Then copied and pasted into the Document Folder. Jetz it works excellent. Going out with triple tab. Thank you.

  • WestWest
    Posts: 892

    Thanks all!

    @Elturro you need to tap the screen three times with 3 fingers to bring up the exit (and other) buttons. If you change display mode from FULLSCREEN_NO_BUTTONS to FULLSCREEN then the exit button will always be shown

  • ElturroElturro
    Posts: 18

    Thanks again!

  • WestWest
    Posts: 892

    Updated to with weather,particles and bonuses. Now contains two tabs - a Particle one and the Main one. Not sure if I've uploaded to GitHub correctly as I'm new to it.

    https://gist.github.com/Westenburg/5761018

  • BriarfoxBriarfox Mod
    Posts: 1,542

    @West I must say I loved how you posted this with the image assets and suggestions to try an implement. I've been using it to learn more game mechanics. great update, I want to see how close i can get to it before peeking at your new code :)

  • WestWest
    Posts: 892

    @Briarfox - cool - I'm glad you're finding useful! Look forward to seeing your updates- the way I've done it isn't necessarily the best way so would be interested in other people's take on it.

  • Ric_EsreyRic_Esrey
    Posts: 140

    @West, this is one of the coolest games I've seen--made with Codea. In my humble opinion, TLL should use it as a Codea sample program.

  • WestWest
    Posts: 892

    @Ric_Esrey - thanks for the kind words

  • ElturroElturro
    Posts: 18

    Wow, the update is great. So i can learn more. :-B

  • ZoytZoyt
    Posts: 2,820

    Stunning... I love it. You did an unbelievable job incorporating real life photos into a game while keeping it pretty.
    One suggestion I have is to warn the player before a spider comes because if you're going fast, you're out of luck. One frame there's no spider, the next you're eaten.

  • WestWest
    Posts: 892

    @Elturro, @Zoyt - thanks!

    Yeah - the spider is pretty hidden against some of the backdrops - there is also a skull icon on the spritesheet that I had used originally which is a bit easier to see.

    I think the way that the horizontal speed is altered needs re-visiting - I think you speed up too fast too quickly when passing through the rings. The speed up bonus doesn't really do too much.

    Anyone made it into night time? - I was really happy with the way the stars appear, though the dusk transition could be smoother

  • ZoytZoyt
    Posts: 2,820

    I just barely did, then I got hit by a pesky spider. Urg. I suggest you add something like a red arrow pointing to the spider on the right side of the screen a second before it shows upl

  • ElturroElturro
    Posts: 18

    Here is my unfinished design. It is interesting to play with your code. Please do not use the design Commercial.

    https://www.dropbox.com/s/fkoggeqeevo7y21/Foto 17.06.13 16 56 54.png

    https://www.dropbox.com/s/2mzap2zlla27qpf/Foto 17.06.13 16 57 10.jpg

    Bilder oder Fotos hochladen

  • WestWest
    Posts: 892

    Nice graphics - I like the consistency of your theme

  • ElturroElturro
    Posts: 18

    Thanks West. It has to be adapted.

  • juaxixjuaxix
    Posts: 437

    I'm using this for a game! :x

  • WestWest
    Posts: 892

    Nice - look forward to it

  • UberGooberUberGoober
    Posts: 1,307

    I made a zip for this project so that people could get it more easily, and not have to download a sprite sheet separately.

    It’s still a really cool and helpful project!

    It’s also got very detailed comments explaining how it works, so anyone interested in this kind of thing should definitely check it out.

  • WestWest
    Posts: 892

    @UberGoober wow - that’s going back a bit! I made a prototype game pushing the idea on a bit with power ups and an end of level boss. Unashamedly riffing off of Apidya from the Amiga days. Unfortunately the zip is coming in at 10MB so too large to post here

  • UberGooberUberGoober
    Posts: 1,307
    @West 10MB!

    Just out of curiosity, how much of that is sounds and graphics?

    In theory, one could jerry-rig a “lite“ version using only Codea–native sounds and graphics wherever possible… i’d be willing to take a stab at it if you have a link. ;)
  • WestWest
    Posts: 892

    @UberGoober The vast majority will be graphics. I have 90 images - lots of them 200 x 200 (they don't need to be this big, but don't have an easy way to scale them down). This prototype was all about the look rather than the underlying quality code (which is pretty poor).

    Do you know if there is a way of viewing the contents of a project's "graphics" folder?

  • UberGooberUberGoober
    edited May 4 Posts: 1,307
    @West This app lets you view inside zip files:
    https://apps.apple.com/us/app/zip-viewer-unzip-and-archive/id603570331
    When you tap on the zip file, it will show you a Codea file, and when you tap on the Codea file, it will treat it like a folder and show you its contents.
  • WestWest
    Posts: 892

    Hmm - don’t think I’ll be able to compress the images down easily. File size limit for the forum is 2MB. Thanks for the link @UberGoober though - told me what I’d suspected in that it is the volume of source files rather than one specific one which is the problem.

    Here’s a short video of the game in action

  • WestWest
    Posts: 892

    Been a while since I’ve uploaded to YouTube - there’s been a bump in the video quality

  • UberGooberUberGoober
    Posts: 1,307

    Hm any chance you want to share a Dropbox link and I’ll take a swing at chopping it down? I think I’d have to replace some of the art but rom my vantage point, even if it has to have worse graphics, it still would have great value as a guide for others to build off of.

  • WestWest
    Posts: 892

    Sure - I’ve sent you a pm. Do think reducing the graphics loses a lot of its value though!

  • UberGooberUberGoober
    edited May 5 Posts: 1,307

    I shrunk down the graphics and put almost all of them on a spritesheet—everything but the the backdrop, we’ll have to fake that, maybe via a grey tint on the builtin clouds.

    I haven’t actually implemented any of it, but now the project shrinks to 1.8 MB!

    I have included the spritesheet just so you can look at it; it’s actually in the project already, so there’s no need to copy it in.

  • UberGooberUberGoober
    edited May 5 Posts: 1,307

    Whoops I messed up the ant parts, they won’t overlap correctly, as opposed to the other bugs; the others assemble correctly if their sprites are all stacked in the same place. Will fix later.

  • UberGooberUberGoober
    edited May 5 Posts: 1,307

    Okay fixed it, updated the zip and the image above.

    If it’s not obvious, this isn’t a playable version, because none of the sprites have been added yet.

    Now I’ve got to go look at @dave1707 ’s spritesheet demo!

  • WestWest
    Posts: 892

    @UberGoober I don’t see the spritesheet or zip. For the backdrop just use one of the built in environment ones - looks OK

  • UberGooberUberGoober
    Posts: 1,307

    @West odd, they appeared there for me when I edited it, but you’re right, they’re gone now. I just put them back, please let me know if they’re still not visible to you.

  • Bri_GBri_G
    Posts: 2,366
    @West spritesheet and zipped file present on my phone and iPad.
  • WestWest
    Posts: 892

    Ok - can see them now

  • UberGooberUberGoober
    edited May 7 Posts: 1,307

    Okay here’s something from left field.

    I’m getting the sprites up and working, and just for the heck of it I made a version where, every frame, every single sprite randomly changes to any other sprite.

    It’s nuts, but kind of fun, and oddly I’m much better at the game in this mode!

  • UberGooberUberGoober
    edited May 7 Posts: 1,307

    I think I did it!

    The graphics look 95% as good as the original, I’d say.

    This was way too much work, and I really got obsessed with it. I have responsibilities, man! Now my wife is starving, and my children are crying, but who cares? _ I got this Codea project under 2 MB!_ My legacy is secure.

    @West, you’ll notice it’s not perfect, there was some scaling and positioning stuff I couldn’t get just right, but I think I got close.

  • UberGooberUberGoober
    edited May 7 Posts: 1,307

    If anyone is interested, and I guess even if no one is, here’s how I did it.

    • First I counted how many art assets were in the original.
    • Then I tried to find the right dimensions for a PNG that would compress well enough to keep the project under the target size. 1200x1200 seemed to work.
    • For my first pass, I took every single asset, no matter how large, and shrunk it down to fit in 120 x 120 pixels.
    • Many of the insects are composed of several overlapping parts, so it took some fiddling to devise a system that would keep the separate parts aligned correctly inside their own little squares. This took a while.
    • Once I shrank and positioned everything, I put the spritesheet asset in the project folder, to see if the project still compressed acceptably, and to my moderate delight, it did.
    • Having no idea how to actually code a spritesheet, I found a project in the forums that showed a super easy way to do sprite sheets, and I moved that code into the foggy bummer project, and got it loading all the sprites.
    • I discovered a weird thing about importing art, in that if you don’t un-check “retina” when you import a photo it will be imported at half its original size, which is oddly counter-intuitive. I kept getting crashes because I had written my sprite-loading code to go off of a 1200x1200 file, and if I forgot to uncheck “retina” the actual file was 600x600. I think what’s going on under the hood here is that actually two copies of the imported art get made, one at half size and one at full size, to follow Apple’s convention for image resources in iOS. For some reason Codea only exposes the half-size one to us in the asset browser. And the odd situation that results is that it looks like you have a smaller image file, but because it’s actually two files it makes your compressed zip larger than it is otherwise. Yes, the smaller file makes your zip larger.
    • Now I wanted to see how the sprites looked. Since it would take a long time to go through the code and put the new sprites in all the right places, I wrote a single line that drew a random one of the new sprites, and I pasted that line everywhere in the code that anything was drawn. Effectively I made every sprite into every other sprite. This is the ‘Chaosgeddon” project above. It’s absolute madness but it’s also kind of fun.
    • Seeing the sprites was a mixed bag. On the plus side, almost all the sprites looked perfectly good at 120x120. But on the minus side, the ones that looked bad looked really bad, specifically the larger ones like the tree and the snail and the hedges.
    • So I had to figure out a way to get larger sprites into my nice little 1200x1200 pixel file. But almost every square was already taken up. I noticed that there were a bunch of images that even at full size were already much smaller than 120x120, such as all the bullets, and the bonus icons, and the little explosion animations, etc.I realized I could subdivide each of my 120x120 squares into four 60x60 squares. I started collecting all the small little pieces into grids of 60x60, which eventually let me get 160 sprites into just 40 squares. Now I had an extra 120 squares to fit larger sprites into.
    • After a lot more fiddling and adjusting and jigsaw-puzzling, I wrangled most of the large sprites into the spritesheet at something close to their original size.
    • Now I had to get these into the code. The easy part was writing a routine to import the 60x60 grids, because I just adapted existing the code for the 120x120 grid. The hard part was those larger sprites. I had about 11 irregularly-sized large images, and I had to hand-code all the coordinates for importing them, manually counting out the x, y, width, and height values for each. I made several mistakes here that were real headaches to track down later.
    • Now I was at the final stage. I’d chopped up and arranged and rearranged and shrunk and enlarged and imported all those sprites, and now I had to put them at the right places in the code. This was exactly the situation the 80/20 rule applies to. 80% of the spritesheet sprites just easily replaced the existing ones, like butter, but 20% were so wrong it hurt, and the majority of the rest of the time was spent fiddling with that 20%. Specifically the freaking dragonflies and freaking butterflies and freaking hedges were a huuuuge pain to get right.
    • But happily, using the larger sprites totally worked. They look great, to me. They are slightly scaled down and then up, so they’re not perfect, but they’re darn close.
    • In the end there were some things I just couldn’t get right, and had to settle for good enough. The dragonfly wings are still kind of weird. I actually don’t know if the cat works at all because I couldn’t play that far in the game! And I don’t think all the sprite sizes are exactly the same as they are in the original, but they’re close, and I’m satisfied with it.
  • skarskar
    edited May 7 Posts: 172

    i wish we had a way to give a post thumbs up or a like, so here’s my kudos to you for putting so much work and troubleshooting into this @UberGoober

  • WestWest
    Posts: 892

    @UberGoober great job. You have a lot more patience than me on this!

    For coding the spritesheet - there was a simple example included within the code itself - the explosion was a sprite sheet in the original.

    Set self.invincible to 20000 in the Bee class to give you invulnerability for a longer period of time - that way you can cruise to the cat end of level boss. Unfortunately the sprite for the cat isn’t ported correctly.

    Another thing, the order of the power up icons is wrong - the power awarded is still ok, but the symbols are presented in the wrong order.

    Now this has moved from being a personal project only on my iPad, there may be issues around attributions of the assets. All the original images were generated by me, sometimes from photos I’d taken, but sometimes curated from the web. (My process was to load into Inkpad, draw round and set a mask) Not sure of the correct attribution for this, but if you see one of your images being used and its an issue let me know (I think it’ll be OK but credit where credit is due).

    The explosions were derived from some excellent tutorials here: https://blog.studiominiboss.com/pixelart

  • SteppersSteppers
    edited May 7 Posts: 199

    @West @UberGoober Amazing work both of you!

    I just thought I’d let you know that I’ve added @UberGoober’s latest ‘Foggy From Sprites’ project to the new community repo app I’ve been working on. With zero modifications to the zip it downloads automatically and runs perfectly! As far as I can tell at least…

    I’m hoping to have a large assortment of demo projects, programs and games on there in the future but If you do have an issue with it do please let me know and I’ll take it down. Just wanted to make you aware.

    Oh and @West I’ve also added your recent ‘Fish’ demo too :smile:

  • Bri_GBri_G
    Posts: 2,366
    @Steppers - just a note of caution, uploading exclusively to the community repo could mean some forum members may not be able to download.

    Also, as we have seen over the years, updates in Codea can frequently result in incompatible projects. For old timers that's not an issue but for recent or inexperienced forum members that could, later, be an issue (unless author's are willing to update and re-upload).
  • UberGooberUberGoober
    Posts: 1,307

    @West thanks for the invulnerability tip. And the cat tip. I fixed the cat.

    I wonder if you could help me fix a couple other things.

    • The dragonflies are invulnerable, is that how they’re supposed to be?
    • I couldn’t get the legs on the flying ladybugs positioned right.
    • When creatures that use wasp wings are flying to the right, their wings are positioned wrong and don’t even touch their bodies.
    • The dragonfly wings are wrong too, but I think they move fast enough that it’s not noticeable.
    • There are some sprites that don’t seem to be used, like the bullet with the little crackles on it, the blades of grass, the wasp body that’s all one sprite, two of the daisies, and the honeycomb. Are those used somewhere and I’m missing it?

    There’s also a gameplay bug where once in a while the sprites seem to jump slightly from one place to another. I don’t know why changing art assets should affect that, so I must have accidentally busted something.

    Is it possible to get some help on these things?

  • SteppersSteppers
    Posts: 199

    @Bri_G I get that, I wouldn’t want it to be the only place to find a project but it could help newer users find interesting examples from the community easily without trawling through ancient forum threads. I think some sort of automated test framework could be useful in the long run to spot projects with potential issues after an update to Codea but that’s a job for another day.

    For the time being, I’m already doing some automatic substitutions for the old ‘Project:’ asset paths to convert them to the newer ‘asset.’ system. At the same time, the projects this downloads are available exactly the same as any other on Codea so if something is broken it can be edited & fixed.

  • Bri_GBri_G
    Posts: 2,366
    @Steppers - just playing devil's advocate, anticipating problems. Could be quite a burden as the library grows. I hope it takes off and does well. Thanks for listening.
  • WestWest
    Posts: 892

    @UberGoober The dragonflies aren’t invincible. They have 50 “hit points” which are set by self.hp in the Enemy class. Each bullet that hits an enemy removes 1 hp. The third power up along gives duel, triple, etc bullets for each time it is selected. The “super bullet” by holding on to the bee to build it up, then releasing will take a lot more hit points off.

    The wing & leg positioning is down to the way I originally designed the assets. Purposefully these images were bigger than they needed to be but were aligned so that they could use a common x and y position. When you have ported them into a single sprite sheet you have lost this implicit relative position information. You will probably now need to add it explicitly back in by adding the appropriate offsets to each image. The attached small program allows you to explore the offsetting for the wasp and its wings. The legs will be similar.

    For the butterflies and dragonflies, the wing movement is faked by squashing and expanding the image along one axis to give the impression of the wing coming out of the screen.

    Having said that the original code is HORRIBLE! It worked to allow me to the rapid prototyping and exploring, but I never originally intended it to be shared. If investing any time in it, I would be looking at refactoring it first, and if I were doing it, I would go back to my original, non-sprite sheet version. The only reason for putting it into a spritesheet was to share on the forums, and specifically to fit within the 2MB limit. Chasing down bad code seems to be counterproductive, and you have the original up and running and don’t think there is the wider demand.

    However, if you are learning stuff and it gives you a springboard - fill your boots and I’m happy to help.

    Lastly, yes there are probably a few additional sprites which were never used. I remember the honeycomb being some crazy idea I had for a maze tunnel bonus section.

    @Steppers - no problem sharing it on the repo - is there a size constraint like to forum, or could I post larger projects to it? I’ve not had the time to look at it, but will hopefully get time over the weekend

Sign In or Register to comment.