Tuesday, 12 May 2020

Junior and Senior animator GET

Hey there, San-Fans!
The team of Out of Line at Nerd Monkeys is now on it's third month of remote work from home.
It took us a while to get organized but we quickly turned it around and managed to speed up and scale production while keeping everyone safe at home.

It was back in March, that Inês Pereira joined us exactly on the week that we moved out of the office and into the safety of our homes. It was an odd position to be in as for a Junior Animator. At the time, the idea was to guide her and help her as much as possible to integrate into the team and the animation pipeline alongside a Senior Animator. Of course that quickly proved to be impossible as we hastily packed our computers and moved into improvised offices at our homes.

Fortunately for us, Inês has proven to be a true professional, not only with her art but also with her commitment and that in turn allowed us to feel confident in giving her more complex tasks and animations and it shows.

Here's what she has to say about herself (we kept her words and made no corrections):

"Hello! My name is Inês and I'm your local Junior Animator! It hasn't even been a year since I left college so this is still baby's first experience when it comes to the real world. It's way more responsibility but also way more rewarding! Besides your typical school assignments, Out of Line is the first project I'm part of. I'm from Almada, but attended high school in Lisbon and college in Portalegre. I've been pretty sure I wanted to be an animator since middle school, and I've been following that path ever since. Whether it was film & TV or games wasn't a choice I was focused on making: I just really wanted to animate. I tend to think of animation as very close to acting, as we are technically acting through our animations. I think that's part of the reason why I love this area so much! I'm a big theater nerd (specially musical theater) and like with acting, I think each animator brings a new version and new life to each character they do and I just think that's really cool. Plus I really like drawing, so these two combined made me end up here. From here on out, my focus is learning and improving as much as I can. That's my main goal! I don't have much else set in stone as of yet, as I'm mostly seeing where life takes me (ugh this sounds awfully hippie, I know). Still, you're not getting rid of me that easily! I still got a lot to show and a lot of work to do, so hopefully you'll see me a bunch around here! See you soon, Inês"

Inês Pereira working on a Cutscene for Out of Line using the Spine software

Meanwhile, and considering the amount of animations that were planned to go into the game, a Senior Animator was already planned to enter the team. We just didn't expect it to be doing it all so... remotely.

An ad was placed on Nerd Monkeys Facebook on the 31st of March, seeking for a Senior Animator. Alongside other personal contacts a few dozens of emails were received from Portuguese professionals here in Portugal and abroad applying for the position. We were super happy to so many young professionals with great portfolios, which in turn made our job that much harder in picking someone that would be the right one.

After doing all the interviews for the potential candidates alongside a few tests, one final person was chosen and, fortunately for us, he accepted our offer.

João Vasco Leal started working as a Senior Animator for Nerd Monkeys, directly from his home in London on the 22nd of April. Being a seasoned professional working as an animator he immediately started working with our characters and rigs and in a few days he was turning over complete and finished animations. Awesome.
 Here's what he has to say about himself (we kept his words and made no corrections):

"As a kid he was a big fan of comics, video games and cartoons, nowadays... not much has changed!
With quite a few years of experience both in Portugal and in the UK, he was able to amass a wide number of diverse projects that include childrens illustration, animation for music videos, commercials, video games, VR experiences, amongst others.
He brings with him his passion for entertainment arts and pop culture and that is reflected in his work."

João Vasco Leal working remotely with the Out of Line team

Both Inês and João are using Esoteric Software's Spine animation package to create the in-game character animations and cutscenes, but this you already know since we already covered it in a previous post ;)

You can follow João's work here.

That's it for now. Make sure to follow us on Twitter and Facebook!
And stay safe!

Understand, rubber band?

Tuesday, 21 April 2020

Into the deep depths of Puzzle Design

For this blog post we decided it would be nice to put the spotlight on our Level Designer, Wilson Almeida. We originally told him to write something simple and direct about puzzle design, little did we know that he would instead take a massive deep dive into his owns subconscious and analyze the entire microcosms. Oh well, nothing that a few years of therapy won't solve!


Puzzle Design

With Wilson Almeida


