7 ms·

Makin' It Rain - How Raindrop Effects Work In 2D Games

98 points by cal5k 16y ago

cal5k 16y ago
Welp, looks like I crashed their server... Update: There it goes!
BPO_Quickdraw 16y ago
haha awesome, you blew my server up. Upgrading now but it'll take a couple days they say. Anyone reading: that's my game development blog, I'm starting an iPhone game dev studio and documenting the progress of starting it up and making the first game, day by day! Check it out if you're interested in game dev and feel free to ask any questions! - Quickdraw
- jordanroher 16y ago
  I'm very interested in iPhone game development. I'm working on a title for PC/Xbox based on the XNA framework and finding it fairly easy to use. Is there anything like that for the iPhone? Any good place to find a comparison of frameworks? I'm not averse to coding interactions by hand (trying to make a 2D RPG, not a platformer, so Torque isn't appropriate), but I can't make sense of the options.
  - timknauf 16y ago
    Like Alex, I can heartily recommend Cocos2D: http://www.cocos2d-iphone.org/ http://www.cocos2d-iphone.org/ We made a Monkey Island-style point-and-click (well, point-and-tap) adventure. It was a fairly complex project, but Cocos always felt empowering rather than limiting. Happy to answer any questions! About the game: http://launchingpadgames.com/games/scarlett/ http://launchingpadgames.com/games/scarlett/
  - yome42 16y ago
    I suggest you look into Unity 3D. It's easy to make 2D stuff with it, even if it's primarily a 3D engine. The basic version is free, so you can use that for development. When your game is ready to ship, you can upgrade your license to an iOS one and then convert and ship your game with it. If you want to stick with XNA, there's an interesting project to port XNA to iOS platforms (http://rockethub.com/projects/752-exen-xna-for-iphone-android-and-silverlight http://rockethub.com/projects/752-exen-xna-for-iphone-androi...), and there's XNATouch too. I haven't looked into those yet, but if you complete your game on XNA, by the time you'll be done there might be a viable solution to easily port your game to iOS.
  - stonemetal 16y ago
    I know little or nothing about iPhone programming. I figured I would plug a friend of mine's startup since it seems like just what you are looking for. (note: Not connected in any way other than having gone to high school with the founder.) http://gamesalad.com/ http://gamesalad.com/
  - BPO_Quickdraw 16y ago
    I'm going to be using Cocos2d, but I honestly couldn't give you many details on it because I'm going to be out-sourcing to a programmer to do that part. I'm making 2d games and Cocos2d is supposed to make it a lot easier to juggle sprites and everything...but we'll see if I can break it, hehe - Quickdraw
  - alex_c 16y ago
    I've used Cocos2D, and it was great - I've been meaning to write some posts about it, haven't got around to it yet. I haven't used other frameworks, so I can't compare, but for a simple 2D sprite game Cocos2D was a great way to hit the ground running. Video of me making the game: http://www.youtube.com/watch?v=se2mi_kfUko http://www.youtube.com/watch?v=se2mi_kfUko I'm far from an expert, but if you have any questions I'll try to answer them.
  - jon914 16y ago
    Cocos2D is the most popular 2D iPhone game framework. An alternative, if you're used to the Flash/ActionScript way of doing things, is Sparrow. You may also find that if you're doing an action/physics game in the future, Box2D will inevitably be necessary. If you're looking for a GUI as opposed to a programming API, in addition to the fine options above, my startup (http://www.stencyl.com http://www.stencyl.com) also does this and is based on Sparrow (and Flash for exporting to the web). However, I'll be realistic and say that if you're making an RPG, you'll find it much easier to build it by hand.
    - timknauf 16y ago
      Stencyl looks like a lot of fun, kudos! And am I right that some of the linked games have even managed to score themselves sponsorship?
      - jon914 16y ago
        Thanks! The Balls in Space game scored several sponsorships that have collectively gotten it into the 4 figures range, which is pretty good by Flash standards.
  - cleshmd 16y ago
    I'm working on a basic Cocos2d tutorial, written for beginners: http://www.coconutcollege.net http://www.coconutcollege.net Check it out, and let me know if you run into any problems. It's not finished yet, but the first four courses will give you a good foundation. I should have the next two courses posted within a week or so.
