• We have updated our Community Code of Conduct. Please read through the new rules for the forum that are an integral part of Paradox Interactive’s User Agreement.

Developer Diary | Art & Achievements

Hello, and welcome to this week's Dev Diary!
I am HOI’s 2D artist and am the one who makes the little buttons, icons, and whatever gets thrown in my way for you to look at and push on, and today I have gotten the opportunity to talk about my work!
So let’s start at the beginning, how does a project start, and how and when do artists get involved?

Being an artist on a project such as Hearts of Iron is not an easy piece of work. You need to be on your toes and ready to adapt to whatever task your colleagues want help to solve. It usually involves a bit of text and a ton of reference material. And to gather all of these things we use a tool called Miro.​
image47.png

It’s essentially an online whiteboard that can be used however fits you and your team best. On our Miro, we separate the features into columns that give you a quick overview of what we need to complete for the upcoming update.
The columns are usually divided into Focus trees and Features that are expected to get art during the project.
As the project starts it’s not uncommon for the Miro to be a bit empty. A lot of the research for what can be used, artwise, is a pretty heavy task to bite into with all copyrighted photos out there. Our amazing content designers spend quite a lot of time on valuable research, sorting out what is necessary for the game to make sense as well as adding flavour to your gameplay. And yes, this takes a fair amount of development time to gather all this valuable information as well as imagery that will communicate the right thing for you when you play HOI.

As time goes on, more art tasks will fill up the Miro board. So, for an artist at the beginning of a project, it can range from doing some cleanup work on older icons or portraits, starting to work on loading screens, continuing setting up the Miro board for the DLC to their taste or helping with another project that needs some extra art-hands.

But back to BBA and our work there!
We already know what kind of art we want to have for each focus tree, it's more the quantity that is a fluctuating number at this point and it's still uncertain how much we can make in-house. I always try to convince my CDs to ask for art to their heart's content because we always prioritise what needs to be done so the things that matter the most get the art it deserves first.
When all High Prio art is done, if time allows we continue with Medium and last of course the Low. We also have, for whenever we manage to wrap up art in a timely manner, a special section that is called a “wish-list” or Corner of Shame. It's essentially Low Prio art but stuff that maybe was more of an afterthought or just forgotten for a Feature or a Tree that would be extra sweet if it got some new shiny textures.

Without giving too much away, here's a heavily zoomed-out version of how a Miro board can look like that I as an artist work with. And yes, I was in charge of all the Focus trees and the Plane Designer for this DLC (granted I did not make all the art, we also outsource).
image48.png


We use a colour code to communicate what's going on on the board! All of them also have a little stamp on them to mark what Prio it has as well as a text section where CDs write what they want to communicate with the icon they request. As you probably can see, there's quite a lot of information that needs to be shared between the departments before art can be worked on.
It’s our transparent way to communicate with each other, CD’s can see how much I have done and how much I have left. They can also see my schedule on what I’ll be working with each day. This means that CDs can also ask to get prioritisation over each other if their Focus tree or Feature requires art sooner rather than later and this is constantly brought up and talked about on our syncs together.
Communication is key!


Here is an example of how a request turns into an icon (that you may or may not already have seen):
image67.png

This is a typical request. It has an in-game name displayed, reference images provided as well as a description of what my CD wants out of the icon. It is also prioritised!


image53.png

And this is how it ends up looking!
Since we have quite the large art-library by now I can quickly iterate on what type of background works the best as well as reuse different layer styles to make the icon feel cohesive and on-style with the rest. I also made sure to hit all the marks from the requests such as;​
  • At least one donkey​
  • The donkey should carry (at least) a supply​
  • Add wheat bundles without overcrowding the icon.​
When the icon is in either a conceptual phase (putting the requested items together without rendering it further) or simply put together from our art library, I of course share the progress with the CDs so they can have to say their yay or nay. If I hit or missed the mark with the request if we need to re-think the icon in itself or just a 10/10 beautiful icon, ship it!
Also, one thing to keep in mind when doing these types of icons is remembering their size. All the things that a CD may want in an icon may not fit in the end or make it more or less unreadable because all the things together will just create noise.
That's when we artists step in and “take over” so to say with simplifying without losing the information that the icon should communicate.


This is also a typical request when a CD isn’t 100% sure on what would or could look the best and leaves that up for me to figure out:
image51.png