My name is Wilson Almeida and I am working on the puzzle and level design for Out of Line.
When I was approached to do this blog post I decided to write about my design process instead of the puzzles themselves. This way you can take a peek into how puzzles are made, spoiler free.

The current design challenge I’m facing is creating puzzles using a new mechanic in the game, it’s always exciting to play with new toys but in this case it’s particularly appealing because of its physics-based nature. This type of mechanic lends itself to a wider range of possibilities and situations, some unpredictable and others chaotic, the good kind.

It’s been a joy to explore and come up with new puzzles using it, I hope you find the explanation of my process equally entertaining and useful.

Puzzle Design in 5 Steps

Before beginning, what I’m about to share is just the way I do things and in no way advocating to be the only way or the correct one. This can depend on the designer, type of project and the people you work with.

This is still a work in progress as I’ve tried several approaches while designing Out of Line, at the moment this seems to be working and thanks to this blog post I have the opportunity to put it all in words. While writing this, I strived to keep the process as generic as possible for those of you making games, in case you might find something useful that you want to try or adapt into your own project and design process (super cool if you do this, please let me know).

The process assumes you already have a working version of your mechanic inside the game’s editor and a previously built layout of the level you are designing puzzles for, otherwise the approach would be different.

My approach encompasses 5 steps, the idea is to go from having loose mechanics and no puzzles to a coherent group of puzzles in a level section.

Here are the steps:
• Step 1 - Create a Framework
• Step 2 - Mechanic Exploration
• Step 3 - Sketch Puzzles & Interactions
• Step 4 - From Concept to Playable
• Step 5 - Level Integration

Let’s see them in more detail.

Step 1 - Create a Framework

A framework in this context is simply a set of rules to abide by when creating puzzles for a given level section. We do this to limit our actions (in a good way) and reduce the clutter of things we don’t need to care about at the moment to focus solely on what’s important.

In practice, we define these rules by looking at the current mechanics/characters/context/level pieces that we are allowed to work with for a given level section of the game. In my case I already know this because before I started designing anything in Out of Line, I sat down with Francisco Santos, the project’s visionary, together with input from the whole team we created an overview of the whole game from start to finish with all the mechanics, story arcs, characters, level sections and layout.

Having this information allows us to greatly simplify work because it reduces the space of possibilities (mechanics, characters, context, level pieces) to a more manageable small subset. Personally, I find it helpful to list these in someplace, a notebook or a whiteboard, before starting the design of the puzzles, it sort of “flushes” the previous framework out and “loads” the new one into my brain.

Out of Line - Chapters and levels (blurred out, obviously)

Step 2 - Mechanic Exploration

The objective here is to have a better understanding of what are this new mechanic’s limitations and possibilities. It is crucial to do this before going to the next step, this how I break it down:

• Play with this new mechanic inside the editor:
  – Have fun!;
  – Try every situation/idea that pops into your head;
  – Free yourself from any expectations of getting useful puzzles ideas out of this (you probably get some anyway).
• Combine this mechanic with the old ones:
• Break it, put it under stress;
• Big plus if you can abstract it’s functionality and apply it to other contexts not previously planned, you might discover something new your game can do.

Step 3 - Sketch Puzzles & Interactions

Now that we have a good grasp of what its actually possible and allowed to do inside the game with this new mechanic, in combination with the others, we are able to sketch puzzle situations in bulk.

The goal is to create several puzzle storyboards that are ready to be implemented inside the game, this helps to keep work flowing in an attempt to avoid “designer’s block” or the fruitless pursuit of the perfect idea for a puzzle. Even if you end up cutting more than half of those implemented ideas, that is to be expected, what matters is the valuable body of work that you end up with, that can be used by combining it in different ways. The following breakdown hopefully explains how this can be achieved:

• Create storyboarded puzzle/interactions with small numbered vignettes:
  – This numbered vignettes can later be used as the number of puzzle steps;
• Try to think of small interesting interactions:
  – It’s faster do this (at least for me);
  – More variety;
  – Easy to avoid getting into an endless loop of doubt and self pity.
• Avoid going for complex intricate designs from the onset:
  – You waste more time;
  – Less variety;
  – Harder to get it right (for me at least) - usually due to too many variables at one time;
  – Easy to get trapped and burn yourself out (as in mentally exhausted).