iamwil 16y ago
To me, the biggest lesson I've learn from game programming tips and tricks was to not model the world exactly. Just model it enough to trick the eye. My first inclination was, "but of course you need the splats where the rain drop line ends! How would it make sense otherwise?" But it's not until you see the video that you get that, hey that worked well enough. I imagine it's applicable to other realms of programming as well, like web programming. We should question if we really need something on the page, or if there's just some way to fake it or get away with doing less. Or same with scheduling notifications to be delivered. Does it really need to be real-time? Or can we just cheat a little since the tolerance is much higher?
- jrockway 16y ago
  Or can we just cheat a little since the tolerance is much higher? Sure, we call this caching. Imagine you have a blog with comments. You can generate the page for each user when he wants it, and then it's a real view onto the data that you have available. Or, you can generate it once a second and just serve the stale version -- not much can happen in one second. Making that compromise is the difference between handling 10 requests a second and 10,000 requests a second. Almost always a good tradeoff. (Doesn't NYTimes do this?)
  - ElbertF 16y ago
    I've noticed this on Reddit. When you submit a comment it's inserted into the page with a bit of JavaScript but when you refresh the page it's gone. Refresh the page again after a few seconds and it's there.
  - iamwil 16y ago
    My point was that asking the question in the first place is good practice to avoid doing work you don't need to, rather than the actual specific examples I made up on the spot. But thanks for the example!
- Periodic 16y ago
  A good example is probably progressive enhancement with javascript. You create a page that is just HTML, CSS, and images and send that to the user, at the end you specify the scripts that load and add all the functionality and enhance the page. For most users they won't even notice that the javascript isn't loaded for 0.5 seconds. If they do click in that small window of non-operability, they get a little confused and click again, by which time it works. Most people won't even notice though. This can be used to add fancy animations, add an actual embedded video over an image of an empty video player, add comments to the end of a blog post via AJAX. Most people won't even realize you're giving them static content initially.
Luc 16y ago
Or you could use color cycling: http://www.effectgames.com/demos/canvascycle/?sound=0 http://www.effectgames.com/demos/canvascycle/?sound=0 (choose 'Highland Ruins - Rain' and show the options to see the palette). Crazy in these modern times, of course.
- jjcm 16y ago
  Good for backgrounds, but it can't be used effectively if you need rain to appear in front of another layer (in this case, the character sprite).
- corysama 16y ago
  Those color cycling demos are amazing. Unfortunately, color cycling has fallen out of practice both because it is too hard to teach artists and because the double-lookup-per-pixel is memory bandwidth intensive on modern hardware (old systems had dedicated hardware to support this).
BPO_Quickdraw 16y ago
iamwil: "My first inclination was, "but of course you need the splats where the rain drop line ends! How would it make sense otherwise?"" Exactly, I think that's default programmer-logic. "If there's a drop, it must have a splat." I used to do some programming but I'm more of an artist than a progger so I figure writing about little artsy tricks like that might help other devs out. It can be rough trying to fit cool stuff onto tiny phones haha Luc: I'm a pixel artist at heart so I love color cycling, but ya, appearing in front of another layer blows it up. Also these days I don't think iPhone games use palettes much...I know older cel phones needed them, but for iPhone I seem to be able to get away with just using big ol' .PNGs with no palettes (which rules, 'cause I can get anti-aliased edges). - Quickdraw
- relix 16y ago
  It's also interesting just from a project management point of view, or anyone doing a startup, imo. Good blog!
  - BPO_Quickdraw 16y ago
    Thanks! I'm trying to cover the stuff that surrounds game dev, managing my time, keeping track of expenses, marketing the game, etc. 'cause I think that stuff gets glossed over a lot. Like I'll be posting my financials for the month soon, even though I know they're going to be negative since my game isn't out yet haha But it's the principle of the thing, getting into the habit of keeping accurate records. Glad you like the blog! I'm shooting for daily-esque updates so pop in again in a couple days! - Quickdraw
kindlyviking 16y ago
Excessive use of font bolding in this article.
- BPO_Quickdraw 16y ago
  For people in a hurry. :) You can just skim the bold sections and get the important points of the post. I tend to write way more than anyone would really want to sit down and read haha - Quickdraw
  - kindlyviking 16y ago
    Fair enough :)

