Generative Art #1 – Processing

In the past few months I started to discover some new frameworks that, in some ways, combine science and visual art. For me, in this category, there all the code frameworks that have the purpose to create some kind of visual art and even tools that use a mathematical formulas to create illustrations or even sounds. I found a lot of interesting frameworks and tools that fall into this category. I will try to cover some frameworks I liked using during this researches, this time I will talk about Processing. In this article I’ve inserted come GIFs created with Processing just for showing the results achievable.

 

What is Processing?

Processing is an open source programming language that allows to create different types of applications, animations or interactive contents and even generative art. It is built on top of Java language from which it takes many principles and paradigms. It comes with a dedicated IDE (Integrated development environment) but you can set up a different text editor (like Sublime) and set it up to work with Processing.

via GIPHY

 

What you can do with Processing?

Processing can handle both 2D and 3D graphics and the variety of all the achievable effects are countless. Basically it works like a canvas on which you can draw, multiple times per second, on top of it, graphic primitives like points, lines, polygons and circles, to form a single frame. Then these primitives, in order to be animated, had to be drawn in different positions, scale and rotation and Processing allow to do that very easily.

http://sasj.tumblr.com/post/168678854540/geometric-animations-171218

 

How to start using Processing

Processing is supported by all the major operating systems and the initial steps to create your first Processing program are:

  • Download the last version of Processing (HERE)
  • Install the IDE and the environment necessary on your system (GUIDE)
  • Open the IDE, create a new document and paste this code below
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    float numberofCircles = 15;
    float angle = radians(360 / numberofCircles);
    float distance = 40;
    float offset = radians(90);
    float counter = 0.01;

    void setup() {
      size (300, 300);
      smooth();
    }

    void draw () {
      background (#2F9599);
      noStroke();
     
      fill (#F26B38);
      for (int i = 1; i <= numberofCircles; i++) {
        float x = cos(angle *i + offset) * distance + width/2;
        float y = sin(angle *i + offset) * distance + height/2;
        ellipse (x, y, 10, 10);
      }
     
      fill (#F7DB4F);
      for (int i = 1; i <= numberofCircles; i++) {
        float x = cos(angle *i - offset) * (distance+40) + width/2;
        float y = sin(angle *i - offset) * (distance+40) + height/2;
        ellipse (x, y, 10, 10);
      }
     
      fill (#A7226E);
      for (int i = 1; i <= numberofCircles; i++) {
        float x = cos(angle *i + offset) * (distance+80) + width/2;
        float y = sin(angle *i + offset) * (distance+80) + height/2;
        ellipse (x, y, 10, 10);
      }
      offset = offset + counter;
    }
  • Hit the run button on the IDE and watch the results 🙂

 

As you can see in the code, there are two major functions:

  • The setup function that initialize everything and draws the first frame. If your are thinking to a static image, you just need this function.
  • The draw function that draws a frame multiple time per seconds. To create the animation, it is very important to consider the time variable or the mouse input.

 

via GIPHY

Resources

If you want to know more about Processing, there are a lot of resources you can find online on Processing, but I will list some of the resources that I found interesting and inspiring.

  • processing.org – main site with tutorials, forum and lots of information about Processing.
  • Programming Graphics I – A very special SkillShare course about Processing by Joshua Davis. He talks also about HYPE, a framework on top of Processing for creating even cooler illustrations. Checkout also part II and III.
  • Saskia Freeke Tumblr – A massive archive of GIFs of Processing creation, good for inspiration.
  • funprogramming.org – A great list of tutorials on Processing.
  • #creativecoding on Twitter.

 
It is also worth to mention that there are some great communities around Processing, like openprocessing.org that allows you to see scripts in action, fork and modify scripts from other users or write them from scratch.

http://sasj.tumblr.com/post/117793040465/geometric-shapes-150430

On the next issues of this serie I will talk about fractals and how can you create art with them. Stay tuned 🙂

I define myself as a creative developer.

Steady Drop – Log #13 – Releasing

 

In this post I will talk about on how I started to acking everything up for releasing the game on the Play Store.

Reward system and AdMob

Since the beginning of the project I’ve always thought that Steady Drop would have been a free game but that there will have been some kind of reward system based on ads. The model I’ve always wanted is like Three game that gives tries if you watch video ads. The more you watch them, the more tries you have. So, to implement something similar to this model, I started watching different types of ad system. I initially came across to UnityAds, because I thought that would have been simple to integrate (since I’m using Unity), but I wanted something more standard and not too related to the engine I’m using. So I chose AdMob, that has become the Google standard for all kinds of ads on mobile platforms. It’s very easy to integrate, even in Unity, and there are a lot of official guides and useful resources on how to use it. I will integrate UnityAds maybe later, but for now I will stay with AdMob.

The integration was very easy, also because I was already ready to have a tries-system that makes you play only if you have tries left; the only thing missing was the way to recharge them with the ads. I’m also thinking on having different type of reward the integrates with the player experience, but for that I will have to implement more game mechanics, like speed boosts, recharge gravity stop time, invulnerability and so on.

 

Internal tests with Google Play Console

The time for the release on the Play Store it’s finally coming but I wanted another test with real users. So, while I was exploring the Google Play Console, needed to submit your app on the Play Store, I saw that the tool can handle different versions of your app, and in particular internal test version, visible only by a selected group of users. The system allows you to create different groups of testers and they can test the last app uploaded as the internal test version. This system is very easy to use, but maybe it lacks a bit on a standard way to have feedback report from testers. They had to call me or reach me in some way to give me feedback or to report some issues.

This phase was also useful because, in order to upload the installation file (apk) correctly, it has to be signed, so I had to learn how to sign it in the Unity editor, a very easy process, by the way. Once this internal test phase is considered done, I will create the Play Store entry as a Production version, with all the screenshots and descriptions. Then I will have to do some marketing.

 

Graphics Improvements

I will show you just a quick overview on how the game visually changed over time, since the first prototype. I’ve added some little details that are also functional to the gameplay, like the triangle grid that moves in parallax, so the falling movement is more evident.

 

In the next post I will talk about on actually releasing the game on the Play Store. Stay tuned 🙂

I define myself as a creative developer.

GGJ 2018 Post Mortem

 

Game jams are events in which the participants have to create a game in a certain amount of time. In the Global Game Jam (GGJ) this span of time is 48 hours and few weeks ago (the last weekend of January) there was the annual GGJ.  Once again I decided to participate to it in Milan location, even if I live in Trento and even if Trento was a jam location for the first time this year. I learned too late that I could have gone in Trento for the jam and I’ve already bought train tickets, so…too bad, see you next year. After the jam is done, I tend to write a “post mortem” of the experience so, here it is. If you haven’t red the previous ones, go check them out HERE.

In terms of number of participants, the Milan location was at the third place in the world, and like I always do, I’d like to thanks the organizers (Pier Luca Lanzi and Daniele Loiacono) for all the patience and the competency on handling such a big number of people.

 

The jam experience

Like last year, I went to the location in the afternoon. Sadly, my train had forty minutes of delay 🙁 so I arrived pretty late. During the trip, Emanuele (a guy from the team of 2016 GGJ team) contacted me, proposing me to form a team together. I said it was a great idea, but since my train was delayed, I told him to form a team without me and I would have joined the team once I got there. Next year I think I will go on the venue in the late morning, because in case there will be train delays I will still be able to arrive in a decent time, and have all the time to join or form a team.

During the jam I felt like I had the grasping of everything because I thought that was my third time, I have became a pro just for that reason, but I have to admit that I was totally wrong. I faced the jam with a wrong mood, without focusing on the fun part of creating a game and interacting with people that have my same passion. I faced like it was a normal task I have to face every day in my daily work. Next year I will try my best to find the right mood, great lesson learned though.

 

What went right

The theme: I really liked the theme of this year which was “transmission”. It can be interpreted in a lot of ways, really. It was very enjoying to cover all the aspects of a transmission in a game,especially in the initial brainstorming session. We ended up using the transmission theme as an alien transmission of a signal that the player has to understand and respond in the correct way.

Good team skills: My teammates this year were very talented and experienced. All of them had already done a game jam or they develop and collaborate in the creation of video games in general. So great level of preparation, the roles were very defined and the skill coverage was great with one game designer and programmer (Andrea), two programmers (me and Luca), three visual artists (Irene, Curzio and Emanuele).

What went wrong

Development coordination: Even if the team was skilled, the overall coordination (of the development side) seems to lack in synergy. From my side, I realized that I’m becoming used in writing code that no one reads, so the final result was not the most readable code for other members. I hope this will not become a bad habit. In addition, some of the guys had a little framework to facilitate things, but we ended up not using it as the main framework, and it was used only by them, creating maybe some confusion.

Lack of concentration: I don’t know why, but this year I had a lot of troubles concentrating during the development process, and I hadn’t the grasping of the big picture all the time. Maybe this lack was due to the size of the team, but right now I can’t tell exactly why.

 

Tips for the future

My personal tips for future jams are:

  • Grasp the big picture.
  • Don’t focus on complexity but focus on depth (game design tip).
  • Try to have, right from the start, a vision of what are the game goals.
  • Think more about inclusion.

 

Final result

The final result of all our efforts is Space Diplomacy (lots of infos here). We are considering to resolve some bugs and maybe publish it on Google Play and/or Amazon Appstore.

 

If you are interested on game development and game design I have a series of posts in which I show my progress of the development of a mobile game Steady Drop. HERE!

I define myself as a creative developer.

Creating Circular Mastery

Project concept

In the past few months I worked a lot with shaders in Unity which mainly uses Nvidia CG as its shader language and converts it for specific platforms. I have some shader skills with HLSL and GLSL but I started anyway studying this language and making mostly 2D shaders. I like 3D shaders but I think they need more skills than 2D shaders to be really good, so I started with the 2D ones.

Working on a widget for a in-game HUD, I  needed to create some circles (both UI and Sprite2D) and I realized that I had two choices: to use an image or to create it from scratch. Both methods have its pros and cons, which one you think I used?

 

Shader plugin

I started to look at some shaders I like on ShaderToy and I came across some pretty shaders to create simple circles and circular bars, used for loading screen. In this site the shaders are mostly in GLSL so I ported some in CG language, creating a starting point for the different kinds of shaders I had to make. I realized that I could reuse parts of these shaders for other purposes, so I came up with the idea that if these shaders are flexible enough they could do a lot of things in terms of simple “circle and bar” animation, especially for loading screens.

So, I started to write down all the things I wanted from shaders like these, planning to make flexible shaders to create a basic animation widgets. So I created a play-test scene in Unity to test the shaders I wanted to make and I started adding them more and more features as well. The graphic style and animation I want to replicate are similar to these examples of this loading widgets I found in different games (The Division, Overwatch).

Releasing Circular Mastery

After developing a reasonable amount of features for the shaders I created, I started to packing everything in order to become a product called Circular Mastery for the Unity assets store. This means creating all the product images, logos, user manual, etc… and then adding some additional support for the required features of Unity assets (like the undo function).

It was the first time I had to create a package for Unity and I have to admit, it was easier than expected because there are a lot of resources and documentation on releasing assets for the assets store, and the control panel for publisher are very simple and clear.

If you are interested in the plugin here you can find a brief description of the plugin with all the links. The plugin is out right now so go check it out!

Circular Mastery on the Assets Store

 

If you are interested on game development and game design I have a series of posts in which I show my progress of the development of a mobile game Steady Drop. HERE!

I define myself as a creative developer.

Steady Drop – Log #12 – Music & SFX

 

In this post I will briefly describe my process to create sounds effects and music for Steady Drop. Nothing about development or code this time, sorry 🙂

 

The recording setup

Problem 1: how do I record sounds?

I started recording some sounds with my smartphone with an external mic plugged in. To achieve the best result I could with my “great and professional” gear, I used a folded blanket placed over the bed like a little camping tent, to make small recording room with no reverb, no echoes and limiting outer noises. Problem solved!

 

Problem 2: what do I record?

I literally looked around in my apartment and grubbed some random objects I thought could potentially produce some noise, like old CDs, some packaging boxes and some kitchen tools. With these I will produce sounds manipulating or letting them falling on a surface while I have the recorder on. Problem solved!

 

Problem 3: how do I mix?

To clean and mix the recordings of the sounds I chose Audacity which is a very popular software used for audio recording and editing. In this case I will use it only for the editing part, removing the background noise and isolating the individual sounds.

 

The sounds

I started with some weird high pitched sounds and some low-deep “blocky” sounds. I don’t have a list of sounds I have to produce in the game but I want to create like a little sound library that I might reuse in the future. If I need a very specific sound for Steady Drop I can record it later. For this first phase, I want to adopt a broad focus on sounds to narrow it step by step and to choose and produce very specific ones. However I will try and add sounds only if the gameplay needs it without putting sound effects for everything.

 

The Music

Meanwhile I started creating some music track with SoundTrap which is a very interesting site that provide a DAW, but you don’t have to install anything on your PC, it’s all onlineThey have different paid plans but you can choose to use the free plan with the only restriction on the number of projects, number of instruments and number of loops. So for now I’ll stay with an unpaid plan. For Steady Drop I want short music tracks (at least three) possibly suited for looping. The genre I want, I call it “dreamy electronic”, which is electronic music with a lot of echoes and delays in the pads, slow paced, clean and minimal percussions. I will try my best to achieve something like that, without going crazy, I hope.

 

Stay tuned for future posts of the series, and if you are interested on other post series don’t forget to visit the blog main page 🙂

 

I define myself as a creative developer.

Steady Drop – Log #11 – Statistics

 

Collecting game data for simple statistics

After the previous iteration I’ve done on graphic and UI improvements in the game I started to think about collecting some data from the game that comes from the player actions, in order to have a sort of statistics screen that the player can check from time to time to see his progress, and furthermore in this way the game can collect useful data to base some kind of achievements system in the future. For example there will be an achievement for falling through 100 game units (or meter if you want) or for playing 500 rounds. For the achievements system, I’m planning to integrate some native stuff for Android and iOS (Play Game Services for Android and Game Center for iOS), starting with Android, obviously.

 

Implementation of the statistic system

For the implementation, I chose to create a single class that handles all the requests to store and get the data collected. The data we want to collect are mostly integer numbers handled in different manners. For example, if I want to memorize the high score, I have to tell this entity that the data tagged as “high_score” has to be saved as MAX of the previous, and on every game over I have to memorize the current score. In this way, every time I memorize a new value, the entity keep the max between the previous and the current values. In a similar way, I can memorize a counter (like to count the rounds played). What I have to do is to memorize a value 1 every  game over.

This entity relies on the DataMgr to load and save the data. The DataMgr itself is an interface to read and write values from the physical memory of the device you run your Unity application. Here some snippets I took from the StatisticMgr.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//Load and save data from the device
public void loadLocalData() {
    foreach(KeyValuePair<string, StatData> entry in dataBank) {
        string readData = DataMgr.readData(entry.Key);
        if(readData != null)
            entry.Value.setInitialValue(readData);
        else
            entry.Value.setInitialValue(0f);
    }
}

public void saveLocalData() {
    foreach(KeyValuePair<string, StatData> entry in dataBank) {
        DataMgr.writeData<double>(entry.Key, entry.Value.value);
    }  
}


//For store a new value in game
public void storeNewValue<T>(T _value) where T: IConvertible {
    Double dValue = Convert.ToDouble(_value); //numbers stored as double
    switch (mType) {
    case(StatDataType.PLAIN): //saved without logic
        value = dValue;
        break;
    case(StatDataType.SUM): //saved as increment
        value += dValue;
        break;
    case(StatDataType.MAX): //saved as max (if the current max is lower
        value = Math.Max(value, dValue);
        break;
    }
}

 

Where is the sound?

I’m still planning to make sound and music for the game but the sound iteration will take some more time. I could pay somebody to make music and sound for me, or take it from some Creative Commons site, but since I have a little knowledge of music theory in general and in the past I was into recording, DAWs, MIDI and stuff, I want to try to harness my past passions to make something out of it, before asking for external help. What I have in mind, though, is to record some real sounds and manipulate and combine it to create the sounds I need.

Stay tuned for future posts of the series, and if you are interested on other post series don’t forget to visit the blog main page 🙂

 

I define myself as a creative developer.

Isometric Camera with Unity

 
I like real time cameras subject so much that I already made a post on real time cameras (here) specifically on third person cameras. This time I will show you how I set up a simple isometric camera for a game prototype I made in Unity.

 

The isometric camera

Basically an isometric camera has an isometric view in which the perspectives are avoided, it’s like having a “zero-point” perspective instead of the three-point perspective you normally have on a classic first or third person camera. As you can see, there are no perspective deformations on what the camera sees, for example, with isometric view, all the edges of the cube are parallel. Technically, by having a an isometric view, the camera is already isometric, but on top of that, in games this view is classically used used with a 45° degree rotation.

This type of camera was used a lot in the past (especially on the 16-bit era) in games like Q Bert, this first Diablo, the first Fallout and Age of Empires, mainly to give more sense of three dimensional space with a minimal computational effort. Lately it is used for nostalgic reasons and for specific artistic or design choices in games like Monument Valley.

 

The camera script

The only thing you have to do it in order to use my simple isometric camera is to add this script to a Gameobject. Since the script require a Camera, it will add it for you. When the script starts, it creates all the things needed to run an isometric camera, which essentially are a target to look to and some other Gameobjects used for camera movements (which I will show you in a minute).

Then the most important part is camera settings and rotation. The camera has (obviously) to be orthographic otherwise we have perspective involved and we don’t want it. For the rotation of the camera, I chose to make the camera a child of the target and to rotate the target instead of rotating the camera itself, just because it seems more logical to me to apply the further movements and rotations.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
void Awake()
{
    //Objects creation
    GameObject target = new GameObject("Camera Target");
    GameObject movableRef = new GameObject("ISO Camera Movement");
    movableRef.transform.localEulerAngles = new Vector3(0, 0, 0);
    m_IsoMov = movableRef.AddComponent<IsoMovementController>();
    m_IsoMov.init(speed, limits, invertedXAxis, invertedYAxis);

    //Camera settings
    m_Camera = GetComponent<Camera>();
    m_Camera.orthographic = true;
    m_Camera.tag = "MainCamera";
    m_Camera.orthographicSize = 20f;
    m_Camera.backgroundColor = new Color(.3f, .3f, .3f);

    //Camera positioning and objects parenting
    GetComponent<Camera>().transform.position = new Vector3(0f, 0f, -50);
    GetComponent<Camera>().transform.parent = target.transform;
    target.transform.parent = movableRef.transform;
    target.transform.localEulerAngles = new Vector3(45, 45, 0);
}

 

Camera motion

While creating this camera, I wanted to add a little bit of movements and even a rotation. To do this, I created a second script and attached to the parent of the camera target, the controller. In this way the controller rotates and moves the target (in real time), and the target has rotated (and keeps the rotation of) the camera. That’s the reason of all of those objects in camera creation.

Movements

For the movements I just taken the vertical and horizontal axis and translate accordingly but within a certain limits (setted in the inspector), in this way we can’t get outside of a certain scene or environment.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
void FixedUpdate ()
{
    float h = Input.GetAxis("Horizontal");
    float v = Input.GetAxis("Vertical");

    if(!h.Equals(0f) || !v.Equals(0f))
    {  
        Vector3 trans = new Vector3(h*.5f + v*.5f, 0, v*.5f - h*.5f);
        transform.Translate(trans * speed *  Time.deltaTime, transform);

        Vector3 pos = transform.position;
        pos.x = Mathf.Clamp(pos.x, -limits.max_X, limits.max_X);
        pos.y = Mathf.Clamp(pos.y, -limits.max_Y, limits.max_Y);
        pos.z = Mathf.Clamp(pos.z, -limits.max_Z, limits.max_Z);
        transform.position = pos;
    }
}

 

Rotation

As a reference for the rotations I took the camera from the game Anno 2070, which can rotate towards the target (on the horizontal plane) of a certain angle. I wanted something similar but more defined: I wanted the rotation step to be 90°. In this way when the camera has finished rotating, you are still in a isometric view but you are looking at another side of the scene. This concept of having a rotation step I saw it on Fez, which is a 2D game, where you can rotate the camera, 90° degree at the time. It is actually a 3D game. Here’s the code for the rotations.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
void FixedUpdate ()
{
    if (Input.GetButtonDown("Jump"))
    {
       
        if (!m_IsRotating)
        {
            float c_rot = Input.GetAxis("Jump");
            Debug.Log(c_rot);

            m_IsRotating = true;
            m_DesiredRot = transform.rotation;
            m_DesiredRot *= Quaternion.Euler(0, 90*Math.Sign(c_rot), 0);
        }
    }
}

[...]

void Update()
{
    if (m_IsRotating)
    {
        m_RotationData.rot_value = Mathf.Lerp(m_RotationData.rot_value, m_RotationData.rot_sp_max, Time.deltaTime);
        transform.rotation = Quaternion.Slerp(transform.rotation, m_DesiredRot, Time.deltaTime * m_RotationData.rot_value);
        if((m_DesiredRot.eulerAngles - transform.rotation.eulerAngles).sqrMagnitude < 0.1)
        {
            m_RotationData.reset();
            transform.rotation = m_DesiredRot;
            m_IsRotating = false;
        }
    }
}

 

Final results

This camera works great (with some adjustments), for example for infinite runners or strategic games that need to have a top view of the “game board”. In order to work properly, however, the 3D models you put in the scene have to be created for an isometric view.

Source code

You can find the full Unity project right here (with a beautiful voxel model I made) feel free to use it and modify it.

Unity Project

I define myself as a creative developer.

Steady Drop – Log #10 – Visuals

Deadline changes

I had the milestone to complete the next development iteration of Steady Drop at the end of march 2017, but for the lack of time and for the efforts put in other projects (like the game I made for the Global Game Jam 2017) I’m forced to postpone this milestone and to go a little bit further with the deadlines. The project is still growing, it’s just I had little drawbacks, that’s it. I’m still adding improvements here and there, most graphical ones, and I have some “big” features I want to add before the next deadline. Like I said, I fixed most of the bugs I received from the alpha-testing phase and I’m still integrating some improvements based on the feedback I had. Goos news after all!

Visual improvements

I reviewed the color palette of the entire game, so I changed every color a little bit to make it more glued together (I used a palette generator) and to give more sense to the overall experience. But I completely changed the enemy colors: they was very similar to the avatar of the player but now, as you can see, they have their own color, and it’s more clear to the player that’s this shapes are not something related to the avatar he’s guiding down.


Another two visual improvement I’ve added are the trail behind the falling avatar and a particles generator on the bottom of the screen, they both give more sense of movement.And last but not least I’ve added a dynamic gradient un the background. So here you can see the differences between how it looked like and how it looks like now.

 

Next steps

One of the things I want to do next is to add some visual feedbacks when you lose health (or zero-gravity time) and to make some enemies a little bit more alive with some scale animations. I’m also planning to rewrite part of the UI system and replace the UI of the main menu, because I made the current placement just for the prototype, which has limited menu choices.
Next I will have to modify the tutorial (again) because I don’t like the current one, and to work on some game balance parameters like the score multiplier…a lot of magic numbers 🙂 After that, I will start to research how to integrate and produce sounds and music. It will be fun!

Just a reminder, if you want to play the alpha, just download and install this file. Steady-Drop-Alpha

I define myself as a creative developer.

6 tips for better game design

 

In this post I would like to give you some basic game design concepts to create better games and videogames. This are some of the notes and lesson I’ve learned watching talks and, more importantly, creating my own games. Coming from a programming background I tend to not give the proper importance to game design, so I’ve decided to give it the right importance and to try training myself to use game design concepts more easily, studying and going on depth in more and more aspects.

 

01 – Expand your background

The first advice I can give you is to expand your background, I mean your general knowledge. Since game design involves a creative process, the more things you know, have seen, have touched, have experienced, the more you can pop out ideas. Starting doing new experiences is a good way to start. You can start watching more films you haven’t watched yet, read more books, visit some art expositions, etc…Game design is creative but is also ruled by some essential rules and best practices, so to understand it more you can play different videogames and try to learn from them, for example how the thing works on the same genre of games, how the controls works, progression and so on…

 

02 – Try to give more, not just gameplay

Once you have a good mechanic and your game is fun to play, try to give more than that by creating a world to put the player in, work on immersion and flow and give the player the right space to breath. The player has to acquire the will to play your game, once again to feel new sensations every time he plays. Giving more than a clear and guided goal but a more complex and variegated set of goals or purpose, can help to create the feel of an infinite play.

 

03 – Remember all types of players

When designing a game, keep in mind to visualize all possible scenario about the type of operation you allow and what the players can do with it. On this matter it is useful to remember yourself all the type of players. There are a lot of different types of players and some famous game designers categorized them in different ways, but the way I like the most is “The four types of players” (explained HERE). Try to design a progression that is suitable not for only one genre of player.

 

04 – Tune carefully your challenges

The progression of the players is one of the most important things that are not visible but are there, and the player can feel it very well. I mean the progression can be felt but not directly seen. Its sensation property makes the progression a crucial thing, and for this reason you have to carefully design the player progression, with the right challenges at the right time, and the gathered skills have to keep the mind flow of the player active. And remember this: easy to learn, difficult to master.

 

05 – Social Games

When designing a social game, think at all the tools you give to become social. Probably all of them are communication tools. Every communication tool lets the player use the tool in different ways. If you give too much space, you probably have to face problems of misuse of the tool. In the first place, you have to find the right tool for communication that can avoid misuses and secondly, think a proper way to both punish the misuse and reward the right use, in a fair way.

 

06 – Decide: game or market

A game can be a pure expression of art and technical skills or can be a mere selling product that has to satisfy the market in some specific ways. For me both sides are a little risky to make and they have both pros and cons, but I think that the truth is in the middle, as they say. A good game designer should find a good compromise between art and selling purposes.

 

I define myself as a creative developer.

Create a video barcode with Python

 

I’ve recently discovered this curious blog called movie barcode (link). The image on this blog are basically created from the frame colors of a movie or a video and maybe there are some post-processing on the image to make it more artistic. When I discovered it, I really liked the idea and I started to gather information on the possible algorithm to analyse and create (from code) similar images. This is when I discovered some articles (this one, and this one) on the matter and I started to play around with the code given. Most of it was in Python so I continued to use it for this project. My idea was to analyse video source frame by frame, then find the main color for that frame and to create an image that has a vertical line (of a certain width) of that color. I know this is a different approach from the ones on the blog , but I wanted to start easy and then to expand or change the algorithms. The link of the script is at the end of this article 🙂

 

Take a video source

The first step is to take a video source and for that you can choose to take a video on a specific path of your pc or you can download it. I used this library (link) to download a video from Youtube (very easy to use). Once we have a video we can analyse it. I tested my script mostly with mp4, avi and mkv videos, I don’t know if can works with all video codecs or compression. (it’s not the purpose of my script 🙂 )

 

Analyse frame by frame

Now the fun part: find the main color of a frame. To do that I massively inspired my work on this articles (link) from Alan Zucconi, where he uses a K-mean algorithm to analyse an image and explains very well how this algorithm works. Fortunately, there are some good Python libraries to do that (details on the script) and they are easy to use, so why not. This algorithm is pretty heavy but after few seconds we have the RGB components of the main color for that video frame and after doing this process for every frame of the video, we have a list of colors. Since I choosed to make the result images of a certain maximum size, in the script I analyse only a certain number of frames. If the number of frames are more than this number I simple analyse one frames and skip N frames.

 

Creating the final image

Now what we have to do is to create an image that have a vertical line for every color of our list of colors. To do this, I used another Python library to create images, graphs and color manipulation stuff, which is a pretty powerful library that can do various things as create an image of a certain size from a list (a matrix) of colors. Here is how the matrix is created.

 

Final results

I’m pretty happy with the results so far, so I started to analyse some Youtube videos and some films with this results:

 

It’s only a matter of install the right libraries and run this script with a video and you’ll have a nice barcode. I will definitely improve this code and try to make it more artistic. Maybe in the future there will be another post on this subject.

Source code

https://gist.github.com/plafone/aa6b84ae26372dad7c2c2d35be7ae217

I define myself as a creative developer.