• Connect the smaller interactions to create puzzles:
  – How many ways can you connect them?:
  * Switch them around;
  * Is there a theme?;
  * Think of a name for it;
  * Iterate;
  * Try to remove a mechanic of an already established puzzle and see what happens;
  * I can’t possibly enumerate all of the options you can try, I think you can get the picture.
• Time saving with fast and cheap iteration - I use pen and paper or markers and whiteboard (I prefer to work standing up at this stage).
• Less emotional attachment to these ideas - easier to part ways with them, it’s just ink on a paper.
• Avoid lingering on details - less distractions because you’re not using any software or computer.

Wilson asked us to use this sketch from some kid in kindergarten here...

Again, he asked to use another drawing from some kid, this time from the 2nd grade

Step 4 - From Concept to Playable

This step is about putting together everything you planned and updating your knowledge about what you discovered in step 2 (how the mechanic behaves in-game). For the most part I build batches of 3 to 4 puzzles that are somewhat linked together and do a quick evaluation by playing it in-game, before doing it again with another batch until I’m out of sketches. Here’s how I “cook” them:

• Build the puzzles inside the editor:
  – Don’t judge anything yet, just build - as I’ve said before I usually build them in batches that are somewhat linked by their mechanics.
• Play the puzzles:
  – Cut the ones that you instantly know aren’t working:
  * Maybe you’re pushing the game’s mechanics too far and it doesn’t work;
  * Missing some programmer magic to support your idea;
  * Sorry it’s just bad :( - it worked better on paper.
• Save the ones that work and go to the next step.

A puzzle with the rope mechanic in "greybox" form with a zoomed out camera for development purposes

A more complex take and usage of some basic elements of the game (still zoomed out camera)

Step 5 - Level Integration

Finally we have ourselves some potentially cool puzzles, but we are far from over because we weren’t explicitly thinking about difficulty or complexity, at least consciously. This next step not only tries to take care of that but it does so according to the level’s context (available mechanics and level pieces). Remember that we already have an overview and a rough layout of the level, as explained in step 1.

You most likely have to go back and forth between step 3 and step 5 more than one time before you’re satisfied with the results. Regarding the quality of the results, It’s extremely important to adjust expectations of what constitutes a designed puzzle in relation to the phase of the project you’re currently at (alpha, beta, etc). With that said, the following breakdown should still be the same for the most part:

• Look at puzzles and their complexity:
  – Number of steps to solve;
  – Number of moving parts the player has to keep track;
  – Size:
  * Does it span across several “rooms” or is it self contained in a single area that the game camera can see?;
  * This can influence complexity because the player has to remember the puzzle’s state.
  – Mechanics used.
• Group them by type of mechanics they’re using.
• Within those newly formed groups:
  – Arrange the puzzles by order of complexity;
  – Identify missing logical steps;
  – Plan to fill in this logical steps by going back to step 3 and sketch more puzzle situations.
• Lay them out within the level design (previously defined).

One of Out of Line's puzzles super zoomed out ready to receive final art. Cool!

This was the last step on this 5 step design process but you’re probably asking about playtesting, where is it?

Although there is some testing included in the process, solely by the designer (or a team member or two), we know how extremely valuable it is to do extensive play testing with people from outside the team. For this blog entry I wanted to focus on the creation aspect of puzzle design, maybe I can come back in a future blog entry to talk about testing, who knows. . .


That is all from me, hope you enjoyed the read and found it interesting!
Feel free to comment and share your own process, I’m always down to discuss game design :)


...ufff. Thank you Wilson!
So, did you get all that? We hope you did.
Also, let us know how much you love this type of deep techy blogpost so we can convince some more team members to try it.

So long, King Kong.

Tuesday, 24 March 2020

Remotely working

Working remotely or remotely working?

As the international crisis of the corona virus pandemic takes over the world, we at Nerd Monkeys here in Lisbon, Portugal decided to start our quarantine 1 week ahead of the government imposed one. It seemed obvious that this was the correct course of action as many other companies were already taking the same steps.

So, since the 16th of March, everyone has been officially working from home.
For some team members this is a brand new experience, while for others it is something that has been part of their lives for some years now.

