Architectural Designer Creates a Pixel Art Town

hi i'm noah and i'm an architectural designer and also a part-time indie game developer working on a pixel art game known as chef rpg why is an architectural designer creating video games well a few months ago i had just graduated from architecture school and wasn't mentally prepared to join the workforce i wanted to keep creating imaginative designs like we did in architecture studios but architect interns starting in an office usually have very little say in the design of projects i wanted to keep creating imaginative designs without the constraints of budget clients or even the corporate ladder in the past i've completed in many student architectural competitions winning some prizes here and there however i ended up jumping from one competition to another sometimes doing four competitions in the span of two months but without much direction or sense of why i was doing them i realized after a while that i just wanted to work on a single large project one that i can put all of my design skills into resulting in a product that many people could enjoy hence i got the idea to create my own video game which gives me an opportunity to create a fully unique game world and that leads us to today i have been learning to code for the past few months and it's full steam ahead for the development of chef rpg for this video i'm going to be creating a seaside town using architecture and urban design techniques and showing my design process along the way i usually like to start with a sketch to kickstart a bunch of ideas it usually doesn't matter what you draw but it's super useful to draw something and have a base to start working from i'm imagining a multi-level town surrounded by a forest facing the water the town contains many branching paths leading to a variety of shops and activities there will be a poor area where a fish market and fishing boats will be located so with this rough sketch the first thing i want to do is determine primary circulation routes and the massing and function of buildings it's important to determine a central route of travel and it should pass through the town square this route should be designed wider and will therefore be more obvious to the player in urban design it's important for these primary circulation points to connect to primary nodes of activity in this case the nodes will be the town center and the entrances to the other maps having secondary roofs helps to create permeability and greater mobility in the town in a city you generally don't want to create a dead end in a public road unless it ends at a point of interest so the same thing applies here i played a lot of games where levels are designed with a lot of dead ends often for no reason and it usually kills some of the fun and that feeling of freedom another important aspect of good urban design is opening up the buildings up to the pedestrian realm in a city the most popular streets that pedestrians like to gather are the ones that are lined with shops and activities the places that are not popular are streets alongside a big blank face of a building or uncontained plazas that are way too big it's important for public spaces to have a permeable membrane where activities can happen on either side and where people can pass back and forth for the design of the seaside town it's important to align all of the pathways with shops and activities related to the game this strategy helps to maximize liveliness and even player immersion finally it's important to design the town based on constraints of the top down view since this is a top down 2d game the player can only look at everything from one direction and therefore you get into this weird situation where you never see the backs of any object from the side it would look like this if you create anything with height and your player character walks behind it your character would no longer be visible in this dead zone some games fade out buildings or objects to reveal the player but i think this isn't the best solution first of all it just doesn't look good especially if it's a big object and second you would still have all this dead space behind the object that isn't used for anything my solution is to just design the map in a way that minimizes the amount of dead spaces that exist for example instead of having a flat surface you can simply lift the ground up and the dead zone is eliminated this creates a cliff which is a nice visual addition and adds some verticality to the scene a second option is to add some lower objects in between to mitigate the dead space like trees in this case the character will only be partially obstructed by smaller objects but you would still be able to see the character one last solution is to embed the building right into the ground this also helps to add verticality to the scene and provide some interesting variety to the environment instead of having only freestanding buildings with all this in mind i have decided that the town will be built on a hill getting higher and higher towards the top of the map using hills and cliffs to improve visibility is an old level design technique used in games such as pokemon and final fantasy in these games you can really see that they're an abundance of these instances and everything is built on a mountain now that the masting and circulation are set and the functions are labeled it's time to create some buildings i'm not going to go into too much detail into the design process of each individual building but i will talk about the general concept of each chunk of buildings and how i wanted them to relate and interact with the town as a whole because this is a rural town set in a sci-fi world i'm going for a mixture of old and new architecture to show that element of technology encroaching into the countryside i think i will use a mixture of both european and asian architecture much like the world design of a lot of studio ghibli films taking the bath house from spirited away is an example the front of the building contains obvious japanese architectural influences however if you look at the back side it features an industrialist slash steampunk aesthetic and the interiors of this bath house contains elements of old european architecture this combination of styles is really interesting and brings a dreamlike quality to this architecture the architecture of chef rpg will contain similar elements however because the game will be set roughly 40 years ahead in the future the steampunk elements present in a lot of studio ghibli films will be traded in for cyberpunk styled constructions so less copper pipes and steam and more robotics and neon lights so we're going to start with the upper portion of the map where the market is located these buildings will be taller and have shops all along the ground floor two to three story buildings with shops on the ground and residents on the upper levels are sort of an ideal typology for creating engaging pedestrian spaces since this is a rural town there's really no reason for any building to get any taller than this i wanted to use a sci-fi style for these buildings combined with some older stone buildings in the middle this segment will contain the butcher shops with the town square right in front i felt here that it's better to just have open shops where your character can directly interact with the butcher instead of creating another doorway and another room for each individual shop because doing that would result in too many rooms but more importantly if there's a room for every single shop it gets annoying for the player to have to go in and out of every building to buy all their ingredients and deal with potential load times each time on top of that i really just like the aesthetic of these tight and compact open market stalls the market should really feel alive so i'm just adding a selection of meats sausages and whatnot since these buildings are relatively large when you're actually playing the game you probably won't be able to see the entire building in the surrounding context creating as much detail as possible on this smaller scale really helps to bring the scene alive on the right side of these three buildings will be a clock tower followed by some veggie fruit and liquor shops i decided to add an older brick cafe building here and this could be a sort of tavern where the player can meet and interact with a lot of npcs again going for a mixture of building styles in this area i wanted to show a messier more organic side of the town sort of contrasting with the higher end buildings on the left since this town is essentially one big market big lit up signs are a must-have finally adding a sidewalk helps to contain and mediate the buildings and the main square this also helps to add a bit more color and variety to the scene here i think it's really important to give the ground a bit of variety and texture to make it really worn and dirty the worst thing that could happen is if everything looks really sterile i decided to throw in a little brick in here for the cafe although i don't know if this aesthetic will stay going back to the idea of the high tech encroaching onto the traditional some metal vents with blinking lights straddle this old structure creating an interesting juxtaposition and that's about it for the upper segment next i wanted to create the center portion of the map which links up with the market and town square starting on the right side there's going to be apartments and general store for buying a variety of common ingredients here i wanted to isolate the apartments on an elevated platform to divert away from the main path on the right i decided i want to add more shops instead of leaving an empty space here i also just remember that there needs to be a hair salon and some clothing stores so a lower path alongside ground embedded stone buildings fit this space really well these will be facing the waterfront again similar to the upper buildings the ground level will feature shops and activities and the second level will contain residences i'm really trying to be careful how many doors i draw because it should really be a game where every door is accessible this is really important when creating an open world rpg and especially for 2d rpgs where being able to access every door is essentially a given at the boundary between the town and the water i wanted to show that encroachment of corporate technology the waterfront buildings are shielded from the water by this cyberpunk style metal barrier i'm playing around with the idea of just one corporation that supplies advanced infrastructure and energy to the game world this could be one example of that this metal barrier could help to protect the town from floods as well as generating hydroelectricity however the town folks will forever have to live this reminder of the power and influence of these corporations the final zone features the docks which the fish markets will be located i'm starting by setting up the wooden promenade which leads to the center area where the player can eventually have access to the fishing boats i left a little dead end here which could be an interesting spot for future story events for the design of the buildings i'm really inspired by asian fish markets just the liveliness of them all the color and energy now i don't think it's really practical to create such a large market in this game since it would just end up being a background with minimal function i think two shops in this area is enough and adding more would just drag out the gameplay imagine having to go through 10 different shops to buy all the seafood you need so trying to capture as much of the essence from some asian fish markets i started developing a similar aesthetic i'm also creating a supply store and two booths for fish stops starting with a structure on the left i wanted to mix it up here and use wood construction architecture to match with the docks this also makes practical sense because heavier structures made of stone or metal would not be able to be supported by some wooden stilts markets like this typically look amazing at night because of all the lights and colors so i'm making more spaces to put in some signs in the future on the right side of this structure i wanted to introduce that corporate technology element i'm imagining this big metal machine latching onto the side of the building almost like a parasite to finish up the fish market i wanted to throw in some colorful hanging lanterns just to bring in some more color and to provide light at night these look good for now but i think i will come back to this in the future and just bring in more lanterns and more neon signs really just trying to bring in as much life and energy into the market as possible going back to the upper segment i wanted to add a couple more buildings on the outskirts of the town just to help balance the town out i like the aesthetic of the wood buildings and the docks so adding a couple houses on this edge balances the styles out over the map a building i previously made was dropped on the right side of the map which contains some shops and a crepe store now after the three segments are put together the whole map looks like this so definitely getting there but requires some finishing touches to really make this shine one thing that needs work is the transition between the hardscape and the grass a flat transition just doesn't look that good so here i tried to create a nature taking over slash post-apocalyptic look where nature is taking back the city i think it looks comparatively better than a straight end what i don't want is for this town to look really rigid even if the buildings themselves create a lot of straight lines there are plenty of ways to create a bit of organicism and chaos in the scene jumping back to the docks making the water look good is extremely important i'm not going to go into too much detail here but essentially i added a water line for animations adding some reflections over the waterfront structures and finally adding some wave textures of the water getting the water to look good in game will be fairly difficult and will likely involve the use of shaders in combination with animations here's the cyberpunk style fishing vessel from the previous video just implemented a quick water line and some underwater shading animations will eventually need to be added to this as well architecture and cities do not exist in isolation and their contrast with their surroundings are really what makes built forms unique so to really bring this scene together i'm finishing up all of the surrounding landscape and dropping in some trees i don't have too many preferences except to just create a good variety of randomness in the landscape the wilder the landscape looks the better so this may need some changes in the future to achieve that it'd be really cool for this to end up a semi-sci-fi village sitting in the middle of a rugged and wild landscape because chef rpg has an active time and season system i'm going to create a fall version of this map because everything just looks better in the fall it's a fairly simple process of selecting color ranges on certain layers and changing the hue until it reaches a color that you like and there you go the town is finally complete i think it looks pretty good at a distance though i have some slight concerns over close-ups of certain areas so some of these areas may need to be revamped in the future finally i'm going to just import all this into unity and we can take an in-game walk-through to see how it feels so here we are in unity i'm currently just placing some tree prefabs i made earlier and dropping them into the scene animations and season change scripts have already been added to these trees so it's really just a simple matter of dropping them into the map here i'm creating a series of polygon colliders in a map so that your character won't just walk off the map and won't be walking up walls so after a couple more adjustments in unity the map is now at a working state for now i'm going to jump back into the coding side of things and really push the cooking gameplay to a working stage really looking forward to show you guys the restaurant gameplay when it's ready i'm going to leave you guys with a quick in-game walkthrough for now i dropped in some randomly generated npcs with a basic ai so that they can walk around town with some people walking around the town we can get a general feel for the town's atmosphere hope you enjoyed the video thanks for watching and see you next time [Music] do [Music] um [Music] you

Channel: Pixel Architect

Views: 582,037

Keywords: Architecture, Pixel Art, Indie Game, Gaming, Stardew Valley, Animal Crossing, Design, Art

Id: KMJbhee4xTk

Length: 17min 42sec (1062 seconds)

Published: Sat Jan 16 2021

Reddit Comments

[u/jakeisawesome5]

This is a great insight into urban planning and a well made video. Can't wait to see what he does with this game