Wolfire Games Forums

I want to make a 2D JavaScript game, but I've run into a roadblock

I don't know how to make a model (or sprite for that matter)

The coding comes easy, a bit slow, but easy nonetheless. But I really can't make any progress until I can make any good models and background (???) stuff

I don't what program I should use, I have paint and I want to use Photoshop but I don't know which is best.

Anyone know any good 2D modeling programs compatible with HTML5?

For sprites, I would just use something like PaintDotNet or maybe find a specific program for sprite work. PaintDotNet has always served my purposes though.
Another method that is fun if you're familiar with Blender is to use a 3D model, animate it and then render out the sprites from that. Comes out looking pretty good and is way faster, at least for me, than hand animating sprites. Of course, nothing beats a good sprite artist.
Not sure about 2D models. I imagine one could program something for that. Java handles graphics on it's own, I bet you could program an array of vertices and then fill them in with color to make 2D models. Would be a fair bit of work, but it would definitely give you some good experience.

Whew thank you

The sprites aren't complex would Photoshop work?

as for animations:

...Crap, didn't think about that...

A game doesn't need animation, or complicated graphics. Do you want to program games, or make fun games, or make alone without training what is usually done by groups of professionals (= cool, fun, balanced, great-looking games with good music and feeling and theme)?

If it's the first, then ignore the graphics. Use a static sprite of a pixel dude, use squares, use spheres, and focus on learning programming. There's lots to learn there, and you don't need to do graphics to learn it. Here are about 150 games made in 7 days for a challenge - and most of them don't use any graphics you couldn't make!

See the videos here


If you want to do the second, think more about what you can do, before jumping into the deep end. Design a game - weight in various options, compare the pros and cons. A flamethrower is always cool, but if it's too good, will the game still be fun? If the flamethrower is great but the pistol is not, is it better to change the pistol, or the flamethrower? And if the flamethrower is fun and the reworked six-shooter revolver (that instakills anyone it hits but only has six bullets per level) is fun, then it doesn't matter what they LOOK like.

For good examples of really simple-looking games that are fun, look into Liero.
http://www.liero.be/



If you want the third, you need artists. Or, at least, art made by artists. And the good news is, some artists put their art on OpenGameArt.org so you can use it! That said, making a good game is hard, and you won't get there just by having good art (and music, and sound effects, etc).
http://opengameart.org/

If you need to do spritesheets in photoshop, where X number of images are positioned evenly, there are several ways to do it.

If they're just random sprites and exact positioning isn't required, go to Edit - Preferences - Grids and Guides, and change Grid to be every Y pixels, with 1 division. Then enable Grid (View - Show - Grid), and you should see perfect squares overlayed on top of your image.

If the sprites are animated, doing it by hand without introducing bugs is boring. In that case, you can use this Photoshop script:
http://www.garagegames.com/community/blogs/view/11527

I did the first one. While I was stationed in 29 Palms, I didn't have time to do any graphics stuff, so I started a project I'd wanted to do since I very first learned C++. Text-based games are fuckin rad.

Endoperez wrote:If you need to do spritesheets in photoshop, where X number of images are positioned evenly, there are several ways to do it.

If they're just random sprites and exact positioning isn't required, go to Edit - Preferences - Grids and Guides, and change Grid to be every Y pixels, with 1 division. Then enable Grid (View - Show - Grid), and you should see perfect squares overlayed on top of your image.

If the sprites are animated, doing it by hand without introducing bugs is boring. In that case, you can use this Photoshop script:
http://www.garagegames.com/community/blogs/view/11527

Thank you!