Diogo is obviously pretending to work. You can see in his glasses the cubes from Minecraft reflected.
Also, he is working on the laptop while holding a coffee mug. At least he could have disguised it a little bit better.

Francisco is a bit smarter. He decided to take a photo showing his computer screens with Unity and some artwork assets. You would be almost fooled to think he was actually working but then you notice it. Right there. In the left corner. A Nintendo Switch! ahAH! You can't fool us Mr. Santos!

Genebra is a programmer and because of that he thinks he can outsmart everyone else due
to his (supposedly) more logical thinking. Well Mr. Spock, you can't fool us!
If you look closely to his fingers of his left hand, you can perfectly see he is using WASD in conjunction
with the mouse on his right hand! HE IS PLAYING AN FPS GAME!
You see Mr Watson, he thought his Photoshop skills were just perfect enough
to hide the images on his screens, but he forgot to hide the most obvious piece of evidence... HIMSELF!

Filipe doesn't even hide it. Here he is "producing"... with a Nintendo Switch in his hands.
At least he is honest about it even if the photo was taken by surprise by his wife.

Wilson's face says it all.
Nobody believes you dude.
We know you were playing videogames last week.

Mafalda said she didn't want to take a photo.
So we asked her dog to sneak one for us.
Here she is playing in her iPad instead of working.
She has no idea her photo will be on this blog.
Thanks pooch! Woof!

Inês Pereira is our new intern!
We can definitely with all certainty say she is indeed working!
It would be rude to assume differently anyway, so here is a "short" introduction written by her.

"Hello, I'm Inês and I'm from Almada. I've always been pretty sure I wanted to do something related to animation since I was a kid. I attended high school at António Arroio, where I studied Audiovisual Communication with a focus on Multimedia. From there, I moved out and attended college in Portalegre, and now I have a degree in Design and Multimedia Animation. Yay! Now while Nerd Monkeys is my first experience in the area, I did work retail for a little while (super glad I'm not there anymore, considering what's going on). I only spent four days in the studio before this all went down and we had to start working from home, which does make me a little sad because the learning process and getting feedback does become a little tougher. But hopefully all of this gives me a little more time so that when things eventually return to normal, I'll be going full steam ahead~!"

Boring, just like every other intern.

Anyway, have a nice isolation week!
Take care, teddy bear.

Wednesday, 4 March 2020

The story so far...

Do you like reading?
More than looking at pictures?
Here we go.

It all started when Francisco was 6 years old.
As a young and excited boy that he was, Francisco would play videogames for hours on end.
His parents still recall that one time when they thought he was crying because some bully made fun of him on the playground. No. Those were 10 hour long CRT videogame tears. The best kind of tears.
Yes. Because back in the day real men (or boys in this case) would play videogames on Cathodic Ray Tube TVs. You know, the glass box with a huge light bulb inside directly pointed at your eyeballs.

If you look closely, you can see the tears in Francisco's eyes (he is the one holding the controller)

Some years passed and Francis, now a young man, decided he would take on his life long dream of creating videogames by enrolling on a videogame course.
He decided to go to the best videogame course in Lisbon* where the best teachers taught. The Videogames and Animation HND course. There he met the greatest videogame developer (and teacher) of all time, Filipe**.
Together with Filipe, he learned that making videogames made him no money whatsoever. After all, why was he there teaching videogames instead of making them?

Filipe teaching... somewhere... something... in very low res

*We've heard it lost its charm recently
**He paid us to say this

During his tenure at Etic, Fran worked on a concept for a new and interesting videogame.
A platformer game about a little boy escaping from a factory. He would use his spear to construct his own platforms and activate buttons and things.
Helped by the greatest videogame course coordinator of all time***, Ivan, Fran and his colleague Vasco from IST, worked on Out of Line for 3 months so that they could apply to the 2018 PlayStation Awards.

Francisco and Vasco at Etic "studying" videogames
***He also paid us to say this

Amazingly and without anyone expecting it, they won the Portuguese PlayStation Awards!
They won the Best Game and the Press Award. They took home 10.000€, a PS4 dev kit and 50.000€ worth of marketing money,

Francisco and Vasco at the 2018 PlayStation Awards in Lisbon