98 points by cal5k 16y ago

cal5k 16y ago

Welp, looks like I crashed their server... Update: There it goes!

haha awesome, you blew my server up. Upgrading now but it'll take a couple days they say. Anyone reading: that's my game development blog, I'm starting an iPhone game dev studio and documenting the progress of starting it up and making the first game, day by day! Check it out if you're interested in game dev and feel free to ask any questions! - Quickdraw

jordanroher 16y ago
I'm very interested in iPhone game development. I'm working on a title for PC/Xbox based on the XNA framework and finding it fairly easy to use. Is there anything like that for the iPhone? Any good place to find a comparison of frameworks? I'm not averse to coding interactions by hand (trying to make a 2D RPG, not a platformer, so Torque isn't appropriate), but I can't make sense of the options.
- timknauf 16y ago
  Like Alex, I can heartily recommend Cocos2D: http://www.cocos2d-iphone.org/ http://www.cocos2d-iphone.org/ We made a Monkey Island-style point-and-click (well, point-and-tap) adventure. It was a fairly complex project, but Cocos always felt empowering rather than limiting. Happy to answer any questions! About the game: http://launchingpadgames.com/games/scarlett/ http://launchingpadgames.com/games/scarlett/
- yome42 16y ago
  I suggest you look into Unity 3D. It's easy to make 2D stuff with it, even if it's primarily a 3D engine. The basic version is free, so you can use that for development. When your game is ready to ship, you can upgrade your license to an iOS one and then convert and ship your game with it. If you want to stick with XNA, there's an interesting project to port XNA to iOS platforms (http://rockethub.com/projects/752-exen-xna-for-iphone-android-and-silverlight http://rockethub.com/projects/752-exen-xna-for-iphone-androi...), and there's XNATouch too. I haven't looked into those yet, but if you complete your game on XNA, by the time you'll be done there might be a viable solution to easily port your game to iOS.
- stonemetal 16y ago
  I know little or nothing about iPhone programming. I figured I would plug a friend of mine's startup since it seems like just what you are looking for. (note: Not connected in any way other than having gone to high school with the founder.) http://gamesalad.com/ http://gamesalad.com/
- BPO_Quickdraw 16y ago
  I'm going to be using Cocos2d, but I honestly couldn't give you many details on it because I'm going to be out-sourcing to a programmer to do that part. I'm making 2d games and Cocos2d is supposed to make it a lot easier to juggle sprites and everything...but we'll see if I can break it, hehe - Quickdraw
- alex_c 16y ago
  I've used Cocos2D, and it was great - I've been meaning to write some posts about it, haven't got around to it yet. I haven't used other frameworks, so I can't compare, but for a simple 2D sprite game Cocos2D was a great way to hit the ground running. Video of me making the game: http://www.youtube.com/watch?v=se2mi_kfUko http://www.youtube.com/watch?v=se2mi_kfUko I'm far from an expert, but if you have any questions I'll try to answer them.
- jon914 16y ago
  Cocos2D is the most popular 2D iPhone game framework. An alternative, if you're used to the Flash/ActionScript way of doing things, is Sparrow. You may also find that if you're doing an action/physics game in the future, Box2D will inevitably be necessary. If you're looking for a GUI as opposed to a programming API, in addition to the fine options above, my startup (http://www.stencyl.com http://www.stencyl.com) also does this and is based on Sparrow (and Flash for exporting to the web). However, I'll be realistic and say that if you're making an RPG, you'll find it much easier to build it by hand.
  - timknauf 16y ago
    Stencyl looks like a lot of fun, kudos! And am I right that some of the linked games have even managed to score themselves sponsorship?
    - jon914 16y ago
      Thanks! The Balls in Space game scored several sponsorships that have collectively gotten it into the 4 figures range, which is pretty good by Flash standards.
- cleshmd 16y ago
  I'm working on a basic Cocos2d tutorial, written for beginners: http://www.coconutcollege.net http://www.coconutcollege.net Check it out, and let me know if you run into any problems. It's not finished yet, but the first four courses will give you a good foundation. I should have the next two courses posted within a week or so.

iamwil 16y ago

