Architectural Designer Creates a Pixel Art Bathhouse

hey noah here in this video i'll be designing a bath house for my pixel art game chef rpg and showing my design process for creating a building before i started game dev i used to compete in a lot of architecture competitions in my spare time i love doing competitions because you have the freedom to choose a competition topic that interests you and compete against designers from all over the world with your creations i've learned a lot of valuable design skills through competing in international architecture competitions and i'll be using the process i've developed over these years to create this bath house i hope this video can be helpful and give some insight towards the things that architects think about when designing a building the first step of any design process is to understand the purpose of what you're designing and any relevant project goals so in the story of chef rpg the bath house is a renowned establishment with over 200 years of history that tourists from all over the world come to visit it also acts as a community center for white ash harbor which is the town that your player will start at and it's a place where the main characters often come to hang out and socialize there's also a tea house in the building for hungry visitors based on this information we have an idea that we should design this building to have excellent public gathering spaces as well as being a cultural icon due to its long history now that we've established the project goals the next step is to conduct a site visit and understand the site's surroundings and how they can impact the building so here we are in the game i went ahead and created this small rock formation in a moderately forested area for the bath house site walking up we can see that this rock formation is made up of many small plateaus going all the way to the top we have this bigger plateau where the bath house structure will sit behind this rock there's a natural hot springs area in the future i'll probably expand the bath house to include an outdoor bathing area but for now i'll just focus on creating the building so looking at this site we can see that there's not a huge amount of room this means that we won't be able to create a building with a large footprint and we'll instead have to rely on verticality to fit in all the required spaces typically it's an architect's job to determine what kind of spaces or programs go into a building and how big each of these programs are for this step i like to use the 3d modeling program to get a feel for how big each space is in comparison with each other for a bath house we obviously need a main bathing area change rooms and a machine room this bath house is operated by a bath house owner and staff members that live in a bath house like in the bath house in spirited away so we will also need the owner's room staff rooms and staff lounge areas there will be a tea house located in this building to serve guests which happens to be one of the restaurants that you unlocked throughout chef rpg so we will need a fairly large space for this tea house as well finally the bath house will need a lobby which is the first space that you enter and provides all the circulation to all the different parts of the bathhouse now that we know what spaces to include we can begin creating some architectural concepts there's typically two ways to approach architectural design the first is to take a pragmatic approach and to address the spatial needs of the program and site and to make the building as well functioning and as comfortable as possible the second approach is to understand the historic and cultural implications of a building and craft an artistic narrative with your building design good architecture will do both so i think it's important to design a project both from a pragmatic perspective as well as from a cultural perspective starting with the artistic narrative my character designer created a bathhouse owner before i started creating the building and i thought using this character as a reference could be an interesting way to approach the design this is aelin who is an android with japanese geisha characteristics i won't spoil too much about her story but she has a long history with the bathtubs and at a certain point in time she took over as the bathhouse owner the bathhouse will have numerous modern upgrades it should be a fusion of historic architecture and high-tech machines and should reflect aylin as a character when creating a building it's important to think about the experience of a visitor from beginning to end using section drawings i draw out all of the different rooms that a visitor passes through in order and through this diagrammatic process i can start designing each room for what i want a user to experience at this point it doesn't really matter what the building looks like on the outside and i really just want to focus on the experience of each room the first room is actually the exterior entrance of the building since this is the initial encounter and the first time a user comes close to a building designing this experience is really important since this first encounter will set the tone for the rest of the building in this case i want to create that experience of looking up and seeing layers and layers of different forms almost like a pyramid structure this way the building isn't superimposing and looming over you but at the same time it still feels impressive and majestic the next room is the lobby which will be the link to all of the different rooms in the bath house i don't want to over complicate this bath house by adding a bunch of circulation hallways so i just want to rely on the lobby for circulation for lobbies you typically want a high ceiling since it's the place to welcome your visitors and create a good first impression the change room will come right after the lobby i'm going to make the ceiling of this room a bit lower and the space is a bit tighter so you get a bit of a compression before entering the baths it creates a nice contrast for when you enter the main baths which opens up to be just one big room with high ceilings and unique architectural features the main bathing area will sit in the middle of the room with maybe some smaller baths on the side for the lobby i'll just draw a little tunnel like this and create the space for the tea house nothing too fancy here just a decent sized empty room to be customized by the player for the remaining rooms we will have the staff lounge staff suites and owner suite not too much to say about these but just trying to set a size and height for these rooms so i'll have a better idea of the direction to go when designing the details jumping back into the 3d modeling program we can extend these flat planes based on the heights of the sectional drawings and now we can drag them around like legos to get a better feeling for the massing and at this stage it's easy to rearrange the blocks until we arrive at a massing option that we like so after playing around with the forms a bit this version seems like it could work pretty well starting from the lobby we have the tea house one level above on the left side the change room and bath house continue on the ground level with the bath house having this really nice high ceiling the staff rooms kind of sits here in the middle with the owner's room located at the very top if i draw the whole building out in section it will look something like this since the building gets a bit longer on the back side a part of it will likely overhang out over the cliff though we won't see this in the game since it would always be in top down view so there's a lot of rooms in this bath house for this video i'm just going to focus on designing the lobby change rooms and baths area these will be the most complex spaces to design whereas the tea house aliens room and the staff rooms are relatively straightforward rooms and they will have similar aesthetics to the lobby and the bats also i don't want this video to drag out so i'll just focus on designing the most interesting rooms at this point i can either continue designing it in a 3d program but personally i prefer to sketch the building from an elevation view drawing an elevation lets me explore potential architectural details and develop a coherent character for the building which is hard to get if you are trying to model it in the computer after going through a ton of different sketches and options i finally arrived at a visual concept that i really like so one of my favorite historic buildings is the hagia sofia in istanbul what i especially like about this building is that layering of different shaped volumes on the exterior if you don't look at it closely the forms look almost chaotic it looks as if it has multiple buildings pieced together to form a greater hole i really dig this layering and using that idea i eventually came up with this sketch for the bathhouse i don't want to just follow traditional japanese architecture for this design but instead i'm creating a fantasy style architecture inspired by japanese architecture i really want some complexity in this building so i designed it to be a composition of smaller volumes overlaid on top of each other like the hagia sofia cybernetic add-ons are attached to the right side of the building which helps to indicate that renovations have been made to this building over time and to create that juxtaposition of old and new this big chimney over here will help pump out all the excess steam from the baths and creates a nice visual balance against the overhang on the left side up at the very top we'll sit the owner's suite i also redrew this bathhouse from a different angle because i really wanted to get a better feel for its shape here's what it looks like from the side view and this time i colored it in to get a better sense of the building's materiality so now that the design is ready it's time to draw it in pixel art since this building has a pretty complicated form we can directly import the sketch into photoshop and trace over it i'm just starting with the roof outline and blocking in some colors to see how it looks so right here i noticed that if we use straight beams like this it doesn't look quite as good as the sketch which has this curved roof the curved roof gives off this really nice fantasy look so i'm going to change to curved beams to match the initial sketch just creating some of the roof details now making sure to create some weathering on the building and showing some paint peeling it is a pretty old bath house so it shouldn't look like a pristine new building also due to the background the green colored roof kind of blends in with the trees in the back i decided to add some steam in the background which adds this nice mysterious look and really highlights the bath house a lot more finally to finish the image off drawing in the pathway to connect the ground pretty much just following the initial sketch since i really liked the sketch and didn't feel the need to change it too much and there we go the exterior is complete moving on to the lobby now i really want this space to feel really inviting and be really clear in terms of where the circulation routes are i established earlier that the access to the change rooms will be on the ground level it's important that the change room entrance sits right in the center of the room so that it's really clear and draws the player in now although i don't want to design this room to be completely symmetrical which would help emphasize the change room entrance i can still design the room in a way to put more focus in the center i can do this by using a stairwell in a lot of traditional european architecture they often have this grand central staircase to create that dramatic atmosphere for arriving guests here's an image of the opera garnier in paris which has this famous central feature stairs looking on this image the staircase draws our eyes first towards this door right here in the center and then to the two sides at the top of the staircase staircases helps to emphasize and focus the important areas in a room by drawing your eyes towards certain points in the space so for this lobby i can use a staircase to help with navigation and pathfinding that way you have lines pointing towards the center of the image which helps to emphasize the importance of this door i want the stairwell to feel continuous so i'll keep this staircase going so that over here when it turns back we can access the staff rooms and finally at the very top is the entrance to aelin's room using this rough sketch that i created we can now jump in and add details with pixel art i'm starting by quickly creating a boundary for the drawing and i realize that certain parts of the initial sketch need to be widened because i don't want this space to feel too tight and compressed next i trace out the stairs and block it out with color you see here i'm starting to add a wood frame around the stairs i really want to continue that wood frame aesthetic into the interior i also want to capture some of that more chaotic composition we have in the exterior so i'm just dropping in columns and beams and testing some possible structural arrangements so now we have a pretty interesting framing system going on here and i can start painting in the walls after that we can create a new wood floor that will be used for the rest of the bathhouse next are the railings which i'm using a green color here since i think it creates a nice contrast with the rest of the scene the exterior also uses a lot of green so this creates a nice continuity between the exterior and the interior finally i'm adding some color overlays on the flooring to give it occlusion and to show where the lights shine i know this breaks away from that perfect pixel art look but i think it gives the drawing a lot more depth and clarity so i'm okay with taking the game's visuals in that direction instead of trying to preserve the traditional pixel art look now for some finishing touches to make the scene come alive i'm adding some mechanical units poking out in the edges of the scene to show that evolution of the building over time and to create that juxtaposition of old and new which reflects aylin as a character finally after adding in items like potted trees hanging paintings and a digital sign the scene looks fairly complete so there we go i might come back in the future and decorate this room with more objects but i'm pretty happy with it so far jumping into designing the baths area we can again start with a sketch to lay out the key components the player will first need to pass through the change room to get to the baths we will need to have a lot of private changing pods as well as a washroom area we can put the changing pods on both sides of the entrance and washrooms on the left side sinks right in the front and the shower area on the right side i want the circulation to go around the chain room like this instead of going straight through the middle of the change room typically you want to visually obstruct these zones a bit and kind of hide the bads area until you're ready for that grand reveal for the baths we will have the main baths right in the center potentially with a colonnade surrounding it we can also have some smaller more private baths on the side just like the lobby i'll drop the sketch right into photoshop and start creating a border again i realized that the floor plan in the sketch is a bit too small so i'll have to expand some of these spaces to avoid it becoming too cramped after i've drawn in the basic shapes and colors i now have a better feel for the space and can use this drawing to make some revisions to the design first the shower area will need pipes and valves and maybe some places to sit these capsule doors over here look a bit plain right now so we will need to design these to be more visually appealing for this area between the two sinks i'm thinking of creating some sort of fire pit to create a more welcoming change room in the baths area we want some sun chairs for the guests to sit and relax over here should be the exit to the exterior baths which we will need to add some doors for on the right side there won't be a door here so i'm thinking of adding some sort of sauna space the remaining two empty spaces here aren't very appealing right now so i'll probably move the small baths over to fill in the gap currently the scene is still looking a bit empty and i really want to have more focus on the central pool so taking the wood frames from the lobby we can drop in the beams and see what sort of forms could be created i got the idea of creating this wood frame ceiling that hang above the scene so they create the visual style we're looking for without obstructing the scene looking at it again it's definitely getting there i think this cool criss-crossing wood ceiling should be pushed further so i'll just quickly make note of where more beams can be placed i think this addition really helps to push the focus more towards the central pool now that the ceiling is complete the scene is looking a lot nicer and doesn't look as empty one last thing i want to change is this big window here which i think is too plain and doesn't match the wood beam aesthetic it needs some of that complexity and structure that exists in the rest of the bath house so i'm just sketching in lines to get a feel for what's possible next we can move around with beams till we get a structural aesthetic that looks good after playing around i arrived at this composition featuring wood frames and shoji style windows which i think matches the wood ceilings pretty well finally i'll quickly finish off the change room i went ahead and filled in some details like sync mirrors and made more detailed change room dividers bathrooms and shower areas the change room doors look a bit plain right now since there's a bunch of them in a row and they look pretty flat one way to fix this would be to make these doors rounded to help offset that over abundance of straight edges with that fixed it looks a lot better and the rounded doors also give off a bit of that fantasy vibe so there we have it we got the exterior the lobby and the baths the rest of the rooms are more straightforward and will essentially have interior designs similar to what we've made so far if you notice here the interiors are much bigger than the exterior of the building and i deliberately did this because of the restrictions of the top down view if the building is too big you will no longer be able to see it in the game's viewport this is typical for all top down games where interiors are much bigger than the exterior of buildings for now i've imported these sprites into unity and we can take a tour to see how it looks in the game before i jump into the game i want to mention that chef rpg will be launching on kickstarter on november 16 and i'll be launching the first trailer and the steam page on the same day as well which will be pretty exciting if you're interested in pre-ordering the game and helping fund its development hit that notify me on launch button on the kickstarter page to be notified when the kickstarter begins now let's take a tour of the bathhouse so here we are at the base of the mountain once again but now we have a path that takes us up arriving in front of the bathhouse we can see that the bathhouse is still pretty big and goes off the screen currently i can only see the rest of the building if i equip my bow which unlocks my viewport in the future i'll probably add more camera options and maybe a cutscene here so that you can see the whole bath house entering the lobby we have some guests already wandering around as mentioned earlier the architectural composition really gives a sense of hierarchy for places to go with the change room entrance drawing the most attention the next most important point is the tea house with its ornate door the tea house is also complete but i'll reveal the tea house in the trailer to show how it looks when it's fully operational walking up from here we will eventually be able to access staff rooms and aliens room at the very top i added some japanese style paintings on the walls which helps to make the space feel more real and gives it more character even though this building contains a lot of unique architecture it still needs to reflect aylin as a character since she would have put her own stamp on the building when she took over finally let's check out the baths so first we arrive in a change room i went ahead and created some new bathing suits for all the characters we can put ours on before entering the baths taking a first look it's nice and steamy in here i haven't had the time to give the ai any special behaviors so they just walk around for now i'll also need to add a proper water shader in the future and maybe add more particle effects to really make this scene feel cozy maybe i'll add some mini games here so that there's more than just the socialization aspect so yeah really hope you enjoyed the video and hope this video was helpful if you are interested in design this isn't meant to be a tutorial on how to design real architecture or how to win competitions but i really wanted to show my design process and to give insight towards some of the things that architects think about when creating spaces for people anyways really appreciate all the nice comments and feedback these past months thanks for watching and see you next time

Channel: Pixel Architect

Views: 181,041

Keywords: Architecture, Stardew Valley, Animal Crossing, Eastward, Chef, Pixel Art, Pixel Art Tutorial, Gamedev, Indiegame, Bathhouse, Spirited Away

Id: JBzaK79Jm10

Length: 20min 41sec (1241 seconds)

Published: Sat Nov 06 2021