Friday, 16 February 2018

Quick 3d art dump

Been doing a tiny bit of 3d, I have been doing some sketching too but I'll scan at the start of next week.

This isn't a complete model, just me mucking about. I decided to model a room design from the Ikea Ideas page

More specifically, this one:

Photo of Ikea ideas room. 
I wanted to pick something that I could just focus on modelling, I'm trying to focus on developing my speed and efficiency whilst modelling, as usually I am... slow and inefficient. Heheheh.

I seem to learn a lot faster when I put a little pressure on myself and put out a large quantity of work, so I'm hoping that churning out a vast amount of 3d models will help my process.

This was actually one of the pieces of advice that was mentioned in the Steal Like An Artist book; to improve the quality of ones art, they must produce a massive amount of it.

However, this won't be aimless practise, I am particularly focusing on improving my modelling currently and searching out for new techniques.

Anyway, enough rambling, here is the rubbish model I made in an evening.

Quick mental ray render, I'll probably present these in unreal engine instead from this point. It's just a bit more difficult to make the lighting look nice without doing spending ages tweaking lightmaps.

I would finish it tonight but I've been the victim of a wheezing cough all day so all I want to do now is nap.

More stuff in the week. :)


Tuesday, 13 February 2018

Ending a large project

I have been working on a large project called Phaneron since last february (ish), this project was the final major project on the Master's Degree I completed, a complex puzzle game with a lot of moving parts.

Development has stalled since before Christmas, and after doing a bit of talking with Amber and Dom we have decided to stop continuing the project.

A lot has been going on in the past few months or so: I have been dealing with a new job, had some personal issues to sort and I have been trying to sort out another place to live. The other guys also have their own thing going on which has meant it has been hard to plan a larger project around everybody's time.

Phaneron - Development Screenshot

Additionally, I was feeling like after a while that working on the game became a bit of a chore for myself, I was struggling to design the game in a way I liked. I didn't want to continue working on a project that in which my heart and soul wasn't in it 100%, this needs to be the case for these indie projects, otherwise they won't have the amount of effort put into it that they need to be successful.

So instead I am going to be focusing on myself for the foreseeable future. Focusing on my job, moving out, setting up a proper workstation, developing the Youtube channel and working on my own skills so I can develop an IP. Then I should be able to build larger more complex things with more confidence if I want to. With all of this in place then I should be free to go on to bigger and better things.

I have written up a more extensive of everything about the project in my blog post on the I_DO_TRI development blog, if you wish to take a look:

Phaneron Development Screenshot

My Portfolio

Since I am going to be focusing on my own work more I thought it might be a good idea to redo my portfolio website. I was gradually hating the old site more and more because it looked a bit dated. The new design is more minimal and sets me up more for expansion later down the road when I produce more work. I personally think the design is a lot better in it's current version, it's just so simple and clean.

Expect a lot more work uploaded on here soon, my output has increased a lot in the last month, and I have some plans for personal projects which I will share later in the week. :)

The new website is made on Portfolio Box, which you can get here: 

Portfolio Website Screen

Sunday, 11 February 2018

Life Drawing Art Dump! Week 2 - Biro doodles.

This is little art dump containing all the sketches I did in week 2 of my life drawing classes at the Bristol Figure Drawing Group. In this session I wanted to get into some serious practise, to hone my skills. 

One thing I think is lacking in my work is confidence in my lines, I notice I tend to chicken step a lot which can lead to broken up drawings. 

I also want to improve the overall accuracy of my drawings. This means getting the anatomy and general form correct, which is in turn done by looking and observing the model more, and checking the spacial relationships between different parts of the body to make sure everything is in the right place.

I stuck to a very simple medium for the whole session, just so I can focus on the one skill of improving my line quality. It was actually rather nice using the biro, I normally hate using them but I actually had a lot of fun using it. It feels like I could get the 'sketchiness' that one might bet if they use a pencil, but with that added permanent effect which forces me to try and not make mistakes!

Anyway, here are all the images below. It started from slightly longer pose times (15 minutes) before going onto quicker poses (5 minutes) before getting slightly longer again. (10 minutes)

Also, in other news, I'm getting a new pair of glasses Monday to flourish everywhere, which means NO MORE DAMN HEADACHES! 

Seriously, any and all screens have been giving my massive headaches ever since I have stopped wearing my glasses. 

