• entries
7
12
• views
1250

# Concept Functionality - Cell Stage

656 views

We're back with another update.

First a little recap of what happened this week:

We got our own banner and logo. Thanks go out logomakr.com where we made it.

Our website is now in develpoment. I got no idea when it will be online but we're working on it.

We started using Taiga.io to manage the development. It was frustraing to just have a good a idea or realised something that needed fixing/reworking in the concept and just forget about it or have it in an unorganised text file.

We got a new team member: Helices, who will function as a Biology Advisor to this project.

On that note: We are reworking the cell stage to be more realistic (as far as it doesn't sabotage fun gameplay in any way). We will do another entry on that once we deem it presentable.

On the actual development front:

The procedural meshes now work mostly as intended. They are being generated randomly from a basic cube shape with 26 vertices. For now that should work and adding more is basically just busywork if we really need more than that. When the player collides with this mesh all vertices with a distance to the player that's within a certain threshold will  move away from the player based on a vector from the player center to the vertex. This functionality is planned out so far but not implemented. Slicing the mesh will be the next, more complicated step.

Next thing I will be working on besides the website: The procedural environment. Since it would be pretty silly to just but up barriers around the map it should be infinite. To make this feasible all content has to be procedurally generated around the player. Logically it will be deleted again as soon as the player has a certain distance to it. This is true for all passive, floating objects, compound clouds and other cells. The distance should be high enough to feel natural for there to be change but also not so high that it affects the framerate.

The rework on the cell stage results in there being five new compounds replacing the previous ones: CO2, Oxygen, Amino Acids, Glucose and Lipids. The will definitely be differentiated by their color and maybe by the shape of the clouds if it is deemed useful for the player and doable for a programmer.

Interaction with other cells will be an interesting part. I don't want to unveil anything that will be part of the cell stage rework but I'll tell you everything we have for certain: To absorb other cells you simply have to move over them. If you have 30% more mass than they do - which is calculated via your organelles and your cytoplasm - you will absorb them and vice versa.

One thing we want to get sort of experimental with is sound. Despite the background music there will be no ingame sound effects. And even the background music will mostly consist of some atmospheric sounds. So far there was no time to prototype this but we will try to get to it soon but for now planning and coding has a higher priority.

That's it for this week's update. I'll leave you with a little insight into our code with which we generate the compound cloud mesh.

void ACompoundCloud_Cell::CreateCloudMesh()
{
//vertex buffer
//TArray<FVector> vertices;
//Front
vertices.Add(FVector(StaticMaths::RR(50.f, 150.f), StaticMaths::RR(-150.f,-50.f), 0.f));
vertices.Add(FVector(StaticMaths::RR(100.f, 200.f), 0.f, 0.f));
vertices.Add(FVector(StaticMaths::RR(50.f, 150.f), StaticMaths::RR(50.f, 150.f), 0.f));//5

//Left
//2
vertices.Add(FVector(-50.f, 50.f, -50.f)); //10
//5
vertices.Add(FVector(0.f, StaticMaths::RR(100.f, 200.f), 0.f));
vertices.Add(FVector(StaticMaths::RR(-150.f, -50.f), StaticMaths::RR(50.f, 150.f), 0.f));
//8

//Back
//10
vertices.Add(FVector(-50.f, 0.f, -50.f)); //15
//12
vertices.Add(FVector(StaticMaths::RR(-200.f, -100.f), 0.f, 0.f));
vertices.Add(FVector(StaticMaths::RR(-150.f, -50.f), StaticMaths::RR(-150.f, -50.f), 0.f));
//14

//Left
//16
//0
//18
vertices.Add(FVector(0.f, StaticMaths::RR(-200.f, -100.f), 0.f));
//3
//20
//6

//Bottom
//16
//15
//10
//21
//9
//0
//1
//2

//Top
//6
//7
//8
//23
vertices.Add(FVector(0.f, 0.f, 50.f)); //25
//13
//20
//19
//14

//index buffer
//+++++ Front
//Lower Left
//Lower Right
//Upper Left
//Upper Right

//+++++ Right
//Lower Left
//Lower Right
//Upper Left
//Upper Right

//+++++ Back
//Lower Left
//LowerRight
//Upper Left
//Upper Right

//+++++ Left
//Lower Left
//Lower Right
//Upper Left
//Upper Right

//+++++ Bottom
//Lower Left
//Lower Right
//Upper Left
//Upper Right

//+++++ Top
//Lower Left
//Lower Right
//Upper Left
//Upper Right

TArray<FVector> normals;
for (int i = 0; i < vertices.Num(); i++)
{
}

TArray<FVector2D> uv0;

TArray<FProcMeshTangent> tangents;

////The colors applied to every vertex and blended on the surfaces
TArray<FLinearColor> vertexColors;

mesh->CreateMeshSection_LinearColor(0, vertices, indices, normals, uv0, vertexColors, tangents, true);

//Enable collision data
mesh->ContainsPhysicsTriMeshData(true);
mesh->bUseComplexAsSimpleCollision = false;
mesh->SetSimulatePhysics(true);
}

If you made it to this part you probably read the code and in that case: We are still looking for anyone who wants to contribute to this journy into the unknown. And please don't look at me like that, the code is functional if not beautiful.

Thanks, bye.

Can we see a picture of what ever it is you made in the code you shared?

##### Link to comment

Posted (edited)

12 minutes ago, Awoken said:

Can we see a picture of what ever it is you made in the code you shared?

Of course you can.

These yellow blobs are the compound clouds or rather the colliders for the compound clouds so the player can interact with them.

Edited by Lyfe

## Create an account or sign in to comment

You need to be a member in order to leave a comment

## Create an account

Sign up for a new account in our community. It's easy!

Register a new account

• ### Similar Content

• By Anri
I'm working on a small arcade-style Android game for phones and tablets( using Android Studio and Java ) and I'm not 100% satisfied with the touch screen controls.  The game has five buttons for control;  left and right, and three buttons for firing three different bullet types( essential to the main mechanic of the game itself ).
The irony is that they respond very well even with scaling on different devices and the coding is bullet-proof( zero crashes or bugs since extensive testing ),  but as the game is as fast paced as Space Invaders or Columns it kinda falls apart as I switch between pressing buttons in the heat of the action.  I am now at the point where I'm having to slow the game down to make it easier to cope with the touch-screen buttons, or adopt a harsh attitude that the player will need an Android-compatible gamepad for the best possible experience...
Quality controls with standard input is something I take very seriously, but in this case I feel action games are not suited for tablets without a gamepad.  Would this be a correct assumption or could I do better?
Any thoughts would be most welcome - even if you are just a gamer.

Cheers.

• Hi everyone,
Stitched has been released for almost a year now and our game has gone through numerous great updates and revisions thank to feedback from everyone! To conclude a wonderful summer, our game is currently on sale for 30% off on Steam from September 17th to October 1st. Check us out here: Store.steampowered.com
Also, we would want to showcase some of our artworks for our game. Below are some of the concept arts that we did in the past.
Firstly, the main subject we wanted to focus on before any art is the primary color of the game. We decided to choose purple as it's a color that stands out and somewhat fitting in a horror game.
Below is the original title screen and the finalized version of the title screen of Stitched. We original wanted to give Catherine long hair but decided against it because we feel the long hairstyle was done too many times. We wanted to give Catherine a unique look hence we decided upon the new shorter hairstyle. We also touch up on her expression to make the player see that Catherine is terrified. Thirdly, we wanted to emphasize the title of the game by making it glow with light purple color.

The below three images represent design stage for the doll character in Stitched. The first image is the original sketch. The second image is an updated version to give the character a more serious tone. The final sketch is to give the character her color which include her hair, face, and dress colors. We went through a large amount of revisions for this character to get the right color, facial expression to match her personality.

And lastly, check out some amazing fan art for our game through this youtube video!

For anyone who is interested in our art. Check out our deviant art page here.
For those who have further interest in our game, check out our website here and our Steam developer page here for future projects!
Cheers!
Fluffex Studios
• By ggenije
Important: I am trying to realize in scrtach which is performance very low due to it's "virutal level" scrtach->flashplayer->java...
Also i'm new to this forum so i'm sorry if I missed group (like last time)
Like a title is saying:
I have project ,and I get negative feedback on it because some people need 30 min to complete it (what is the planned time)
but problem is that some people need EVEN 5 hours…(game is incremental/idle/upgrade type so it's important to keep same time ...)
———————————————————————————————————————-
Of course people with slower computer will have less fps so game will be slower for them,
so I have created TimeDelta system for each frame to calculate something to do per second
for example
Update(){move(TimeDelta*speed)}  so that mean it will be moving speed number of pixels(or units) per second so it will be same for almost each user.

But problem is next:
I have to change ySpeed by jumpPower (#PlayerJump in my project)
when any jump button is pressed
then in each frame decrease ySpeed by gravity it is(-10 * TimeDelta)
but when someone have lower fps it will have higher TimeDelta and will fall faster but with same jump it turns out to jump significantly lower that changes core of game
BUT even worse if fps suddenly in moment of jump then timeDelta would be 1 so player will jump much much MUCH higher , then fall much slower because timeDelta changed in meanwhile…(and the point of my game is about upgrading jump not complete game in first fps drop)

—————————————————————————————————————————————————————

Then I got an idea to fix TimeDelta (like in unity for rigibody) so it will be rounded like
if calculated TimeDelta is 0.01834 it will be 0.02 fixed
if weaker computer is using it the TImeDelta will be 0.143 so runded to 0.14 and so on…

I did not manage to realize it… i tried to calculate it before main initialization of game objects
but I'm afraid to fps will drop in moment that is calculating so it will be much diffirent…
I was trying with empty loop(400)(in scrtach even this is taking time) to calculate it but i'm not sure is it right

So is there good way to realize this fixed TimeDelta
I only have timer function to use and time difference between frames

• Hey, I just finished a new episode of "Game Audio Lookout"! This time it's about musical sound effects in the Super Mario series. Here's the link to the video on YouTube:
--
Musical Sound Effects in the Super Mario Series | Game Audio Lookout
We’ll have a deeper look at musical sound effects in the Super Mario series in this episode of "Game Audio Lookout".
I guess everybody has heard the sounds of the Super Mario series before. But I believe most of us don’t exactly know how these were constructed and what efforts were taken in later instalments of the series to produce sound effects that even harmonise with the game’s music.
--
Feel free to let me know what you think
Alex

• Intro
Due to my belief in learning through self-discovery and my ongoing creative evolution, I've long put off doing any tutorials. However, after making pixel art for over 3 years I've established many solid techniques worth laying out in a concrete fashion. While I'm excited by the prospect of helping others with my experience, I still urge artists to explore things their own way. The wonderful thing about art is the unlimited number of solutions to a problem. I offer you solutions that have worked for me and I hope they work for you, but I will be even more thrilled if you discover a better solution along the way.

When it comes to pixel art, it all starts with a good color palette. Creating a custom color palette can be a very satisfying and powerful way to establish your own unique look. I'll guide you through my method as I create a new palette. But first, let's go over some basic principals.

It's all about HSB
I find it easiest to understand and control color through HSB.
Hue - The actual color (0 - 360º)
Saturation - The intensity or purity of a color (0 - 100%)
Brightness - The amount of black or white mixed with a color (0 - 100%)
By understanding and adjusting these 3 fundamental properties you can create custom colors with precise control. I recommend this article by Steven Bradley for more detailed definitions of HSB.

Color Ramps
A color ramp is a specific range of colors that work well together, arranged according to brightness. Here is an example of what I consider a good color ramp.

Brightness steadily increases from left to right in this example. As the colors reach high brightness levels it's important to decrease saturation, or you'll end up with intense eye burning colors. Also, colors with very low brightness can become overly rich and weighty with high saturation. Saturation peaks in the middle swatch in this example.
A good color ramp should also apply hue-shifting, which is a transition in hue across the color ramp. In the previous example the hue is shifting by positive degrees as the brightness increases.
Many beginners overlook hue-shifting and end up with 'straight ramps' that only transition brightness and saturation. There is no law that says you can't do this but the resulting colors will lack interest and be difficult to harmonize with ramps of a different hue. This only makes sense to me if you want a monochromatic look and stick to one straight ramp.

The Palette
A color ramp is essentially a palette, but most palettes contain multiple ramps. I like to create large palettes with lots of ramps, which I can then pull smaller palettes from per assignment.
Mondo  - 128 colors

Become a Pixel Insider member and download Mondo

I took the opportunity to make a brand new palette for this tutorial. My intention was to create a general purpose palette that strikes a balance between vibrant colors and desaturated natural colors. So, how to make such a large palette?
First I decide how many swatches I want per ramp and how many degrees of hue shift. For this palette I want 9 swatches per ramp with 20 degrees of positive hue shift between each swatch. I like a lot of hue shift because it creates harmony between ramps and just looks neat, but 20 is about as high as I go.

The color picker panel in Photoshop. We only need to be concerned with adjusting HSB.

I use Photoshop, but a similar color picker panel should be accessible in just about any graphics software. To start I pick a color that will fit right in the the middle of a ramp. The hue is somewhat arbitrary, but the saturation and brightness is critical. I want the middle color to be be the most vibrant so I set the saturation and hue to the max combined number I'm willing to go.

After I've chosen my first color I can set the hue for the remaining swatches based on the positive 20 degree shift I wanted. I could reverse the direction of hue shift if I want but positive hue shift usually results in more natural colors, warming as they become brighter.
I still need to sort out the increments for S&B. Unlike hue, shifting the S&B in uniform increments doesn't necessarily produce satisfactory results. However, there are a few tendencies I follow. Brightness consistently increases from left to right and usually never starts at 0, unless I want black. Saturation peaks around the middle and never fully goes to 100, or 0. The goal in mind is to create even contrast between each color.

After some tuning and eyeballing these are my final values and resulting color ramp. The hue shift looks pretty strong but it will make sense when I add more ramps.

This version shows the difference in the increments. Pay attention to what the S&B are doing. You can see there is some consistency in the pattern. The saturation takes larger steps on the ends and smaller steps in the middle where it's the highest percentage. The brightness takes smaller steps as it gets closer to the end at full 100%.

Here's another visualization that clearly shows the flow of S&B as line graphs. You don't have to follow this general flow of S&B. It just depends what look you're going for. I've made ramps where the saturation continues to climb as the brightness decreases, creating an X pattern. This results in vivid dark colors. The biggest mistake is combining high saturation and brightness, unless you want to burn some eyeballs. I recommend a lot of experimentation with the HSB values of your ramp. I've tried to come up with mathematically precise formulas but it always seems to come down to trusting the eyeballs to some extent.
Now let's finish the palette.

Up to this point all I have been doing is picking colors and drawing them as single pixel dots on a tiny canvas. I haven't actually added any swatches into the swatch panel. With the first ramp established all I have to do to create more ramps for my palette is shift the entire set of hues.

I want 8 ramps total so I will shift the hues of each ramp by 45 degrees to complete the 360 degree cycle around the color wheel. I could do this in the color picker by adjusting the H value one color at a time, but In Photoshop I can save a lot of time by duplicating the ramp and changing the hue of the entire selection (Image-Adjustments-hue/saturation, or ⌘+U).

After adjusting the hue of all my color ramps my palette appears like this. It looks pretty nice but It's lacking more neutral desaturated colors.

To add desaturated colors I duplicate the whole middle section of the palette, omitting only the darkest and lightest colors on the ends, flip it over and desaturate them with the Hue/Saturation panel. I omit the light and dark columns because they appear nearly the same as the originals. I flip the colors because it makes for easy navigation, and it looks cool. The desaturated colors can provide a more natural look, and work well as grays in combination with the vibrant colors.

The final task is actually adding the colors into the swatch panel. With the color picker panel open I sample each color with the eyedropper and click the 'Add to Swatches' button. I add them from left to right, top to bottom so they will appear in the swatch panel in the correct order. This is quite tedious but the only way I know of to add the colors in the particular order I want.

Once I've added all the colors into the swatch panel I click on the panel options and make sure to save my palette. I can then easily load the palette as a .aco file into the swatch panel anytime. Also, by selecting 'Save Swatches for Exchange' you can create a .ase file, which can be loaded into several other Adobe programs. Save the image of your palette as a .png file and you can load it into Aseprite.
Well, that completes my 128 color palette - Mondo. Now let's look at how I use the palette with some examples.

Picking Colors

This example keeps it pretty simple, mostly relying on horizontal ramps of adjacent colors. You can also see how the warm desaturated colors work nicely with the vivid hues. I've added white into palette for extra contrast.

This example shows how ramps can move horizontally and diagonally. Because of the hue shift every color is surrounded by colors that can work together.

Harmony is everywhere, just pick and play!

This example uses complimentary color in combination with neutrals. The result captures an ominous yet hopeful feeling that perfectly fits the mood I wanted.
Picking colors for your art always requires some good sense, but a versatile palette with criss-crossing ramps like this makes it much easier. A little color goes a long way with pixel art, as you can see I never use a lot of colors for any one image.
Creating a palette with this method also works great for game art, and will ensure everything in your game has consistent colors. I used this method to create a 160 color palette for Thyrian Defenders. We've been able to depict an incredible range of environments and characters while maintaining a consistent look overall. Other aesthetic choices come into play, but color is the fundamental ingredient that ties everything together.

Final Word
Overall I'm quite happy with how this palette turned out. I think you'll be seeing more of my work in the Mondo palette from now on!
I hope this helps you come up with some palettes of your own. I know It can take a bit of time to get a feel for HSB, but even if you're a beginner I think making palettes like this is a great way to understand color. Go crazy with HSB and don't be afraid to experiment with formulas that look different than my example. Also, you don't have to make such a large palette. Start with trying to make a small ramp.

Raymond Schlitter (Slynyrd) is a former graphic designer who turned his creative passion to pixel art and game design in early 2015. Now he shares his knowledge with tutorials while he continues to make fantastic art and work on games. Support him on Patreon and get the inside scoop on his latest work.

Note: This post was originally published on Raymond's blog, and is reproduced here with kind permission from the author.  If you enjoyed this article please consider supporting Raymond on Patreon, where he provides backers with exclusive downloads such the Mondo palette as .aco, .ase, and .png files. Get Mondo!  You can also make a one time donation to the author if you prefer not to subscribe on Patreon.
[Wayback Machine Archive]
×