Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length

Advanced search

1380153 Posts in 65784 Topics- by 58173 Members - Latest Member: ilyatishchenko

August 04, 2020, 05:46:18 AM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsDeveloperTechnical (Moderator: ThemsAllTook)Making a game with 1 pixel
Pages: [1]
Author Topic: Making a game with 1 pixel  (Read 1575 times)
Level 2

View Profile
« on: July 22, 2019, 05:04:31 AM »

The goal of this post is to answer a comment that I get quite frequently when I show my game: Nice graphics, how did you did it ? I hope that it will be of interest to some of you Smiley

Please let me know if it's just incoherent babbling. I'm not the best at explaining stuff  Shrug

I will focus on my less common use of particles: I use them to make game objects. I won't go into details about the particles that I use for explosions

Before I dive in, a word about why I did it this way: I not good at drawing, or modeling, or sculpting.. But I can code, and I like to code.

So I've done everything trough code. Here is how:

Smart particles

We will start with a simple example, the paddle:

My paddle is composed the same way I do most objects: with 'smart particles'.

Each of these is a bag of data onto which the same behavior is applied.

If I say that the game as 1 pixel, that's because each particle will draw a 1x1 white pixel and apply a tint to it's basic shader

A particle

In the paddle example, is a 3 by 8 grid of particles.


Each particles has an array of 7 colors and an index representing which color to pick from this array.

The way the animation here work is by changing this index each frame

That's how you would also get this "shock wave" effect when a ball hits the paddle: Sort the particles in regard to their distance of the point of impact, change the color index of the closest for one or two frames, and remove it from the list.

I have a gameplay mechanic that goes like this: When a ball hits the paddle, the paddle becomes hotter. When it's hot enough, it will shoot. So I also use the color index to make the paddle look 'hot'


They also have other attributes such as the position they need to be, and their current offset from this position.

When I need to move them, I always tell them where I want them to go, and let them go there "on their own".

In the case of the paddle, the further they are, the stronger they get pulled towards their destination. It makes for a snappy response, and a smooth arrival.

Once you've added this parameter, you can really make your particles come alive:

   - When the paddle gets it, make the columns closer to the impact go down the most. An instant Y offset will provide instant feedback and smooth recovery. You can also add a bit of randomness spread on the lines to make it feel even more 'organic'
   - When it moves, make the top react of little bit less, to give a 'jello' feeling to this 3 by 8 grid
   - When the player tap the screen, make every particle move away from the center a bit. Like a small explosion, or breathing.
   - Offset a single particle, sometimes, to show cracks in the structure
   - Reverse to force to make it explode when the player dies
   - Make the particle appear of screen and use this cool built in transition effect
   - Add an angle to get varied animations
   - When an object changes color, change the color array of each particle one by one to get a transition
   - Have left over particles when a block dies that only light up when a ball is near

A good example of those 'built in' transitions is the text. When a text object switch character, I will reuse as much particles of the previous char as possible and simply reassign them a new position.

Random tidbits

   - Use patterns. Like in most cases, they will make your blobs of particles feel more real. A few examples that I use: only move in 8 directions, color based animations, no angles, same color arrays, same sizes
   - Not so random: in most cases, a gaussian distribution for your random will make it feel more realistic
   - Cheat! I said that I am using a 1x1 white pixel, actually that's not true. To give a fake 3D effect, a lot of particles will use an image with a fake 3D drawn in gray
   - Layers: sometimes, it's useful to draw over something. That's how the bright cracks in the blocks are made. It's a very bright background that will show when a block particle moves slightly

That's it now  Gentleman

A link to the game for those interested: https://play.google.com/store/apps/details?id=be.particulitis.twaddlepaddle&hl=en


Level 0

View Profile
« Reply #1 on: July 22, 2019, 08:39:36 AM »

Hats off for that clock man - totally nutty.
Level 4


View Profile WWW
« Reply #2 on: July 22, 2019, 08:42:49 AM »

That is actually a pretty cool system.

Level 2

View Profile
« Reply #3 on: July 24, 2019, 10:10:55 AM »

Thanks ! I'm glad you like it Smiley

Level 0

View Profile
« Reply #4 on: August 28, 2019, 12:44:26 PM »

WOW  Beer! Amazing !!!

For the players.

You will find me playing TLOZ.
Pages: [1]
Jump to:  

Theme orange-lt created by panic