For clarity: My backpack was stolen last September whilst I was staying at my girlfriend's house in Nottingham, a guy actually broke in the house around 8 in the morning! Lost my passport and a hard drive with a lot of data, the glasses were included in the loot. Basically, if you see a guy in Nottingham use a laptop with a portable hard-drive in a black cushioned case plugged into it, who doesn't have any issues looking at his laptop screen to see his large collection of Gumroad game-art tutorials because of his fine as fuuuuck glasses, then could you get in touch with me? Would appreciate. ;)

So yeah, I'm happy to get another pair, it has been causing me a lot of pain over the last two weeks with all the student marking I am doing. White excel documents are my Kryptonite at the moment.

More life drawings will be on here after Thursday the 22nd as next week is half term and the classes aren't running. Although I may do my own stuff in the meantime. :)


I created a subreddit for sharing artist blogs! /r/artistblogs

A bit of a quick one. I was looking through Reddit for places to share art blogs (so I can show this place off) and I was a little bit disappointed to find that there isn't much in the way of a place where people can share their art blogs or where people can share other blogs they find interesting/cool.

There is an artblog subreddit but it's private and I thought that was weird and goes against the point of seeing all of the shared blogs, so I created my own alternative subreddit!

Subscribe and contribute to /r/artistblogs !

It's still a WIP, I need to add a proper rule system and other little reddit-y things, but as a basis this works quite well. 

If you are a painter, sculptor, game designer, photographer, film-maker, architect, graphic designer or you are involved in any other creative profession, then upload your blog onto here and we can exchange critique, feedback and nice comments about all the cool stuff we make. :D


Saturday, 10 February 2018

Art Dump! Return to Bristol Life Drawing!

Hey. I didn't realize it's been just over 2 weeks since I've updated the blog, I have been a little busy marking student work recently so I haven't had a lot of time available.

This is just a quick update showing some things I have been up to. In my last post I mentioned that I want to improve my art skills, so that is what I have been working on!

I have been pretty hardcore in trying to force myself to do practise, so I have signed back up to my old life drawing classes that I attended before the start of uni. Bristol Figure Drawing Group takes place at the Bristol Grammar School on Thursdays, and it's packed full of artists! When I last attended around 4 years ago we were in a smaller venue and there was only about 20 people and a couple of models. In my first session this time there must have been upwards of 80 people all doodling away!

A sample of some old life drawings I created at this class before I went off to uni.

This class was great for me before as I used it to learn my way around the basics and get a good amount of practise in to ease me into a routine of creating a lot of art. (Without doing the class before uni I would have sucked even more than I did.) Attending the class this time was a really nice experience, I got to meet my old art instructor again Will Stevens and I even got some nice feedback about my work, just like I did all those years ago!

It's creatively refreshing to return to a class which has helped me in the past, as the positive association is already there from when I attended before uni, now I can use it prove how much I have learnt in the past 4 years or so.

Another sample of old, rubbish life drawings. I wasn't very good at proportion back then.

New Life Drawing

I have been for two weeks now and have produced a range of work in different mediums. 

The first session I saw as a bit of warmup to get me back into things, so I just did what I thought felt best as opposed to actively picking techniques to practise with. I started off with something comfortable that I was using a lot of at the time: The Promarkers. These were great for just warming up with some value-based sketching.

I did a sketch using a 7b pencil I found at the bottom of my pencil case and sharpened it all nice using my craft knife so I had a wide tip.

Then I wanted to do something a bit more experimental, so I decided to dive into my little art box and found a little pot of black ink. I had some old brushes on me so I had some fun, they weren't the most accurate of sketches but it's nice to do something a little bit out of my comfort zone.

Ink drawings, I didn't like these as much as some of the proportions are truly fucked, it was nice being able to try something different though. I will come back to inks at some point.

During this first session I realised how out of practise I actually am. Proportions and anatomy just sort of blipped out of my head and it resulted in some drawings that are a little out of whack, also my confidence has went down a little as evident by some of the chicken stepping with my lines. This is one key area I want to focus on; improving the quality of my mark making as well as making sure the accuracy of my drawings are on point.

OH. And colour, I would very much love to get a lot better at painting in colour, this would free me up to design stuff better when it comes to concepting 3d scenes. (Another longer term goal that stems from improving my art skill.)

I will cover next sessions life drawings in another post. Just so I can section it up more neatly and give an excuse to add more to my post count. ;)

Sorry about the image quality, it's unfortunately the best I can do at the moment with my little iPhone cam and lack of good quality lighting (or lack of a scanner) I will try to remedy this when I get my new place. :)

Next time people.


Saturday, 27 January 2018

Some doodles, desk ideas and graduation!

