Jacob's game art

[jacobsgameart]

In order to further polish my shop, I have been adding deferred decals to give the effect of grunge and wear on the brickwork. An advantage I found from having parallax occlusion on my brick material is that it allows me to place the decal either on top of the bricks or in the grouting between them. If the texture was rendered flat, it would just be a uniform application on the surface. I will definitely be using parallax occlusion materials in future as they give so many more options for visual fidelity. I also added rust drips from the metal corbels and gutter brackets. Another noticeable change is that I recreated the ‘bowing outwards’ effect seen in the bay windows of the actual Diagon Alley shops. 

[jacobsgameart]

I’ve been doing some more detail work on my shopfront. One major element that was missing previously was a gutter and drainpipe. To create this, I constructed a modular kit of assets. They are all grid aligned so they snap together and they are designed with my shop’s roof shape in mind. The pieces are all textured with a single tiling texture that I created in substance designer.

[jacobsgameart]

I’ve been working lately on getting the lighting right for my shop’s final presentation. I added lights behind the windows to cast a glow on the surrounding brickwork, as well as a few additional lights to highlight specularity on my materials. I’ve also been working on decorating the shop windows with jewellery. There will be more to come on this in the near future.

[jacobsgameart]

In order to get as much detail and realism out of my shopfront as possible, I dived into custom surface shaders for my materials. I really liked the way that the bricks stick out in the Substance Designer preview and I wanted to replicate that in-engine. I found the best way to do this without too much performance degradation is to use parallax occlusion. This effect works by raycasting from the camera’s position relative to the surface and layering the texture to create fake depth. It’s quite convincing and I will definitely be re-using this shader in future for bumpy surfaces. In order to implement this in UE4, I followed a tutorial by Trebla on Youtube (Trebla, 2018). Another shader effect I used is interior cubemapping. This shader renders the surface of a mesh with a box-projected cubemap, creating the effect of having a 3D space inside. I used this to create my fake windows throughout the shop. The cubemapped surface is blended with a window curtains material I created in designer, and it is all then plugged into the emissive channel of the material node. The final effect is a rather convincing lit room effect behind the windows. In order to implement this, I followed a tutorial on UE4 cubemapping by Split Hare Games on Youtube (Split Hare Games, 2019)). Bibliography: TREBLA. 2018. [UE4] Parallax Occlusion Tutorial. Available at: https://www.youtube.com/watch?v=4lF9H8JEQck [accessed 22 April 2020]. SPLIT HARE GAMES. 2019.  How to Create and Use Cubemaps in UE4 - Materials Tutorial. Abailable at: https://www.youtube.com/watch?v=AVZl6a6Y0Aw [accessed 22 April 2020].

[jacobsgameart]

I’ve finished the roof section of my shop. also pictured is the front center extruded window which is now fully modelled and textured.

[jacobsgameart]

After a few failed attempts, I was finally able to create a somewhat decent looking slate roof material in substance designer. The tiles are generated using a tile sampler node. I used floodfill to distribute the noise, colours and lichen growth. The moss is generated using an edge detect node and a tile sampler node to make it grow around the edges of the slates.

[jacobsgameart]

I finally started working on getting the whole thing together in-engine. Some notable new additions are the title texts on the front facade, stars under the bay windows and the doorstep. Also, the door is fully textured and there is glass in all of the windows. I slightly altered my plans from the original design and have done away with the top semicircular windows. I thought the design was a bit too noisy and had too many focal points, so I simplified it to just the top centre window and the lower front, leading the eyes naturally towards the central doorway.

[jacobsgameart]

Here is the glass material I created in Substance Designer for my Diagon Alley shop. I used a combination of a spherical gradient and a random noise gradient map to create the rippled bullseye glass panels. The height map of the glass is used in UE4 to drive the refraction shader. I have also added a slightly turquoise tinted Fresnel effect to emulate the visible thickness when looking into glass from a near-tangent angle.

[jacobsgameart]

