Modular Design
Modular design is an approach that subdivides the system into smaller parts or modules that can be independently created and then used in different systems.
​
A modular system can be characterized by functional partitioning into discrete scalable and reusable modules. Besides reduction in cost and flexibility in the design, modularity offers other benefits such as augmentation (adding new solution by merely plugging in a new module), and exclusion.
​
Examples of modular systems are cars, computers, process systems, solar panels and wind turbines, elevators and modular buildings.
Modularity in Game Design
Same as for games, modularity is an essential part of the video game industry and in particular game art. The idea for modular models is to create fast environments with tilling models and maximum flexibility. This allows game artists to create vast and bigger scale worlds due to the reusability of the assets. This also allows more efficiency in time and working hours.
​
As Joe Burgess from Bethesda Game Studios describes it at the GDC 2016 (Game Developer Conference) and in his personal blog as Lego blocks, and describes how quickly and easily it is to snap modules while working on the project.
​
Many props in my project could be approached in a modular way; the floor, the café bonjour building, the pergola, the sidewalk, the side rail, etc…
4
5
Modularity
Examples
Side Rail
First, I will explore the side rail example and show how working in modularity saves up time and polycount.
​
Instead of modeling the full side rail into one mesh, I stripped down the mesh to modular pieces. By combining them with meshes from the balcony, I was able to save time, polygons and texture space.
With the side rail kit, I was able to create various blueprints in Unreal Engine and similarly to Lego blocks, I reconstructed the side rail and the balcony rail using the side rail meshes.