This week has been a bit of a busy one, so I haven't had a lot of time to work on any art stuff really: It's hand-in week for the students so that's one reason.

Also Thursday it was my Masters Graduation! I am officially now a Master of The Arts! :D

So yeah it's all been going on. But despite that I still got some little bits done.

New Promarkers and some arting.

I was in Ryman's earlier in the week for the purpose of buying a new note bookbut I thought I would treat myself even more, so I bought some new Promarkers. They were 3 for 2 so I got a pack of neutral tones, a pack of pastel colours and a vibrant pack. Click this link if you want your own!

So whilst all the students were handing in their engine work on Wednesday I thought I would have a go at doing a sketch for the pixel art project. Just something random as a test. I love Promarkers for quick doodles like these, but I find they don't last long after I have done a few of these images, usually my packs of neutral tones only last a month or so, but that might just be how I use them. (I use the greys A LOT for building up tone in quick doodles)

Marker Sketch - Sorry about the bad quality! :S

It's been a while since I have done any marker art, just doing this little piece makes me really want to jump back in and do a lot more. I miss doing lots of art, I think the last time I did a large amount of it was back in my second year of uni. (It says on Game Art on my Master's Degree but it was mainly technical stuff inside Unreal Engine.)

I think I might see what I can do in regards to producing a lot more traditional artwork to support my pixel art and gamedev stuff, I always doodle in my sketchbooks so it hasn't died completely, but it has been a while since I have really pushed my traditional skills by doing colour work or anything painterly. All of my recent doodles (over the past year or so) have been in fineliner.

My Desk Plan

I think the reason I have sort of left it is because since my third year of uni I have been in the position of the 'engine guy' on the projects, which is cool but it doesn't give me a lot of room for manoeuvre when it comes to wanting to produce art.

It was a similar situation with the MA, also combined with not having the desk space or having much of the equipment left for doing artwork. I probably could have done something though, but for whatever reason I just didn't try hard enough.

Now seems like a good time to try and add a bit of art back into my routine, just putting some markers into usual fine liner work might help to shake it up a bit.

But I have a bigger plan! When I move out later this year I'm looking into putting together a proper personal workspace. I want plenty of space for inspiration, all my books, art equipment and my digital things. So I've been looking at putting together my own desks and such.

'Steal Like An Artist' by Austin Kleon - A brilliant book. Short, simple and sweet. I happened to buy this at a time I needed it and it has been a great motivator, if you are struggling with creative block or are feeling a little frustrated by slow artistic progress then read this book. It helped kick my ass into gear a bit.

I actually got an idea Tuesday when I went out and bought a book called 'Steal Like An Artist' by Austin Kleon.' (By the way this book is awesome and I recommend it to anybody looking to get into anything creative) 

Inside was a tip about having a separate desk for digital work and analog work, this is done to encourage more creative thinking, whilst the actual production work and refinements done on the computer. It actually reminded me that I had a similar setup in my second and third year of uni, and that was when I feeling most creatively fulfilled.

So when I love out, I want to have one desk area for any traditional stuff, I can set up my drawing board, a nice lamp, have a cutting board and a big pile of sketchbooks and paper. (Oh and a little place for all my lego, I do get some cool ideas from building stuff out of Lego.)

Then opposite that I can have my space for my PCs and a more typical office setup, with some little flourishes so it isn't completely bland.

I have been adding some inspirational images and things for what I want in Pinterest. It's general house ideas but a lot of it is focused around the desk area. I will probably do another post at some point showing my current setup and the reasons I want to upgrade.

See you next time! Hopefully you should be seeing a lot more sketches on here along with the UE4 stuff. -James

Tuesday, 23 January 2018

The Great UE4 Pixel Art Experiment! #7 - How to create higher quality gamedev GIFs!

I managed to get a new gif of better quality, hopefully Blogger doesn't trash it during upload:

Now you may be thinking, how did you manage to make a GIF so crisp, so fine?!
This actually involved using Photoshop, using the following method could create a crisp, clean gif without making the pixel art look all completely horrible.

