Build a game like Sproing with Flash

This tutorial is guest blogged by TechnoMono and I am happy I got the permission to post it on my blog. TechnoMono hosts more Flash and Gimp tutorials, so don’t forget to take a look to this blog.

We can define Sproing as a “throw a ball in some way” game, and the tutorial is very well explained. Let’s see it:

—————————

Sproing is a very simple and intuitive Flash game. It’s also rather addictive. The object of the game is to destroy green orbs by hitting them hard enough with a blue orb which is connected to the mouse via a spring force. You’ll have to play the game to see what I mean. In this tutorial I’m going to show you how to make the blue orb spring to the mouse. Obviously, I wont show you how to make the complete game. The demo below shows exactly what we’ll be making:

We’ll be making the demo with ActionScript 3.0, which means you’ll need Flash CS3, Flex Builder or the free Flex SDK. However, I’ll explain how to use the code specifically with Flash CS3. I assume you have at least a basic working knowledge of ActionScript 3.0. If you have experience with ActionScript 2.0, then you shouldn’t find it too difficult to follow through. Read more

Create a survival horror game in Flash tutorial – part 1

This is the beginning of a new and very funny tutorial serial that introduce some concepts I’ve never seen before in a Flash game.

We’ll learn how to create the engine for a survival horror game.

From Wikipedia: Survival horror is a video game genre in which the player has to survive against often undead or otherwise supernatural enemies, typically in claustrophobic environments and from a third-person perspective.

I am going to create a very dark, claustrophobic ambient. This tutorial is inspired by a spanish tutorial I found here, but I am going beyond the concepts explained there.

Before you continue, I suggest you to read Create a flash game like Security – part 1 tutorial.

Now, as usual, I introduce the objects involved in this project

Survival horror

environment: the obscure room where you found yourself abandoned with no hope to survive

player: the poor victim of evil vampires from outer space

ground: the ground where you’ll find death (note by myself: SHUT UP!!!)

ground.png: the texture mapping the ground

And now, in the first and only frame of our main scene, the actionscript: Read more

Complete Javascript popup opener

Opening popups in JS is simple, but sometimes in the same page we need to open popups with different features. There are several scripts in the net doing this task but, as usual, none of them seemed to fit my needs

I decided to code a complete javascript popup opener in order to have one function that I can use in any situation.

These are the customizable parameters of your popup:

url: the string representing the url of the page you want to open in the popup. Default value: this page.

width: popup width, in pixels. If you enter a value between 0 and 1, it will be parsed as a % of screen width. For example, if you enter 0.5, it will be parsed as 50% of screen width. Default value: half of the screen width.

height: popup height, in pixels. If you enter a value between 0 and 1, it will be parsed as a % of screen height. For example, if you enter 0.5, it will be parsed as 50% of screen height. Default value: half of the screen height.

xpos: x position of the upper left corner of the popup. It can be an integer or “left” or “right”. If you enter “left” your popup will appear in the leftmost part of the screen, if you enter “right” your popup will appear in the rightmost part of the screen. Default value: the one that will center the popup horizontally Read more

Customizing WordPress header

October 10th, 2007 update: part 2 is online

Since I installed WordPress, I always wanted to make a theme on my own, but I've never had the time to learn how to do it.

In these last days, when I installed the Torn theme, I started playing and messing with WP files, and now I think I can tell you something about WordPress header.

It's just the header, I know, but it's a good start to a brand new theme.

To change the header you have to edit the header.php file you can find in your wp-content/themes/yourtheme directory

According to WP Codex the default WP theme is made in this way:

HTML:
  1. <div id="header">
  2.  <div id="headerimg">
  3.    <h1>
  4.     <a href="<?php echo get_settings('home'); ?>">
  5.        <?php bloginfo('name'); ?></a>
  6.    </h1>
  7.      <div class="description">
  8.        <?php bloginfo('description'); ?>
  9.      </div>

Just like the Kubrick theme, I presume. Read more

Prototype of a game like Gem Sweeper with Flash

You all may know the casual game called Gem Sweeper, an evolution of the famous Minesweeper game included with early Windows distributions.

Gem Sweeper

If you don't know the game already, play a bit for free with the trial version to know what I am going to reproduce with this simple Flash prototype.

The mechanics of the game can be coded in less than 100 lines... and if you add some cute graphics and some features that will distinguish this prototype from the original game, maybe you can find it useful to join the Armor Games competition.

Let's examine the four (!) objects involved in this game: Read more

WordPress upgrade and new theme

Today finally I decided to upgrade my WP engine to WordPress 2.2.3 and abandon the TripleK2 theme.

Since I installed the TK2 I was forced to miss all updates because the theme wasn't as flexible as it seemed, in my opinion.

The new theme is based on Torn 2.0 by Solostream but I am slighty changing and experimenting with it in order to fit it to my needs. At the time I am writing it's far to be finished but I need some more time to complete all the features I have in my mind.

Once finished, I'll publish some hints about theme configuration and customization.

But the main reason I changed the look of the site is that I wanted to focus it to contents.

Contents made this site a "must read" (well... almost) for developers so contents have to be the focus of all.

So now contents are on the left column, while other features are grouped in two columns to the right. Many readers complained about the old 3 columns style with content in the center surrounded by crap, so now the content is separated from the rest.