Obviously, F knew that this was not normal as videogames normally don't make any money, so he asked Fil if he and his company Nerd Monkeys could help in organizing and producing the full videogame.
Fil met with Nerd Monkeys co-founder Diogo and Etic coordinator Iv. to discuss if this was a viable proposition.
After pretending for some time that they were not interested and that they didn't need more money or projects, they accepted.

(We searched for a photo of Ivan but couldn't find it. Maybe next time.)

Meanwhile, V. decided to pursue other cool projects and a new programmer was brought in.
João Genebra, or as we like to call him, J. worked on a brand new build and started everything from scratch with F.
After that, F. spent an entire year with F., J. and D. at N.M.working to get O.L. into a reliable V.S.

This is the strangest photo we could find of the team working

Nevermind, maybe this one is stranger
Finally and after almost 1,5 years of developing, showing, pitching and producing the team managed to get a deal with a publisher to get the game out the door.

But since we can't talk about the deal, the money or the publisher yet, the "story so far" ends here.
In its due time, we will get back to this and tell you the rest of the story, hopefully after a successful launch.

Until then...
Chop chop lollipop.

Tuesday, 11 February 2020

Production report = The boring post

Production report!
To all those of you out there waiting on more art and animation (or even code... argh) today is a sad day. Well for most of you anyway, there is always that one person that loves to hear production reports. So this post... is for you... with all our love (xoxo)

Weekly meetings = Boring stuff

One of the most important things we do every week is the weekly meeting.
We gather all the team in one place and discuss the work that was done last week, and the work we will be doing on the next. Kind of like a cult, except we make videogames instead of killing ourselves.

These meetings usually start at 10am and can stretch for an hour or two. Not everyone stays until the end. Normally it starts with everyone discussing general problems and then smaller and smaller groups to discuss specific problems related to code, design, art etc.
Usually whenever we start discussing code, somebody falls asleep. We can't blame them, really.
Code is boring. That's why everyone leaves and goes back to work.

A typical meeting at Nerd Monkey's office. In the photo, Diogo and Francisco discuss design.

Also, at the start of each month, the entire team plays the latest build and gives feedback on everything. Even if everyone has played the build lately, it is always important to voice everyone's opinion as most of the times, some new idea or solution pops up from the most unexpected team member.
Except for Diogo. Nobody likes ideas from Diogo.

Organizing production = More boring stuff

The start of the week also signals the start of a sprint. We do weekly sprints and keep everything tied to these tiny focused loops of work. For keeping track of current and upcoming sprints, tasks, objectives, milestones and everything else we use Altassian Jira.

Old Jira promotional screenshot. What? You thought we would take a screenshot of our own work?

Up until recently we were using Gitlab on our own server. But due to the growing team and the need for a more dedicated tracking, we decided to jump to Jira. The IT guy wanted to kill us when Filipe told him we were done with Gitlab and all that work implementing it in our server would be thrown out. Oh well. We hope he learned his lesson. Also, our budget just increased! Cool.
Yeah, he should have studied something else. Back to school with you, boy!

Jira is an interesting piece of software. It can be used online or downloaded to be placed on our server (we won't be doing that, now. Obviously). Currently there is a free version with a 10 person limit which is perfect for most indie teams. It allows for connection and sharing with other tools like Slack, Google Drive, Confluence, Trello, and many others.
NO, it does not connect with Microsoft Messenger, MOM. Jesus!

We are also currently placing all our bugs there, but when we get to Beta we will probably move that to a more dedicated platform for bug reporting.

We continue to use Gitlab for many other things including our own dedicated Wiki.
And our wiki contains a big outline of... Out of Line... hehehe. Yes.

Files and online meetings = Even more boring stuff

We are always all online in Hangouts. Even though the entire team works in a physical office, this way if someone was out for one day of work or decided to stay home to work from there, can keep track of any important announcements. Also: memes.

For overall trips, vacations, days off or any other events, we use Google Calendar. This tool is very useful as it can be easily implemented on your phone (Android or iPhone but not Windows Phone) and synced to notify you of upcoming events. We can also all see at a glance the most important milestones without having to login to Jira or Gitlab.

Alongside the company Google Suite (nerdmonkeys.pt) we also make extensive use of Google Drive, mainly Sheets, Docs and Slides for all our documentation. We usually write in English to make sure that anyone on the team can read them. They are also usually very useful for pitches, presentations and any other occasions.

Yeap, another promotional screenshot. Easy to tell by the Cortana search still on in the lower left corner.


Finally the production report. Every month an email is written where a breakdown of the production with all its achievements, decisions and on-going production is det-BOORRRIIIINNNNGG!

ARGH! - sigh - Well, that's it, I can't take much more of this anymore.

We are done here.

Hope that one person that we love so much actually liked reading this blog post. Next time we will be going back into the things that matter like art, animation, music and such... except for code.

Catch us on Twitter!
Don't panic, flight mechanic!

Monday, 3 February 2020

Animating San

The animation of San.

In the last blog post we talked about how San was redesigned.
In this one we are picking up the new design and showing how animations evolved.

On the Left, the new San running animation. On the Right, the old one.

As you can see, the new San is much more upbeat, happy and overall more energetic. With the old design, even if we wanted to give him more energy it would be harder to show.

Also, we now have multiple versions of the same animation. So whenever you are running, we will play a slightly different version making everything look way more natural.

What about walking? I hate running around everywhere, can't we just... walk?
Yeap, sure you can,"San".

On the Left, the new San walking animation. On the Right, the old one.

Again, when redesigning, we took the opportunity to think about the look and feel of the character.
Also, just look at that belly on the old version. What is THAT? Is that a beer belly? We will never know.

We kept the same pipeline, and just like before, animations are being done in Esoteric's Spine software. Thank you, Esoteric! The team loves you and if you can read this, send us extra free stuff.

San's bones, instead of white, are colored. A major problem for hospital's X-ray machines.
Originally, animations were done by Francisco, but as the project grew we needed a dedicated animator to join the team. We printed a world map and hung in on the wall. Then we grabbed a dart and threw it with our eyes closed...
Anyway, Barna Nemes came all the way from Hungary and he took the mantle of rigging and animating San with amazing results.

You can follow Barna on Instagram here.
You can buy maps to print here.
Professional darts here.

Currently San has MANY more animations. Those include things like "idle", "throwing spear", "jumping", "falling" etc. We also have more characters with their own rigs, animations and so on.

Out of Line is getting bigger and bigger by the day and it is wonderful to finally see this project coming to fruition.

See you guys next time!
Que te pasa, calabasa?

Thursday, 23 January 2020

New San, new life

Out with the old and in with the new!
San has a new design!

Yeap, we changed how he looks, how he animates and even how he interacts with the environment and his spear. After an exhausting design and review process we ended up with a cool new version of our main character.

New San on the LEFT and old San on the RIGHT

A Photoshop mockup. Actual size of the final character in-game is slightly different.

Of course the change wasn't done just like THAT. There were tons of studies done, TONS!

So, the focus for the new designs was to try and find a more likable and relatable character while also improving upon the original design. We also needed to give more emphasis in to the character movements and the way he can express himself so we started heading towards a slightly taller character, testing new forms, colors and other options for his eyes.

You can still ear the sad voices of all these characters saying "pick me... pick me... pick me..."

A chord was struck, the design started to lean more towards the taller characters. Also... COLORS!

Some final attempts to try something completely different and opposite. Note: one of these is not like the others.

We were all a bit worried when trying to change the character into something new as everyone in the team got attached to the "old" San. But the future is here... or there... it's somewhere, I guess. So there... or here?

That's it! We are really happy with the new design and the team is happily working on a lot of other things that we can't wait to show you. Mainly how the new San is animated! We will show it on our next blog post.

Don't forget to follow Out of Line on Twitter on take a bigger leap of faith and follow some of the team's personal Twitter accounts (we are not responsible for what you find there).

The Official account - Out of Line @outofline_game
The Visionary - Francisco Santos @FranciscoMSart
The Programmer - João Genebra @genebruhh
The Producer - Diogo Vasconcelos @diogostuart
The Co-Producer - Filipe Duarte Pina @FilipeDPina
The Designer -  Wilson Almeida @foolean_logic

Get the point, double joint?