The Process

  1. Use ScreenToGif (Click to open website) to record the GIF
  2. Save the project out as a sequence of images in it's own folder
  3. Open Photoshop and go to File > Scripts > Load Files into Stack
  4. Find the folder with your images and load them in.
  5. Wait a very, very long time for Photoshop to process all of your frames. (¬_¬)
  6. Go to Window > Timeline, you should end up with a new panel at the bottom.
  7. Click the little panel options button in the top-right of the window and select 'Make Frames from Layers'
  8. Play through your animation using the controls at the bottom, if the animation appears like it's going in reverse then go into the panel options again and select 'Reverse Frames'
  9. Select all your animation frames, then select an arrow pointing down next to one of the '0 secs' Enter in a time, this will be the time between frames, I set this to 0.05 which was a decent number. With all of the frames selected it should apply the same time to all the frames. Keeping your GIF framerate consistent.
  10. Do any image touchups, cropping, add a layer on top of everything for a watermark or border.
  11. Go to File > Save For Web. You should automatically get the settings for a GIF.
  12. You can try altering the settings and quality if you need to reduce memory, but photoshop does a pretty good job from the get go. Let me know if you find any magic settings that doesn't reduce quality!
  13. Hit Save and salivate at every frame of your brand new GIF! 



Monday, 22 January 2018

Art/GameDev/Cool stuff I like to look at with my eyes #1

I thought it would be nice to fill this blog with more stuff that I find inspiring! I like art a lot, and gamedev, and UE4, and Lego, and Spaceships, and TED talks... as well as other things, anything I find somewhat cool, I think I might drop it here, who knows, hopefully you lot might find it cool too.

I'll see if I end up doing more posts like this, depends how much I get into it. Since I look at a lot of different information sources I will probably end up embedding Pinterest Pins, Tweets, Youtube videos and all sorts to keep a nice mix going. :)


Most of the stuff I like at the moment is either pixel art or interesting things people are doing in Unreal Engine, probably because of the pixel project I'm doing.

The first image is just a little pixel art guide for creating Ruins:

This is just a cool cyberpunk-y image, I love the colours and the feeling it gives.

More Pixel-arty goodness!!

Obligatory Archillect Gif

A really cool painterly post process effect!

A classic bit of 70s sci-fi art by John Harris

A bit more pixel art, I love the patterns on this. <3

And finally... A new animation that should be airing soon called Final Space (It has David Tennant and John Dimaggio in it!) but yeah, it's weird high concept sci-fi and colourful animation, so I will probably love this when I watch it.

That's it for now, I might do another inspiration post later in the week!

Friday, 19 January 2018

The Great UE4 Pixel Art Project! - #6 Quick tileset changes and a really useful material node!

Been doing a tiny bit of experimentation with the tileset tonight. Nothing massive at the moment, I think before I continue any more with this I'm going to do more planning sketches. I want to have tall walls to add a lot of detail but I don't want to have the walls obscuring too much on the front sides. I need to figure out how I'm going to approach this moving forward.

Larger room experiment, also I'm trying a palette addition. The walls need a lot of fixing in order to make them look right. The main point of this was to test how the tileset might scale in a room with taller walls.
Pixel Perfection Formula

I have put together a basic version of a script that allows me to change the ortho width on the player camera according to the current screen resolution. I have this set up in the construction script currently, it still needs a bit of tweaking, but now I can mess around with the screen size without worrying about the image losing quality as much. Should make life a bit easier.

Formula for setting the player ortho width.

Texture Property Node!

And another little thing: I have found a really useful material node inside UE4. Basically you know the other day I was looking for something that would give me the texture size without having to type it in manually?...

I found something that does exact that when a texture object is plugged into it: The Texture Property node!

For my pixelated emissive effect on my tileset, using this node is incredibly useful. This node allows me to get the size of the texture in pixels, I can then use that value to divide the UVs of the panning noise, creating a pixelated, animated noise that fits in perfectly with my pixel art textures.


The Great UE4 Pixel Art Project! #5 - Pixel Perfection!

I was cleaning up stuff yesterday and then I got distracted. I was tinkering around with a lightshaft material and I made some simple dust particles.


The lightshaft I was stuck on for ages, as I was trying to do it all without using any textures, because I hate myself...

The reason I was stuck though was because I was trying to scale a linear gradient so I can control the width of the lightshaft. The scaling part is easy, but I had issues trying to work out what number to offset the UVs by in order to center the gradient.

Scaling Material Script

The lightshaft is actually on a material billboard, so it always faces the camera, I also used a custom rotator node in order to control the direction of the lightshafts. All of this can be altered in the blueprint, which contains the billboard and some config options for the material.

When I come back to this I may add a function to the lightshaft blueprint that reads the angle of the directional light in the scene and uses that to drive the lightshaft direction. This would be similar to the script in the default BP_Sky_Sphere included in the engine.

BP_LightShaft construction script to set beam width and overall size.

Pixel Perfection!

This is something I have wanted to figure out how to do for a while: to get 1:1 pixel art inside Unreal Engine, with the characters and other stuff working correctly and to scale.