Another improvement is I removed the adsense injections in the posts. I did not like how adsense ads broke the post, so now they are on sidebars, and I plan to remove adsense at all very soon.

Then I have to mention the improved readability of the script codes, that now look more like a script and there is an option to display them in plain text in order to make it easier for you to cut and paste to your projects.

Last but not least, the content columns is 30 pixels wider than before :)

There is still lot of work to do before the theme is finished, but I would like to hear your opinion (and bug reportings) about these major changes.

Javascript Sokoban game script

I've always been addicted to logic games and Sokoban is one of them.

From Wikipedia: Sokoban (warehouse keeper) is a transport puzzle in which the player pushes boxes around a maze, viewed from above, and tries to put them in designated locations. Only one box may be pushed at a time, not two, and boxes cannot be pulled. As the puzzle would be extremely difficult to create physically, it is usually implemented as a video game.

In some cases Javascript is not the ideal language to code puzzle games, because the player can read the code and have a clue about the puzzle. Just imagine a Minesweeper game in Javascript... a brief look at the code and you'll know where the bombs are.

In Sokoban, reading the code is useless because you don't play in a static level, but level changes as you move your player pushing blocks.

At this time the script is very essential, and contains just one level, but I am going to push (yes, talking about sokoban, I obviously "push") the script very far away, including level editors, leagues and even more.

Every single line of the script will be explained, as usual, meanwhile you can watch the code from your browser.

Can you solve the level? Can you tell me where did I rip the main sprite?

The best Flash game creation tutorial sites

In this time full of Flash game design competitions I know every hint could lead you to make a better game and have one more change to grab some bucks just doing what you like to to.

Where to find good Flash game tutorials?

Even if I submit my tuts to all biggest tutorial directories, I don't like the way they show results. Too much advertising, too much delay between submission and publishing... so I decided to make a list, based on my personal browsing, of web sites that hosts Flash game tutorials.

In this list you will find only developers web sites, and you won't find any search engine. Bookmarking these sites or subscribing to their feeds is better, in my opinion, than searching on that so-called directories... until someone (who? me) will make a tuts dir a bit more user oriented.

This is the list, probably I forgot some important sites, so I am expecting some comments with your flash game tutorial bookmarks.

  1. oman3d.com
  2. flashninjaclan.com
  3. technomono.com
  4. 0tutor.com
  5. awestyproductions.com
  6. swfspot.com
  7. flash-game-design.com
  8. tu-world.com
  9. jbench.co.uk
  10. lukamaras.com
  11. pixelhivedesign.com
  12. learnflash.com
  13. lashf.com
  14. kirupa.com
  15. flashvalley.com
  16. eapix.com
  17. m9media.com.au
  18. flashsandbox.com
  19. how2flash.com
  20. tonypa.pri.ee
  21. strille.net
  22. neuroproductions.be
  23. harveycartel.org
  24. johanvanmol.org
  25. footloosemoose.com

Happy studying, and help me keeping the list updated.

Armor Gaming Challenge #6

The famous Flash games site Armor Games is hosting a Flash game design competition (fairy more than one to be honest) that will end at the end of this year. And they are paying good cash prizes to the winners!

Armor Games

Let's examine all the competitions:

Armor Gaming Challenge #6: create the ultimate Flash game, no themes to follow, no specs just create an awesome game and grab the $5,000 Armor Games is giving away for the 1st place. Prizes go up to the 5th place with $750. Deadline: December 31st, 2007.

Halloween Contest: create a game themed as "Halloween Legends". Top 3 games will be rewarded with $1,000 each.
Deadline: October 25th

ThanksGiving Contest: make a game themed as "Pilgrims and Indians". Top 3 games will be rewarded with $1,000 each.
Deadline: November 15th

Christmas Contest: make a game with this theme "Reindeer Games or Santas Workshop". Top 3 games will be rewarded with $1,000 each.
Deadline: December 20th

Moreover, there are several cash bonuses waiting for you: $100 if your game makes the frontpage of NewGrounds, $200 every 100,000 views your game gests on NG (up to $4,000), $250 if your game gets daily 1st on Newgrounds, $500 every month your game remains in the NG top 50 (up to $6,000), and $1,000 for the 3 submissions that get the most views in the months of September, October and November.

A really good opportunity to prove your Flash skills and earn a lot of money.

Guidelines are really simple: Create an ORIGINAL game, include AG logo and link, submit them to NG and make them receive at least 1,000 views (but we know a good game receives tons of views).

More information at the contest page.

What are you waiting for? Read and learn my tutorials and go grabbing as much cash as you can!

Controlling a ball like in Flash Elasticity game tutorial

Due to the upcoming deadline of the Flash Game Design Competition with "Ball Phyiscs" theme, here it is another ball physics tutorial.

I was looking for some good ball physics concepts and I stumbled upon Elasticity, a nice game with an interesting way to controll the ball.

Elasticity

Why don't we try to control a ball like in this game? Let's try to understand how does it work: There is a dot that you move with the mouse, a black circle that tries to follow the dot, a black square that represents the movement limit of the black circle, and a ball that follows the black circle with an elastic effect (yes, play it some minutes before reading this tutorial because I realize the description sucks).

We are going to create a control system like this one in less than 40 lines, brackets and declarations included.

Before we start, let me introduce the movieclips with their links Read more

Posts