![]() | ![]() | ![]() |
|---|---|---|
![]() | ![]() | ![]() |
Pergola
Next I worked on optimizing the pergola. The pergola stretched along the façade of the shop, stretching along 11m. So I divided it by 11 pieces (to keep my modules in the incrementations of 1m as much as possible or 2 or 4m). Each piece could be stripped down into 3 main elements:
-
Plexy
-
Long beam x2
-
Short beam
​
After exporting the meshes to Unreal Engine I created three blueprints: Pergula_Start, Pergula_Mid and Pergula_End.
Therefore, I was able to recreate the pergola and to have the flexibility to extend or shorten it, simply by adding or deleting a Pergula_Mid module. Not to mention that all three modules are using the same meshes thus saving time modeling and saving texture space.
![]() | ![]() | ![]() | ![]() | ![]() |
|---|---|---|---|---|
![]() |
Walls
Same goes for the walls of the building; the exterior and the interior walls and the floor of the shop.
For the floor I made a 2x2m mesh. The inner walls 2x3.5m, while the exterior walls 4x3.7m. For the floor I had only one mesh and two for the inner walls.
​
I later on added variations through decals and adding meshes. As for the exterior walls I had more variations due to the fact of having or not having a window and the position of the window if it’s centered or shifting left or right, and to the position of the module if it’s a corner wall or a middle wall, which resulted into a kit made of 8 various walls.
![]() | ![]() | ![]() | ![]() | ![]() |
|---|
Outside Floor
For the outside floor, I modeled a 1x1m tillable mesh and in engine the size of my module would be 4x4m. Another module was needed by the size 2x4m.
![]() | ![]() | ![]() | ![]() | ![]() |
|---|
Side Walk
The sidewalk stretched along the building same as the pergola, so I had to optimize it and similarly to the pergola, I was able to reduce it to three modules; start, mid, and end. And those modules used three meshes: Planks 1x2m, SideBricks 25x50cm and CornerBrick 25x25cm.
​
I tried to keep most of my modular meshes on the incrementations of the 1m (0.25, 0.5, 1, 2 and 4)
-
Planks x 3
-
SideBrick x 4
-
CornerBrick
6
![]() | ![]() | ![]() | ![]() | ![]() |
|---|---|---|---|---|
![]() | ![]() |
Balcony & Pavement
Another good use of modularity is reusability; I was able to reuse the planks I used in the sidewalk for the balcony with no extra cost or time.
Same for the pavements, I was able to reuse the SideBrick and CornerBrick in the pump base, the diesel pump base and in the pavements outside, in front of the entrance and the pavement in front of the land next to the station.
![]() | ![]() | ![]() | ![]() | ![]() |
|---|
WashZone
The wash zone was made from a similar structure to the pergola but in a different size. It had side modules.
The side module is used 4 times, thus I made it a blueprint in engine as for the top I was able to reduce it to 9 modules; 4 modules being used twice and one module used once.
Not the most efficient in modularity but all blueprints were reusing the same meshes from the kit. The choice was very hard to go modular or not on this mesh, but in the end I decided to do so. It was kind of a tradeoff since lots of elements are being reused by the various modules but in the same time the modules were not used that many time in the scene (once or twice each, only the side was used 4 times)
References
[1] Narco official trailer on Netflix – Published on July 2015 available on https://www.youtube.com/watch?v=U7elNhHwgBU
​
[2] The Vercetti Estate – Properties GTA Vice City available on https://www.youtube.com/watch?v=obrBTCNGsy4 min 5.00
​
[3] CNN - Lebanon trash problem not going away – Published on Feb 24 2016 available on https://www.youtube.com/watch?v=q1c7DJ70TW0
![]() | ![]() | ![]() | ![]() | ![]() |
|---|---|---|---|---|
![]() |
![]() | ![]() | ![]() | ![]() | ![]() |
|---|---|---|---|---|
![]() | ![]() | ![]() | ![]() | ![]() |
![]() | ![]() | ![]() | ![]() | ![]() |
![]() |
Using the offset technique, I created a seamless texture from the images I took of the wall. Then I used it on the café bonjour wall.
Café Bonjour Wall
False Ceiling
As I mentioned earlier sometimes you have to analyze and study if the modularity is worth it. I learned it the hard way since I went too deep into modularity for the false ceiling. After analyzing and studying the ceiling dimensions and calculating how much each tile should be in width and depth, I decided for my module to be one tile. This led me to create something around 16 different blueprints, three different kinds, and each has variations to it. Side, Mid, Light, Vent, Void etc…
![]() | ![]() | ![]() | ![]() | ![]() |
|---|---|---|---|---|
![]() | ![]() | ![]() | ![]() | ![]() |
I realized after a while that the scale of my project does not require that level of modularity, and that I plunged too deep into a mesh that would only be used once in my project. However, if I was working on larger scale project where this mesh would be reused countlessly in the level, this would be totally understandable. Thus I scrapped all the blueprints and went back up one level in modularity and created the same mesh using 4 blueprints
Gondola Shelves
After learning from my mistake while approaching the false ceiling, the same analysis went through my mind regarding the gondola shelves, which I envisioned at first to be totally modular, and I would break it down to the last piece and rebuild them in engine; back panel, hooks, side hooks, shelves, plexy, pricing tag, base, leg base etc …
​
While it is understandable if the shelves would be abundant in the level and would have a high reusability, then going this deep into the modularity is acceptable. Since it is not the case in my level, I went back up a level and combined the gondola shelf into one mesh and exported it to engine. Having two variations of the mesh each with different width.
![]() | ![]() | ![]() | ![]() | ![]() |
|---|---|---|---|---|
![]() | ![]() | ![]() | ![]() | ![]() |
![]() |
Global Kit
References
[4] Joe Burgass talk GDC 2016 Fallout 4 Modular level design available on http://www.gdcvault.com/play/1023202/-Fallout-4-s-Modular
​
[5] Joe Burgass Skyrim Modular level design available on http://blog.joelburgess.com/2013/04/skyrims-modular-level-design-gdc-2013.html
​
[6] Gamasutra Creating modular game art for fast level design available on http://www.gamasutra.com/view/feature/130885/creating_modular_game_art_for_fast_.php
![]() GlobalKit_01 | ![]() GlobalKit_02 | ![]() GlobalKit_03 |
|---|















































