The first thing I was looking at was how to change the size of the standalone play window. I wanted something small, like old console small. I googled common 16:9 resolutions and I originally went with 640x360 but after I initially got everything pixel perfect I doubled it to 1280x720. This can be done in the engine settings if you search for 'Window Size'

Note: I believe you have to do something with the .ini files to get this to work in a packaged game. I'll cover that stuff next time.

Engine Settings for changing the window size in standalone.
According to one of the sources I looked at, it tells me to make sure the default paper2d scaling in the engine settings is set to 1.0. For my project I had the default value set to 0.16. What this means is that for every 16 pixels, that will equate to 100 unreal units (Or 1 meter.) At least I think that is what it does, my tile size in my tilesets are 16x16 so that works out fine.

The next step was to go into my player character and change the camera to orthographic and to change the orthographic width. I was looking at the stuff on google as reference but I couldn't really understand it. I thought I was supposed to set it to be a multiple of the screen size but that wouldn't work, I set it to 640, then 1280, then to 2560, then I doubled it to 5120. I compared the size to one of images out of tiled to see where I would need to adjust it and figured out I was just under double the size of the tileset.

From this point on I eyeballed the rest. I kept reducing the value until I realized at 4000 it was pixel perfect. I imagine this has something to do with the scale of paper2d in the world.

I then made the screen resolution larger, when I did this the tiles doubled in size, so I doubled the orphographic width to 8000.

Later I will create something that automatically scales the orpho width on the player camera according to the window size, but for now... PIXEL PERFECTION! It might not look much like it but this screen below is running inside Unreal Engine. :D