To me, the biggest lesson I've learn from game programming tips and tricks was to not model the world exactly. Just model it enough to trick the eye. My first inclination was, "but of course you need the splats where the rain drop line ends! How would it make sense otherwise?" But it's not until you see the video that you get that, hey that worked well enough. I imagine it's applicable to other realms of programming as well, like web programming. We should question if we really need something on the page, or if there's just some way to fake it or get away with doing less. Or same with scheduling notifications to be delivered. Does it really need to be real-time? Or can we just cheat a little since the tolerance is much higher?

jrockway 16y ago
Or can we just cheat a little since the tolerance is much higher? Sure, we call this caching. Imagine you have a blog with comments. You can generate the page for each user when he wants it, and then it's a real view onto the data that you have available. Or, you can generate it once a second and just serve the stale version -- not much can happen in one second. Making that compromise is the difference between handling 10 requests a second and 10,000 requests a second. Almost always a good tradeoff. (Doesn't NYTimes do this?)
- ElbertF 16y ago
  I've noticed this on Reddit. When you submit a comment it's inserted into the page with a bit of JavaScript but when you refresh the page it's gone. Refresh the page again after a few seconds and it's there.
- iamwil 16y ago
  My point was that asking the question in the first place is good practice to avoid doing work you don't need to, rather than the actual specific examples I made up on the spot. But thanks for the example!
Periodic 16y ago
A good example is probably progressive enhancement with javascript. You create a page that is just HTML, CSS, and images and send that to the user, at the end you specify the scripts that load and add all the functionality and enhance the page. For most users they won't even notice that the javascript isn't loaded for 0.5 seconds. If they do click in that small window of non-operability, they get a little confused and click again, by which time it works. Most people won't even notice though. This can be used to add fancy animations, add an actual embedded video over an image of an empty video player, add comments to the end of a blog post via AJAX. Most people won't even realize you're giving them static content initially.

Luc 16y ago

Or you could use color cycling: http://www.effectgames.com/demos/canvascycle/?sound=0 http://www.effectgames.com/demos/canvascycle/?sound=0 (choose 'Highland Ruins - Rain' and show the options to see the palette). Crazy in these modern times, of course.

jjcm 16y ago
Good for backgrounds, but it can't be used effectively if you need rain to appear in front of another layer (in this case, the character sprite).
corysama 16y ago
Those color cycling demos are amazing. Unfortunately, color cycling has fallen out of practice both because it is too hard to teach artists and because the double-lookup-per-pixel is memory bandwidth intensive on modern hardware (old systems had dedicated hardware to support this).

BPO_Quickdraw 16y ago

iamwil: "My first inclination was, "but of course you need the splats where the rain drop line ends! How would it make sense otherwise?"" Exactly, I think that's default programmer-logic. "If there's a drop, it must have a splat." I used to do some programming but I'm more of an artist than a progger so I figure writing about little artsy tricks like that might help other devs out. It can be rough trying to fit cool stuff onto tiny phones haha Luc: I'm a pixel artist at heart so I love color cycling, but ya, appearing in front of another layer blows it up. Also these days I don't think iPhone games use palettes much...I know older cel phones needed them, but for iPhone I seem to be able to get away with just using big ol' .PNGs with no palettes (which rules, 'cause I can get anti-aliased edges). - Quickdraw

relix 16y ago
It's also interesting just from a project management point of view, or anyone doing a startup, imo. Good blog!
- BPO_Quickdraw 16y ago
  Thanks! I'm trying to cover the stuff that surrounds game dev, managing my time, keeping track of expenses, marketing the game, etc. 'cause I think that stuff gets glossed over a lot. Like I'll be posting my financials for the month soon, even though I know they're going to be negative since my game isn't out yet haha But it's the principle of the thing, getting into the habit of keeping accurate records. Glad you like the blog! I'm shooting for daily-esque updates so pop in again in a couple days! - Quickdraw

kindlyviking 16y ago

Excessive use of font bolding in this article.

BPO_Quickdraw 16y ago
For people in a hurry. :) You can just skim the bold sections and get the important points of the post. I tend to write way more than anyone would really want to sit down and read haha - Quickdraw
- kindlyviking 16y ago
  Fair enough :)