I have changed the bricks yet again. After deciding that my old bricks look simply ugly in engine, I went back to the drawing board and changed a lot of the material properties. The most immediately noticeable change is the different colour scheme. I found that the grungy dark red was just too much of an eyesore against the green trims. Sandstone beige is a much more visually pleasing colour to pair with green. I also changed the way that the bricks wear was generated so that it formed cracks across the brick surface instead of random chunks cut out of them. Another big change is to the brick shapes. Gone are the bevelled edges. These new bricks have a much softer and more natural looking shape, with much more variance between bricks. I think that this iteration is a much needed improvement and it greatly improves the shop aesthetically.

[jacobsgameart]

Following the creation of my previous trim sheet, I decided that completing the lower shopfront was going to need an additional tiling material. I created a much simpler ‘painted wood planks’ tiling material and used it in conjunction with the existing trim sheet to finish texturing it. The plain surfaces are quite boring as they are - I plan to vary them up with several decals and embossed gilded title text along the upper panel.

[jacobsgameart]

Now I had a few materials created, I was able to start getting some texture on the windows. I re-used my previous trim sheet to texture the window frames. The window sill and top bricks have a unique highpoly baked material. The roughness values seen here still need some work, as the results in-engine came out rather unexpectedly different to how they appeared within substance painter.

[jacobsgameart]

In order to texture my shop windows, I created a trim sheet material. I started out in maya by creating a high poly model. This model consisted of a few horizontally tiling details that would be stacked on top of each other to fill out a 1x1 UV grid. This highpoly was then baked onto a flat plane in substance painter. To texture my trim sheet, I first created a woodgrain material in substance designer using several layered warp nodes on horizontal noise. I then exported this material into substance painter for use as the base texture for my trim sheet. Using a smart mask, I then applied a green paint overlay and some grime to fill the cavities of the bake.

Using my newly created trim sheet, I was able to UV unwrap my window so that the islands followed the tiling trims. This allowed me to squeeze a high level of detail out of a relatively limited amount of texture space. The bottom image is the final result of this process, with the trim sheet mapped onto the model within UE4.

[jacobsgameart]

The bricks have been significantly revamped since I last posted an update here. Aside from the obvious changes to the overall shapes of the bricks, I have also introduced some more subtle changes such as inverting the roughness on the bricks’ surfaces. This was suggested to me and was immediately obvious as a reason for them looking somewhat ‘off’ before. The cavities in the bricks are now much rougher, to reflect their likely coarse surface. Additionally, I have added cracks in the grouting between bricks and subtle cracks on the bricks themselves. I am still not 100% happy with how these bricks look, and the bevel effect is starting to lose its lustre on me. I think that I will rework the bricks’ base shapes in order to give them a more straight-out profile. I may also introduce some random chipping into their edges like I had previously, perhaps to a less obnoxious extent.

[jacobsgameart]

I have started the highpoly -> lowpoly baking process for various small unique assets that will be used around the shop. These trim bricks will run up the left and right sides of the shop, repeating this pattern of 4 bricks. It should theoretically have enough variation to not be too noticeable as tiling. If it is, I will look into using material instances in order to introduce more colour variations.

[jacobsgameart]

Ok, I’m back on this blog now. Several of these posts will be documenting work that is already weeks old at this point, but I will upload it chronologically in order to keep track of the progress I have made. This screenshot is the state of the shop front as of 05/03/20. I had finalised the design for the lower part of the shop and started detailing work on the upper windows. Many aspects are still left over from the blockout stage, such as the upper windows and roof area.

[jacobsgameart]

Small update - done some more work on the shop brick material. The colour is probably not final - that will take some in-engine tweaking, but this is getting closer to a final appearance.

[jacobsgameart]

This week I focused on nailing the look of the lower shop front. This model is made up of 4 main parts: the door, windows, base wall and sign. The door itself is a separate model on its own, I imported it into this file in order to make sure I have correctly designed everything to scale, as well as to keep the styling as consistent as possible. The window area is duplicated from one side to the other so I only have to focus on half of it. Each window also has a modelled interior so I can create window displays later. None of this is final but the windows in particular are probably the closest to how I envision the finished model.