(There will be a video/gif or whatever but I can't get the quality as pixel perfect as the game at the moment.) ;)

Shot of FX running in engine at the proper size.




Thursday, 18 January 2018

Monetising the blog

I have been looking into integrating Google Adsense into the blog as I will be attempting to make more frequent posts. Some additional income would be really useful whilst I try to focus on these little projects, the extra bit of money I'm hoping will allow me to get some slightly better equipment (camera, microphone) that I can use for tutorial creation and livestreaming gamedev stuff. 

This is something which has been suggested to me for quite some time, I just haven't been in a great enough situation in order to do it. I feel that with this current project I feel confident enough I can do some smaller videos on the side that can contains some game art tips and tricks, maybe. It's pretty well known that Youtube isn't great for monetization at the moment so I'm hoping that by focusing on the blog that I can use this to drive content over there, or maybe on Twitch or something. 

I don't know yet, guess it all depends on how much traffic I can get through here, which won't happen unless I keep making more stuff, uploading it, then sharing it everywhere.  XD
Currently though Adsense is implemented (You might notice the white gap in the sidebar) but it hasn't shown up properly yet, I will wait for Adsense to show up before making some changes the look/layout and stuff. It should be up within the next day or so. 

*Sorry about the font size: Blogger is being a massive dick and won't let me change it. >:( *


Reorganised my Pinterest page!

I have been doing a bit of general cleanup today: deleting a crap tonne of emails, reorganising folders and bookmarks, and deleting some older stuff I no longer have any use for.

I have also been trying to re-organise my online presence, so I can focus on building this blog whilst making sure the content shares around. I found out that Pinterest is one of the main ways traffic is drawn to blogs, so I have been spending the last hour doing some reorganising and adding recent work to my own board.

Pinterest Page Preview

My Pinterest page is as old as this blog, but I haven't really been uploading my own work on there since I was in college. Now though it includes all the very recent pixel art stuff, as well as screenshots from Phaneron and Guiding Sprites.

I have created some sub-sections within the 'James Broderick Design' board that contains all the different projects, you can even look through all the REALLY old stuff.

It is always nice going back and having a look at some your own work though. Makes me actually want to do a bit of life drawing again. (I haven't done any for what must be nearly 2 years now.)

Old life drawing from uni with coloured pastels.

You can access the pinterest board here:

I will probably try and add the pinterest sidebar widget again that displays the board, I liked having that there. Alternatively though you can pin anything on this blog using the giant 'Pin It' widget that appears when you hover over an image.


Wednesday, 17 January 2018

The Great UE4 Pixel Art Experiment! #4 - Collision Tileset

I have been working on a simple collision tileset to help me plan out some rooms and stuff easier so I can just sketch over them later on. This was inspired by a talk by Cardboard Sword where they described their process for creating the tilemaps inside Paper2d in UE4, where they had a layer in the tilemap dedicated to the collisions.

I was trying to include a mix of shapes that might be useful. I haven't done loads of planning on this, I just went and did it. This isn't really tailored to any specific kind of gameplay at the moment, I was just thinking of the old kinds of tiles like you get in the RPG maker games and things like Pokemon. Anyways, here is my first attempt at creating a collision tileset:

Collision Tileset

Quick Test map using all the pieces inside Tiled Map Editor - Can get the software for free here: 

I will be adding more, this is just a first pass, I'm also sharing this with Leon so he can test it out for his little game. I should get some nice feedback that should allow me to fill in any gaps.


Sunday, 14 January 2018

The Great UE4 Pixel Art Experiment! #3 - Testing custom tileset material.

Today I looked into creating a custom material for the tilemap. This was to see if I will be able to create custom effects and such on the 2d graphics themselves, for now I'm going to create a simple emissive lighting effect that I want masked to certain tiles.

First, I made some new tile additions: These sections will light up with my emissive effect, which will have a slight flicker to it:

Before I started investigating the material I had a go at trying to import the map from Tiled Editor. For some reason though when I go to import the JSON file all it would generate is the Tilemap but there would be no tiles places and no texture imported, I couldn't find anything online about this issue so I think I will try to do that again another time. I created a new tileset and map manually using Paper2D in Unreal Engine.

After looking around in the tilemap editor I realized that the tilemap only has only material that can be applied. This could be problematic, I was hoping that different materials could be applied per layer so objects with fancy effects could be separated from the simpler background materials, this currently means that the same material has to be applied to everything which isn't very efficient. I'll have to look for a work-around.

By default the tilemap editor provides you with a material set up specially for 2d assets. However to get the effect I want I need to create my own:

In the material I import my two tileset textures, my base colour (albedo) texture and a separate texture for the emissive channel.

Note: I would have put the emissive channel into the alpha channel of the tilemap but it is already being used for transparency.

Tilemap textures.
Custom Tileset Mat in it's entirety.
Most of the material is fairly simple to put together. I have the material set to be masked lit, but I have added an emissive boost using the base texture to make sure that the map doesn't go completely black whilst in shadow.

Using the Emissive mask I created, I apply a pixelated noise animation to just those parts:

Pixelated Noise Animation Material Graph section.
If I just plugged in the noise to my mask then I would end up with a very high res noise compared the the look of the tiles I am using, I need to apply a filter that pixelates the noise to make it fit with the look I'm going for. There is actually a mat function already in the engine that allows you to do this: Search for the MosaicUvs Mat Function in the Engine and just drag and drop it into your mat graph. Then link up the texture coordinates (I put in a controller for tiling.)

In the tiles input of the MosaicUVs you need to put the amount of pixels you want to divide your noise into. So I put in a parameter for pixelation size and I set it to be the width of my tileset texture. (It's 256, the image is wrong.)

After this you can simply plug in your pixelated UVs into a panner and then your texture, allowing you to have a moving pixelated texture that follows the look of your pixel art.

Add some parameters for colour and intensity and you should have something like this:

Final effect in motion, the emissive effect has the noise pan over it to alter it's intensity, giving the appearance of a flickering light.
Other bits:
I was looking to see if there was a node that would just automatically get the texture width inside the material but there doesn't appear to be anything that does that as far as I can find, would be a really useful function to have.


Saturday, 13 January 2018

Pixel Art Experiments #2: Quick Update - Changes to the pixelation post effect.

I've been tinkering a little bit inside engine because a little thought occurred to me earlier whilst finishing up the other blog post: For the post effect why don't I just apply the pixelation effect to the custom stencil itself?

What this means is that I can control the bleeding so it still looks like pixels, it's still not perfect but at least it makes any halo effect around the 3d objects obey the art style.

The outline effect I used to expand the size of the mask had a UV input, all I did was connect the output of the pixelated UVs into the where the UV slot for the outlines are and I ended up with the new result.

Current version of post effect. (The random sparks are part of a particle emitter, it's not a glitch with the effect.)

I also made some changes to the outline effect. Before it made 4 copies of the custom depth mask and offset them along each axis, this works mostly ok, but it means that sometimes the corners don't get covered as you can see below:

Mask Offset highlighting corner problem.
I added some extra offsets to cover the corners by making them go in diagonal directions, this means that the mask is offset in 8 directions to make sure that all sides are covered.

'Fixed' version.
Here is some material spaghetti showing the changes to the outline section (Please don't copy this node for node if you want to try this, this is real messy and I could probably cut out half of those nodes but it's late and I'm going to read Infinity Gauntlet.) :


Pixel Art Style Experiments #1

Recently I have had a lot of ideas in my head regarding creating a pixel art environment inside UE4, I have had this visual idea in my head for a while that combines pixel art with modern effects in a very particular way. This post will include some my initial experiments into trying to develop this style.

Things I want

There are a few things I want to achieve with this style I'm trying to develop:

  • I want to create a unique art style that I can feel comfortable just adding new bits to without thinking about it too much, so having very strong rules to the style will help define what can and can't be done. 
  • I want to utilize UE4 lighting systems - This will be done to add more depth to the pixel art and push the style beyond something that feels like an old game, I want it to feel fresh.
  • Make it feel alive! - Rain World was a great inspiration for this, that world feels alive with a lot of movement, particles and animals that move throughout the world. I want to see if I can create an environment that feels similar. This could be done with material effects, particles, animated sprites, dynamic lighting and AI critters.
  • Limited palettes for the actual pixel art. - This will allow the lighting to do most of the work, bringing out the subtle colour variation in the pixel art. Also I sort of want some really classic looking tilesets, sort of like the really old metroid or Kid Icarus games. Because of the black backgrounds those games had some sort of scary, bleak vibe to them. I dig that.
  • Break up the tiles as much as possible, but still keep essence of the 'square' look - This is the hardest one to define, I know how this looks in my head but this will require trial and error to actually present this idea. Essentially, this will probably result in the creation of lots of different tiles to create enough variation. There might be a way to cheat some of the tile variation through material layering.
There are probably more things that I would include in this list if I could remember them, that should be good for now though.

Where did the idea for this project come from?

A few things. Mainly it was caused by me working on the top down game template. I have always been interested in top down games: I used to use RPG Maker XP quite a lot, so I created the top down ue4 project as a homage to that, before I developed it into the adventure game project for the college. Seeing Rain World in action was a pretty big catalyst for this whole thing, as that art style was something I wanted in a game for a long time, but I feel more could be done to make the visuals even better.

Rain World

Also I have been playing a lot of Minecraft recently, and one thing I thought was how dead the visuals felt for something which has pixelated visuals. I like the pixel art on 3d models concept, but I think things could be done to tie the two together more in a way that feels fresh and cohesive. I think minecraft's lighting is mostly the problem there, with some better lighting that game could look awesome. This is why I think a lot of the focus on this project should be how the pixel art interacts with lighting in a 3d space.

Minecraft with A Lighting Shader mod - It's amazing how much better lighting can change the look of a scene completely.

Also I have been watching my co-worker Leon Field work on his personal UE4 Paper2D project, which is shaping up really well. We have been bouncing ideas off each other to achieve good pixel visuals inside Unreal Engine and so far it has been pretty fruitful. Seeing a lot of his project has inspired me to push on experimenting in this area. Look at his Reddit post about his game here:

Initial experiments

My initial experiments were in UE4. At this stage it was literally aimlessly fucking around with an old tileset I had made from back in college and some basic 3d shapes. I was seeing if I could something minecrafty, whilst creating some slightly better (moodier) lighting. I also created a pixel-arty looking rain particle that creates a splash effect when it hits the floor.

Old Retro-inspired tileset I created in back in College (This is nearly 6 years old at this point. This already had a very limited palette. You can also see there was some experimentation with lighting, with fake lighting applied in top in photoshop. (Why the fuck is there shadows on one of the walls too though? Past me has no idea how light works apparently. XD)
Moody Test level, with rain effect, some cloud shaders and that garish pixel art I made in college.

More of the same, but showing some experiments with volumetric lighting inside UE4.
 I liked the moodiness of these shots, this is something that I think would be really cool to keep pushing. I think though that the shapes and detail are lacking. Also some work has to be done on presenting pixel art on a 3d surface, at the moment it looks weird to have diagonal surfaces or anything that isn't following the pixels directly. I don't want to create something that is voxel based though... I'm wondering if there is another approach to making pixel art appear in 3d on non-square objects.

2d and 3d integration tests - Pixelation Post Process Effect (UE4)

All these tests before I did a few months ago. Everything from this point onward is more recent. This test comes from experimenting on the adventure game project directly. I tried to create a post process effect that can make specific objects appear pixelated. This could be used to tie 3d models into a 2d graphics placed on a tileset. If this works then it could open up loads of possibilities when it comes to effects!

Pixellation Post Process GIF - Demonstrated using a rotating cube of wisdom.
This effect was designed to try and tie in 3d objects to 2d objects already in the scene, it is a simple pixelation effect (As found in the Unreal Engine examples) Only adapted to use a custom stencil mask.

There was a problem that when the effect reaches the each of the 3d object that the pixels abruptly stop, leaving a small gap, this was fuxed by using combining an effect for generating an outline around the custom depth objects and then adding that to the mask, which allows me to bleed the pixels over the edge of the 3d object, helping to blend the object into the scene.

It's not perfect. The next step is to somehow tie the screen effect pixels to the ones on the tilemap actor in the scene, so more experimentation will be done on this at some point, but for now I think this effect is pretty cool.

Pixelation Post Process Effect using Custom Stencil Mask with edge bleeding.

Pixel Art Test

This is what I've been working on today. Just trying out some random pixel art graphics to get myself back into the craft of it. I create all my pixel art in Photoshop using the pencil tool. I mainly been creating this from imagination but I do have some visual cues in my head, I created a Pinterest board full of pulp sci-fi things and weird abstract art. It will include some pixel art games I am interested in as well as some real world reference. But for now here is my inspiration board of things I want to mix and match:

I started off by taking the old tileset I had from college and I desaturated it in photoshop. I then ran a posterise filter on it to limit the range of values I had in my palette. Limiting the palette forces me to think about form and pattern, it also helps me to focus my visuals keeping the art nice and clean. 

To get colours on my pixel art I used a gradient map effect on top of everything, I create a gradient that is mapped onto the values I have already painted into my pixel art. This allows me to get direct control over the colours in my palette at any time. This is useful for my as I'm shit at colour normally, and this helps to take some of the thinking away.

Below are some progress shots of the tileset I was developing today, I put the map together using Tiled Map Editor, as it has more tools for building maps compared to the tilemap editor inside UE4. I believe I actually saw a plugin for UE4 before that lets me import Tiled Maps, but I'll have to have a look again to be sure...

First version - Created blending for the walls to make them less of on eyesore. Added some basic floor variation.
Version 2 - Added Wall Tops and some better floor tiles, wall tops include a reverse section of the wall that fades into the darkness
Version 3 - Added more floor variation including some decorative tiles and some broken up ones. I composited some fake lighting on top to simulate what it might look like inside UE4.

Last screenshot of the day, just had a bit of fun building rooms and testing the floor tiles. I love building maps. <3
I think a lot more could be done with this tileset. I have a list below of things I should/could do:

  • MORE CONTRAST!, colour contrast and tonal. I experimented with adding a levels adjustment layer and I also increased the saturation. Will show the results of some tweaking in the next post.
  • Detail on the tops and sides of walls.
  • Wall Variation, would be nice to have them break the grid a little.
  • Some focal point objects, I will probably sketch these in my book first.
  • Try some plants/overgrowth on a complementary colour palette. I do have another idea for this which I will get onto in the next section.
  • Larger sections of flooring - I could paint in some floors on a larger tile size, to add some really nice focal points and unique details.

Other Cool Things

I have some ideas for the project as a whole that I could experiment with, most of these are things that I think could work for pixel art with a little bit of effort. Most of these things I haven't seen an example of before but I'm pretty sure they can be done, it's just a question of whether they can look good. This is essentially me thinking of what UE4 rendering/material features could be used for pixel art in a way that could make things look better/save time.

  • Using UE4 Decals for pixel art - Decals could be used to place certain effects on top of your base scene, using some selective blending and by using small textures you can probably have some cool effects like natural looking moss on your walls. This could help to break some of the obvious tiling you could get in your tilemap.
  • Procedural pixel art - I had an idea to use Substance Designer to create some procedural pixel art, I have no idea how this would work in practice. Although this could be really interesting if the Subtance material instance can be controlled inside unreal during game time. Some interesting effects can come out of this.
  • Vertex painted Tilemaps - Could be useful for some things, could even be used for painting lighting information into the scene. Could be combined with the procedural pixel art too for effects like creating broken tiles in certain places or puddles.
  • Normal map experiments - I have seen good and bad uses of this in 2d, I would like to try it though just to see if anything interesting can come from it.
  • More 3d tests - Try recreating a 2d map in 3d, quickly and efficiently. Something that could convert an existing 2d map into a 3d one would be nice. 3d models would have to look correct in an orthographic view similar to the one I'm already using.
Anyway, that is it for now, I will post more experiments in the week, If anybody has any questions about any of this ask away, or if you have any feedback on anything then voice away! I want to see if I can push this as much as I can. :)

See you next time. :D