Icons are requested the same throughout the art process, so name, description, and prio are all there.
It's just that this time I didn’t get any reference material and that's perfectly normal!

And this is the result!
image59.png
  • I have the silhouette of Africa​
  • Railroad​
  • And industry​
  • And of course, a background to frame it all on​

Had I added coins to show off investment I would have crowded the icon. We usually have a rule of max three things in one icon to communicate what's necessary. After three it can start to become muddy.
Example of adding coins to this icon to communicate investment:
image56.png
  • Immediately crowded​
  • Silhouette of Africa is no longer a focus and is hidden​
  • The coins stealing the show​
So the TL;DR of this section is;
Use good Tools for communication, whatever that may be for you and your team.
Be honest and transparent with what's going on, what you need to do your part, and when you need it to estimate the time left on the project.
CDs do research, CDs request art, Artist look at the requests/ask questions, Artist make art, Artist share art with CDs and so the circle is complete.

Now when you kind of know how artists, or at least I, do work with content and for the project I would also like to share how the loading screen got worked on for BBA!

Ahh shit, here we go again.
Yes, I was thinking that we could get a little re-cap on how it is to not just make icons and portraits, but also be flexible and knowledgeable enough to pull off a loading screen. We artists are a jack of many trades so to speak and we do need to be able to adapt to a lot of different types of art tasks that need to be done for a project.

So, how is a loading screen created? It usually always starts with a prompt or a vision from one of either designers or content designers that are heavily involved in the upcoming DLC.
Essentially we want the loading screen/splash screen to communicate something in relation to the DLC, this time we want to focus on Italy and planes. Mostly because Italy has been heavily requested and we want to shine a spotlight on the country as well as showcase the plane designer!

The prompt is “Italian and American fighters incoming in a dogfight over Italian landscape

Cool. Let's go ahead and make some thumbnails then!​
image58.png

Once again several thumbnails are presented for the others to choose from. Typical hierarchy methods are used here, black = most visually interesting, grey = further away and white/light grey = low focus.
The last one, A3+5 was chosen and started to get some more details in a simple greyscale set-up. This time I quickly wanted to take it into colour and started to experiment with what kind of setting looked best.​
image55.png

After going with a more sunset/evening vibe, because it looks more epic, I started to experiment with the range of those colour schemes as well as trying out some different styles.​
image64.png

Here you also can see that I had no idea I was painting the wrong plane but that doesn't matter because we are still very early in the process and just trying to find a good mood.​

I also noticed that the balancing of the image was off since we need to take into consideration the different kinds of resolutions it's gonna sit on. So to solve this I pushed the whole image down and (thankfully) it was just drawing more sky this time!​
image60.png

