Today i wanted to dive into something other than web development and design, most of us in today era game, whether we play them or watch them, the concept is rather the same, we find them interesting, I thought it would be neat to share somethings that go back to the very basics of coding and gaming all together. Coding a game just using HTML, while some games need more than one language, there’s a way to get by with just using the 3 basics, which are HTML, CSS, and Javascript. Today I’ll be showing tutorials along with listing some of the top games to create with HTML. (with and without JavaScript).
Let’s start with a basic HMTL game tutorial with a basic game we all know called snake, yes snake, but from this we work our way towards better games that’ll be listed further down, it’s simple but with some patience and coding knowledge it can be done.
Let’s talk about SPRITES! sprites are little gif animations which you can use in your game content for FREE! (given permission)
I’ll be listing some sites for those too.
Free Sprites
The following are websites that provide Sprites and similar content.
16 Sites Featuring Free Game Graphics for Game Developers
Overview:
- Kenney.nl
- OpenGameArt.org
- Untamed.wild-refuge.net
- Crateboy.itch.io
- HasGraphics.com
- Gameart2d.com
- Wigdetworx.com
- GlitchtheGame.com
- Dumbanex.com
- Reinerstilesets.de
- Sharecg.com
- Roenica.com
- Blogoscoped.com
- Lostgarden.com
- Subtlepatterns.com
- Openclipart.org
1. Kenney.nl
Kenney.nl is based in the Netherlands and is producing some fantastic art for game developers. There are some really cool free assets on this site which have been made part of the public domain, meaning you can do anything you want with them. The free game graphics can be browsed according to their category so you can find your game art really quickly. Kenney.nl also makes sounds and game sources available for free which could also be pretty useful for some readers. On top of all that, it’s a really beautifully designed site.
2. OpenGameArt.org
This website has to be first on anyone’s list of places to go in search of free game graphics.OpenGameArt.org is a large site offering all kinds of graphics and even has a selection of sounds for game devs to use. It can be browsed according to category and all of the art is clearly displayed. It has a huge selection of 2D and 3D elements and is also home to a very active forum. The site is constantly being updated with content from its users and is ranked so you can find the most popular graphics of the month or go in search of some lesser used assets.
3. Untamed.wild-refuge.net
This site is a huge resource of free game graphics for anyone looking to make their own RPG. Untamed.wild-refuge.net is home to Sithjester’s RMXP resources, a collection of image assets that are free to download and use how you like. The highlight of this site is the giant collection of 2D game sprites that you can browse all on one page. Clicking on a character you like brings you to a webpage where you can download a .png of the character from all angles, perfect for making your own sprites!
4. Crateboy.itch.io
This collection of image and sound assets is brought to you by Crateboy. The best part of this collection is the 8 bit city resource files. Crateboy advertises that there will be enough 16×16 tiles for you to build an entire city and there really are. This is some really great work and all Crateboy asks is that you credit him in your game. If you end up using these tiles a lot he also accepts a ‘pay what you like’ option. The use of colour tone in this artwork really makes it stand out from the crowd and could really help to define the look of your project.
5. HasGraphics.com
HasGraphics.com is a handy little site, filled with a variety of sprites and graphics. Check out the free sprites category to get started and find something to brighten up your next mobile game. As usual, make sure to check the licensing of any assets you want to use in your game!
6. Gameart2d.com
Gameart2d.com is home to some amazing image assets. This website is run by Zuhira Alfitra a.k.a pzUH. He’s an Indonesian game developer with a real eye for great game graphics. The majority of the assets on this site are for sale but there is a freebies section where you’ll find more images like those featured above. As well as these sprites, there is also a selection of tilesets, GUI assets and many more assorted images for you to choose from. They’re also completely free.
7. Wigdetworx.com
If you need some sprites for your game, you should check out this website. Wigdetworx.com has made a great collection of static and animated sprites available for free in the SpriteLib project. While it’s not the biggest collection of sprites in this list, there is definitely something here for everyone. The pack includes a plethora of landscapes and characters that would look at home in any 2d game. All it takes is a click to download, so why not browse the assets yourself and get some free game graphics.
8. Glitchthegame.com
Some readers will know Glitch as the web-based, collaborative, massively multiplayer game. Having been shut down in 2012 after two years online, the game’s developers have decided to release the game’s artwork into the public domain. There are over 10,000 assets to download and they’re all amazing quality. If you already like the look of these graphics, you’re in luck as you can download the entire package with one click and peruse them for yourself offline.
9. Dumbanex.com
Dumbanex.com is another site that has made some really cool artwork available to game developers. It’s all free to use as long as you credit them somewhere in your game. There’s a really rich collection of sprites and tilesets on this site and a lot of them can be downloaded quickly in .zip format. This site is run by Brent Anderson, who works professionally as a freelance game designer and developer. These free game graphics would be perfect for a mobile sidescroller or platformer.
10. Reinerstilesets.de
This website is run by Reiner “Tiles” Prokein and is brimming with free assets for game developers. Reiner himself is a hobby game developer who has produced a number of games. When he started out developing he couldn’t find the graphics he wanted, so he started making them himself. Ever since then he’s been sharing them online and they’re all available to you to use for free. He’s got a great selection of 2D and 3D images as well as some brilliant tutorials.
11. Sharecg.com
Sharecg.com is primarily a site for artists to upload and share their work. It’s really worth a look if you’re after 3D or 2D art or if you want to find an artist to work with on some new ideas. The art is licensed under different terms so it’s important to check and make sure it can be used freely before you incorporate it into your games. There’s some really great indie art showcased on this site and you can also find tutorials, audio and software to use.
12. Roenica.com
This is a cool site for indie and casual game developers and they have a nice collection of free game graphics for devs. Their assets are categorized according to game theme and can be downloaded as .zip files. The artwork on this site has been made available by a variety of artists so license types may vary but roenica.com states that all details should be clarified within the .zip files. Roenica hosts both 2D and 3D graphics so there should be something here for everyone.
13. Blogoscoped.com
Now it’s time for something completely different. The next site on our list is actually a blog about Google and everything related to Google. So then why is it included on our list? It’s included because in 2006 blog contributor, Philip Lenssen, posted a collection of almost 700 game spritesthat you can use under a Creative Commons License. The sprites are all character avatars from a game he was working on called ‘Last Guardian’. If you’re working on something that looks similar, then you definitely should check his stuff out.
14. Lostgarden.com
Lostgarden.com is a little bit different to most of the other sites featured in this article. It’s the blog of Daniel Cook, a game designer working for Spry Fox. Daniel dedicates a section of his blog to game art and likes to update it periodically with free game art for developers. This site is also home to some great essays on game design in general and it would definitely be worth a look, if not to gain the insight of an industry professional, then purely for interest’s sake.
15. Subtlepatterns.com
Subtlepatterns.com offers some of the most beautiful work out of all the websites listed in this article. This website is run by Atle Mo, who designs and curates patterns for the site. He has made all of these wonderful patterns available to use under a creative commons license, so all you have to do is provide him with some credit in exchange for using his patterns. There is a lot of content on this site and it’s all of a very high standard. These patterns would make great UI backgrounds or could even be used in your game levels.
16. Openclipart.org
The great thing about this website is that absolutely every piece of art that they share is completely free to use in every way. Openclipart.org is a great community dedicated to sharing free art to everyone that wants it. But let’s not forget the art itself. There’s some really great looking clipart on this site and a lot of it would definitely look at home in your next 2D game. Another great feature of this website is that you can make requests of the users and get tailor made clipart.
How to Use Static Images and Sprites in V-Play
All of these free graphics won’t be much use unless you know how to use them in your game!
With V-Play, adding both Static Images and Sprites to your game is as simple as ever.
Sprites can be added to your game using V-Play’s SpriteSequenceVPlay element. This is a great element if you have a game entity that can have multiple exclusive states like walking and jumping.
Below is an example of the SpriteSequenceVPlay Element at work.
import VPlay 2.0
import QtQuick 2.0
GameWindow {
Scene {
// GameWindow & Scene allow multi-resolution support
width: 480
height: 320
SpriteSequenceVPlay {
id: girlAnimation
property bool pointingRight: true // set this property to true to make the character point right
mirrorX: pointingRight
anchors.centerIn: parent // center it in the screen
width: 100 // width of the image in the game
height: 100 // height of the image in the game
defaultSource: "../assets/shootingGirl.png" // path to the spritesheet file
SpriteVPlay {
name: "shootAnimation" // you can switch animations by name later
frameCount: 3 // number of frames in the animation
frameRate: 10 // how fast animation plays
frameWidth: 640 // width of 1 frame
frameHeight: 540 // height of 1 frame
}
}
}
}This animates our sprite like so:
If you’d just like to insert a static image, a simple Qt Image Element should do the trick.
The following code will show our image frozen in place:
import VPlay 2.0
import QtQuick 2.0
GameWindow {
Scene {
Image {
id: shootingGirl
anchors.centerIn: parent
width: 100 // width of the image in the game
height: 100 // height of the image in the game
source: "../assets/shootingGirlOneFrame.png" // path to the image
}
}
}
Just like this:
And there you have it. If you know of any other great free game graphics for game devs, let us know in the comments section. And don’t forget to like, share or retweet if you think one of your friends would be interested in this list too!
Check out V-Play highlights:
More Posts like This
References
- http://kenney.nl/
- http://opengameart.org/
- http://untamed.wild-refuge.net/rpgxp.php
- http://crateboy.itch.io/crateboy-2007-2014
- http://hasgraphics.com/top-down-tower-defense-sprites-bunnies-vs-badgers/
- http://www.gameart2d.com/freebies.html
- http://www.widgetworx.com/spritelib/
- http://www.glitchthegame.com/public-domain-game-art
- http://www.dumbmanex.com/bynd_freestuff.html
- http://www.reinerstilesets.de/
- http://www.sharecg.com/
- http://www.roencia.com/index.html
- http://blogoscoped.com/archive/2006-08-08-n51.html
- http://www.lostgarden.com/search/label/free%20game%20graphics
- http://subtlepatterns.com/
- https://openclipart.org/
10 basic yet cool HTML games
A list of pretty cool games, make sure to check out the source to understand how they work.
1. The Convergence
Control two characters at the same time and try to let them meet. The hard part is that they walk in opposite directions, so you’ll need some coordination to open the doors. Play!
2. Sketch out
Defend your planet against incoming meteorites. Fight back and bounce the projectiles straight into the enemy sphere. Play!
3. Free Rider HD
Addicting simple game where you race with a stick figure in levels designed by other users. Play!
4. Sinkhole
Your hero has fallen into a sinkhole and has a broken arm. You have to try to get him out of the sinkhole before his torche’s batteries run out. Play!
5. Game Boy emulator
Not exactly a game, but a game emulator that gives you access to old games that you’ve probably missed. Time to replay some Zelda, Megaman, Mario, Kirby,… Play!
6. Project Blaze Zero
A shoot-em-up with cool isometric 3D graphics. Pretty intense if you ask me. Play!
7. Geometry Wars
A game created by Kevin Roast. Fly with your geometric figure and shoot around. Play!
8. Command & Conquer
This is a recreation of the original Command and Conquer, a popular real time strategy game. Play!
9. Frozen Defence 2
A pretty entertaining tower defence game. Play!
10. zType
My favorite game in the list and the one with the most creative gameplay (in my opinion). Type the words that are coming down to shoot them. Best way to practice your typing. Play!
Building HTML5 games
Enough inspiration, now it’s time to get started with what’s under the hood and how to proceed to create a game.
Physics for lazy game developers
For those who, like me, have been sleeping through physics classes and forgot pretty much everything about basic physics principles. This page is a good reminder about what you need to know in physics for game development.
A simple game with HTML5 Canvas by Michal Budzynski
A great serie of tutorials that walks you through the creation of a simple Doodle Jump clone.
5 tips for your HTML5 games
A presentation by Ernesto Jimenez to make you aware of a few important things you’ll need to know when creating HTML5 games. The presentation on Slideshare.
Developing Your First HTML5 Game
A serie of tutorials on Script Tutorials, good for beginners.
Some tools to help you build your HTML5 game
Why bother recreating what’s been done well before you? These tools should help you to create your HTML5 games faster.
Construct
This is the tool you’ll need if you don’t know anything about javascript or HTML5 and still want to create HTML5 games. In short, a tool for designers to create games. They have free and paid versions of the tool.
Jukebox by Zynga
The Jukebox is a component for playing sounds and music with the usage of sprites with a special focus on performance and cross-device deployment. Download on Github.
Spaceport
A tool to build multi-platform optimized HTML5 games. They also let you import your old flash games. Try it.
Game engines table on github
Great resource, a huge list of HTML5 frameworks and javascript engines. Check it out.
GameSalad creator
A drag-and-drop tool to create your HTML5 games easily. And it’s free!
Mara's Tech-insights 