(still, the wrong plane, don't worry about it)
The render phase is coming up and I’m not gonna lie, I’m not too excited to draw hard surfaces.
But luckily we have a fantastic 3D artist on the team that needs to model some planes for the DLC anyway! He was generous enough to pose the plane for me on top of my background and now it's just painting over them a bit to make them blend into the image and look cohesive.​
image62.png

(3D render of the planes)
image65.png

(3D render on top of WIP background)
What's needed now for the next step is to make the planes work together with the background as well as paint more details in the clouds.
I also need to add details such as motion blur to make the planes go woosh, which is a dilemma. How much do you paint before the details you put in get lost from said motion blur? Let's find out… the hard way


Along the way, I also realised… what if we tilt the plane some more to have the wing cut through the cloud better.
Needless to say, I asked our 3D artist to tilt his model and render a new one which he so kindly did.​
image68.png

Looks nice
But back to figure out the BG again.
After some back and forth with rendering in and out clouds as well as doing some touchup to the landscape I think I finally landed on something that I was happy with.​
image70.png

Adding motion blur, air trails, and a propeller as well as bounce-light and painting in the sky in the plane's window I think I made it work nicely together.
And the loading screen is done ✨

And now for something completely different! I was thinking that you guys might be tired of reading about the art process now so I’m just gonna drop a bunch of art stuff for you at this point.
Please, enjoy the small selection of what's to come for BBA!

Cute misc icons:
BBA_misc_icons.png


Focus icons:
BBA_focus_icons.png


Portraits:

Italy:
image77.png
image31.png
image33.png
image35.png
image37.png
image39.png

image41.png
image43.png
image44.png
image45.png
image46.png
image13.png


Switzerland:
image15.png
image17.png
image19.png
image20.png
image21.png
image22.png


Ethiopia:

image23.png
image24.png
image25.png
image1.png
image2.png
image3.png




Achievements for BBA:
Why yes, we can’t forget about the achievements for BBA now can we?
We always think about what type of achievement can be done for each DLC. This time around I hope you guys will have a few laughs and also maybe think “well that's easy” or “oh no… how?”

…and you get a canton, everybody gets a canton!
As Switzerland, have 24 states.
image4.png


I’m not locked in here with you…
As Switzerland, declare war on Germany and win.
image5.png


Swiss Cheese
As Switzerland annex 5 states that are not contiguous with each other or Switzerland.
image6.png


You Shall Not Pass
As Switzerland, win a defensive war without ever losing Western Swiss Alps, Eastern Swiss Alps or Ticino.
image7.png


The Lion that Roared
As Ethiopia, without being in a faction, force the Italians to make peace. Again.
image8.png


The Lion King
As Haile Selassie, declare yourself “King of Kings” and control Kenya and Tanzania.
image9.png


This time for Africa
As Ethiopia, found the African Union and have it encompass at least 13 different countries with capitals in Africa.
image10.png


Crusader Kings IV
Take Jerusalem as Ethiopia and move the capital there.
image50.png


The Red Sea
As Ethiopia, go communist and take all the states that border the Red Sea.
image52.png


Holy, Roman, and an Empire
As the Pope, restore Rome.
image54.png


Pizza Time!
As Italy, occupy New York, Chicago and Hawaii.
image57.png


Collect all the Romes
As Italy, continue holding onto the First Rome, and gain the second and third Rome.
image61.png


Nothing personal, Adolf
As Italy, take Austria before the Anschluss and never enter a faction with a fascist Germany (before 1945).
image63.png


Not today
As communist Italy, save Gramsci from the brink of death, make him the leader of Italy and form the Italian National Union.
image66.png


This time it will stick
As any Allied Nation (in faction with a democratic Britain), enforce a peace deal on Germany that disarms the Rhineland and makes it a demilitarized zone.
image69.png


By Beer Alone
As Germany, control Budweis, Tsingtao, and Guinness directly or through a faction member.
image71.png


By merit alone
Promote a Unit Commander to a general, and reach max level.
image73.png


Snakes on a plane
As Brazil, capture Rome with paratroopers.
image49.png



3D art for BBA:
Of course, we need to show, last but definitely not least, the 3D art that was made for BBA \o/
(some are still WIP )
image28.png
image29.png
image30.png

image32.png
image34.png


T-posing soldiers o7
image36.png
image38.png

image40.png

image42.png

image26.png

image27.png



Cute tanks ❤️
image11.png

image12.png


Adorable planes ️
image14.png

image16.png

image18.png


And with that, I’ll wrap up this week's, and last DD for By Blood Alone!
Thank you for hanging around for this long, I truly hope you enjoyed getting a peek behind the curtain of a HOI4 production!

/CreamGene​
 

Attachments

  • image1.png
    image1.png
    52,3 KB · Views: 0
  • image2.png
    image2.png
    45,8 KB · Views: 0
  • image3.png
    image3.png
    57,7 KB · Views: 0
  • image4.png
    image4.png
    8,8 KB · Views: 0
  • image5.png
    image5.png
    9,6 KB · Views: 0
  • image6.png
    image6.png
    8,9 KB · Views: 0
  • image7.png
    image7.png
    9,2 KB · Views: 0
  • image8.png
    image8.png
    9,6 KB · Views: 0
  • image9.png
    image9.png
    9,1 KB · Views: 0
  • image10.png
    image10.png
    8,6 KB · Views: 0
  • image11.png
    image11.png
    845,1 KB · Views: 0
  • image12.png
    image12.png
    998,3 KB · Views: 0
  • image13.png
    image13.png
    63,4 KB · Views: 0
  • image14.png
    image14.png
    1,7 MB · Views: 0
  • image15.png
    image15.png
    67,9 KB · Views: 0
  • image16.png
    image16.png
    1,7 MB · Views: 0
  • image17.png
    image17.png
    64,1 KB · Views: 0
  • image18.png
    image18.png
    1,2 MB · Views: 0
  • image19.png
    image19.png
    64,8 KB · Views: 0
  • image20.png
    image20.png
    58,8 KB · Views: 0
  • image21.png
    image21.png
    82,2 KB · Views: 0
  • image22.png
    image22.png
    67,2 KB · Views: 0
  • image23.png
    image23.png
    65,7 KB · Views: 0
  • image24.png
    image24.png
    79,1 KB · Views: 0
  • image25.png
    image25.png
    84,4 KB · Views: 0
  • image26.png
    image26.png
    2 MB · Views: 0
  • image27.png
    image27.png
    1,8 MB · Views: 0
  • image28.png
    image28.png
    2,7 MB · Views: 0
  • image29.png
    image29.png
    2,3 MB · Views: 0
  • image30.png
    image30.png
    1,5 MB · Views: 0
  • image31.png
    image31.png
    60,7 KB · Views: 0
  • image32.png
    image32.png
    4 MB · Views: 0
  • image33.png
    image33.png
    62,2 KB · Views: 0
  • image34.png
    image34.png
    4,5 MB · Views: 0
  • image35.png
    image35.png
    79,7 KB · Views: 0
  • image36.png
    image36.png
    343,3 KB · Views: 0
  • image37.png
    image37.png
    74,2 KB · Views: 0
  • image38.png
    image38.png
    332,2 KB · Views: 0
  • image39.png
    image39.png
    69,1 KB · Views: 0
  • image40.png
    image40.png
    2,9 MB · Views: 0
  • image41.png
    image41.png
    67,4 KB · Views: 0
  • image42.png
    image42.png
    2,1 MB · Views: 0
  • image43.png
    image43.png
    62,7 KB · Views: 0
  • image44.png
    image44.png
    72,7 KB · Views: 0
  • image45.png
    image45.png
    64,4 KB · Views: 0
  • image46.png
    image46.png
    74,4 KB · Views: 0
  • image49.png
    image49.png
    8,7 KB · Views: 0
  • image50.png
    image50.png
    9,6 KB · Views: 0
  • image51.png
    image51.png
    32,1 KB · Views: 0
  • image52.png
    image52.png
    9,5 KB · Views: 0
  • image54.png
    image54.png
    8,5 KB · Views: 0
  • image55.png
    image55.png
    557,4 KB · Views: 0
  • image57.png
    image57.png
    9,5 KB · Views: 0
  • image58.png
    image58.png
    1,6 MB · Views: 0
  • image60.png
    image60.png
    1 MB · Views: 0
  • image61.png
    image61.png
    10,1 KB · Views: 0
  • image62.png
    image62.png
    637,1 KB · Views: 0
  • image63.png
    image63.png
    8,2 KB · Views: 0
  • image64.png
    image64.png
    1,7 MB · Views: 0
  • image65.png
    image65.png
    4,4 MB · Views: 0
  • image66.png
    image66.png
    9,2 KB · Views: 0
  • image68.png
    image68.png
    452 KB · Views: 0
  • image69.png
    image69.png
    10,1 KB · Views: 0
  • image70.png
    image70.png
    4,3 MB · Views: 0
  • image71.png
    image71.png
    10,3 KB · Views: 0
  • image72.png
    image72.png
    98,8 KB · Views: 0
  • image73.png
    image73.png
    8,9 KB · Views: 0
  • image74.png
    image74.png
    83,2 KB · Views: 0
  • image75.png
    image75.png
    11,4 KB · Views: 0
  • image76.png
    image76.png
    421,8 KB · Views: 0
  • image77.png
    image77.png
    77 KB · Views: 0
  • image68.png
    image68.png
    452 KB · Views: 0
  • image72.png
    image72.png
    98,8 KB · Views: 0
  • image74.png
    image74.png
    83,2 KB · Views: 0
  • image75.png
    image75.png
    11,4 KB · Views: 0
  • image76.png
    image76.png
    421,8 KB · Views: 0
  • image33.png
    image33.png
    62,2 KB · Views: 0
Last edited by a moderator:
  • 56Love
  • 38Like
  • 4
  • 1
Reactions:
I'm not into achievements, but the art side of this diary was one of the most interesting I have read. It's fascinating to get a look behind the scenes and also helps us to understand how we can make good suggestions for future content. And I really enjoyed your low-key writing style. Thank you!
 
  • 6Like
Reactions:
This looks really cool! Will Switzerland get any new 3D unit models? Or will they be using the French models? Also, I'm guessing that patch notes are coming with release on Tuesday.
 
  • 1Like
Reactions: