UE4 Mobile Stylised Asset Dev
polycounter lvl 8
Latest update:
Model is textured, skinned and has a rig created. Colour scheme to be re-iterated to be brighter/more vibrant and have more use of the accent colour. Low poly to be more optimised.
Hey guys, I'm gonna be posting some work I'll be doing for UE4, its a range of stylised assets that will mostly be in the same universe. These are going to be made for mobile spec which will be quite the adventure. I'm gonna be doin the concepting, modelling, texturing, rigging, and Blueprinting and hopefully by the end they'll be some basic level with a playable character and some gameplay, so it should be quite fun to do!
Starting totally from scratch, we got a concept sheet that highlights what I want from the visual styles' forms.
This will be updated to include rendering expectations as we get to those bridges, but for now in terms of shape a puni plush style is desired. Embracing mobile constraints of a limited screen size and joint count available, the hands get a partial 'mitten' effect where the last three fingers get merged. The legs get a smooth transition from the ankle to the foot and (hopefully) will be able to curve smoothly when animating. How that will happen I'm not sure; I'm reckoning that there will be a few 'extra' bones in the leg to allow that, but I'm not sure how that's gonna work with Maya's IK.
With the head expressions I am hoping for a variety of exaggerated faces that can be accessed via panning UVs. I am aware that UE4 mobile doesn't support this natively in the material editor, but I have read a little into 'Customised UVs' and hoping that that feature will help realise that technique.
Started the base development of the protagonist of the 'game'. The premise at this time is that tiny fairies live in little colonies; they work together as a tight bunch to provide each other food, water, fend off predators and live in comfort. However, they don't get their (butterfly) wings till they reach their teenage years. So what happens when a fairy who sleeps during the day, is excessively noisy and playful at night and is an overall troublemaker to the community (that barely tolerate her) reaches that fateful day? She is exhiled, viewed as a leech to their community for (of course) being derived from moths instead of butterflies.
Key things about her character:
Apologies for the wall of text, I'm hoping future posts will be much more summarised, and for updates to occur everyday. Critique is welcome and encouraged. Thanks for reading and hope you'll get sommat out of following. Next post is more dev of the protagonist; shes gonna need a name and some more form development.
Model is textured, skinned and has a rig created. Colour scheme to be re-iterated to be brighter/more vibrant and have more use of the accent colour. Low poly to be more optimised.
Hey guys, I'm gonna be posting some work I'll be doing for UE4, its a range of stylised assets that will mostly be in the same universe. These are going to be made for mobile spec which will be quite the adventure. I'm gonna be doin the concepting, modelling, texturing, rigging, and Blueprinting and hopefully by the end they'll be some basic level with a playable character and some gameplay, so it should be quite fun to do!
Starting totally from scratch, we got a concept sheet that highlights what I want from the visual styles' forms.
This will be updated to include rendering expectations as we get to those bridges, but for now in terms of shape a puni plush style is desired. Embracing mobile constraints of a limited screen size and joint count available, the hands get a partial 'mitten' effect where the last three fingers get merged. The legs get a smooth transition from the ankle to the foot and (hopefully) will be able to curve smoothly when animating. How that will happen I'm not sure; I'm reckoning that there will be a few 'extra' bones in the leg to allow that, but I'm not sure how that's gonna work with Maya's IK.
With the head expressions I am hoping for a variety of exaggerated faces that can be accessed via panning UVs. I am aware that UE4 mobile doesn't support this natively in the material editor, but I have read a little into 'Customised UVs' and hoping that that feature will help realise that technique.
Started the base development of the protagonist of the 'game'. The premise at this time is that tiny fairies live in little colonies; they work together as a tight bunch to provide each other food, water, fend off predators and live in comfort. However, they don't get their (butterfly) wings till they reach their teenage years. So what happens when a fairy who sleeps during the day, is excessively noisy and playful at night and is an overall troublemaker to the community (that barely tolerate her) reaches that fateful day? She is exhiled, viewed as a leech to their community for (of course) being derived from moths instead of butterflies.
Key things about her character:
- As a moth-derived fairy, she needs to look quite different from the rest of the regular fairies. The silhouette must be distinct (the wings cannot feel like butterfly wings, even though both them and moths are from the same family of insects)
- Massive moths in real life are extremely fast and hard to catch, even if its because they're trying to use your light to realign themselves (and failing). Whilst I don't want that level of confusion transmitted to this character, the speed and agility needs to be represented in her visual form and animation.
- The character needs to be designed to the constraints of mobile, but still be pushing the limits (i.e. this should not feel easy to implement). This means trying to limit the amount of bones needed (hence short hair and short skirt/shorts) The wings will need some level of accuracy in representation, so yay, lets watch lots of videos on moths... suddenly this isn't so adorable.
Apologies for the wall of text, I'm hoping future posts will be much more summarised, and for updates to occur everyday. Critique is welcome and encouraged. Thanks for reading and hope you'll get sommat out of following. Next post is more dev of the protagonist; shes gonna need a name and some more form development.
Replies
I think the antennae and the way the fluff is styled would be great for a cutesy mobile character. The extra eyes on the side of her head add a nice insect feature (they could also be stylized as gems or something), and if you wanted to expand on that side of it and make her a bit less human, you could go for something like the second image by Weno and make her body and appendages more like pieces of exoskeleton. As it's a mobile character though, I wouldn't go for too much small detail. One last thing, I wonder if making the wings quite small but well formed would be a good idea? Right now they kind of dominate the silhouettes.
With a direction established with my previous post its time to open the gates: I went and made two moodboards that revolve around the subject of the White-Lined Sphinx moth and generic and well recognised fairy forms. These are used to give her a representation of a fairy form but using moth parts rather than the infamous butterfly motifs that go on.
One on dresses may be desired in order to gear her dress style, but for now I just jumped in and made a few concepts. Ommiting wings for now; I just want to concentrate on her body, as its important that the wings don't just dominate the form as they currently do.
Much more will be coming; just that I'm slightly ill with flu, so working was less pleasant than usual. One thing that seems very apparent to me is that mixing fur styles makes for a more interesting character and allows for an 'eye-rest' location.
To me, I'd like to use number 5 as a base and try swapping some parts from the others in a another iteration just to get this base form down. It has a few problems and concerns but things like the density of fur can be revised. I'd like to see what happens if I start giving it the boots from no.2/3 or the fur style and tone distribution of no.2. Let me know what you guys think.
Any thoughts about the colour scheme, sticking to moth shades? I still like the antennae on 6, but realised if she had a very brown, dull colour scheme she might read more as a cockroach rather than a Moth, which would be ew. I like the moth in the moodboard with the shades of black, white and beige with pink highlights.
You seem decided on the proportions, so that's already a lot of work you can do making the base body.
Was alpha masking in the mobile engine even possible? And what tri count are you aiming for?
I'm not too scared of her resembling a cockcroach, they're recognised by being very dark (maybe with some orange/reddish tones) but being quite specular as the surfaces are much more reflective than a moth's fur. So long as the fur is clearly stated as fur it shouldn't be a problem I hope.
I don't think physics would be possible on a per bone basis for the ponytail at runtime, but I wasn't really planning it anyway; I was gonna either hand animate it or see if Maya could get some physics simulation of bones (not that I know, but would make this pretty easy) and bake that in (so pre-animated physics really).
Masking is possible but is apparently very expensive; the UDK UDN doesn't stress this so hard for Masked materials in UDK but UE4s turned round and claimed that both are expensive so I'm trying to avoid them where possible. As for tri count I'm not too sure, I'll have to look into more examples. However, if we assumed that the target was iPad Air and iPad 4 we'd have a complete maximum (for a given scene rendered in the view) of 500,000 tris, so the character should probably be between 4,000-8,000 (around 1-2%) given that theres gonna be loads of other stuff flying around. Whether or not they're talking about 500,000 LIT tris as opposed to UNLIT is certainly a concern though.
Oh and you only got 5 texture samples, 2 of which you'll already be using (basecolour in RGB, Roughness in 1, BC5 Normalmap meaning you can't replace the B and A channels, unless you swap it to ugly DXT which works for realistic games, but is a killer for stylistic ones)
Its worth mentioning that she is the player character so she'll have extra leeway over everything else. The other stuff that I'll be making (level meshes, enemy npcs, etc) will be on much tighter budgets.
This was developed more iteratively, or rather as I made each one I tried to improve it over the last one. The first one just deals with a few concerns in a quick way, just scaling some of the fur to be bigger or smaller in given areas. It was looking clear that it would get pretty noisy when scaled down onto a little 7"/10" screen though so revision began on trying to minimise the noise.
2 allieviates the noise a bit and makes things a little simpler; particularly the skirt and the shoulder decorations. I really like the 'scarf' that I gave her. The fur seems to work best where tufts were less dense but still represented as big. This leads us to number 3.
3's got more interesting shapes and the tufts have been reduced in density, so the fur is more 'suggested' rather than trying too hard. I think I'll use this as the final main body, but if theres any input on the matter I'd like to hear it!
Did a quick sheet that puts some wings on the character. Took a while to try to understand how the wings looked. These aren't really accurate, they're more of a desired outcome; I'd like for them to not overextend to the ground if she stands normally. It does, however, mean that crouching requires her to bend forwards or unfold the wings out so that they don't rub the ground. Actual specific lengths will be done in the orthographic, which is likely to come after facial feature design (which should be pretty short).
Prior to drawing them I looked at some of my favourite puni-plush style characters eyes and facial features.:
(Top Left: Kagami and Tsukasa Hiiragi (Lucky Star). Bottom Left: Miki Noda (GA, Geijutsuku Art Design Class). Right: Nori (Hidamari Sketch)
Whilst obviously they're designed to be simple and easy to read, there are differences in terms of facial proportions, curvature, eye shape and how things are represented by the artist. I've taken elements of these and applied them to various head concepts in order to determine what kind of facial features she should have:
The Tsurime eyes are quite fitting because they give a feeling of confidence and determination, or even cockiness about the character. The Tareme eyes on the other hand emphasise cuteness, leaving the eyebrows to convey the determination instead. This would be alright, but they are obscured by the hair at times which may be problematic.
In order to make the eyebrows stand out and to take further influence from moths, they've been made quite thick and furry. This enables them to define emotion out even at further distances.
I thought that number 7 was particularly striking, and that the glassy look of Lucky star inspired iris' would work well (especially if the other fairies use the Tareme kind of eyes and were given well defined pupils). Let me know what you think.
In order to not make this post pointless I'll talk a little about what I'm currently doing. I'd like for the character to be able to strongly express exaggerated emotions. Anything from getting hit, running the wrong way, flying really fast, anything that should provoke a reaction to a 4th wall sensitive character should result in a funny, cute or otherwise expressive face. So, a second puni-plush moodboard on exaggerated expressions (thats not to say she won't have normal expressions, but you don't exactly need a moodboard for that):
One thing that is very common in any kind of 2D animation, be it cheap, bottom of the barrel anime, saturday morning shows or Disney classics (though template driven things like My Little Pony: Friendship is Magic is an exception) is that a character isn't going to look exactly the same because they're redrawn or tweened each frame. This is more obvious in the cheaper stuff where consistency is generally thrown out the window but in these cases like the above it is used intentionally in order to express different emotions using form, colour and sometimes typography. These characters do not normally have those proportions or facial expressions as default, they are morphed into those when the situation calls.
This is something I think isn't common in 3D animation in general, is practically absent in games, and certainly isn't pulled to the extents of Hidamari Sketch. As a fun little aside to this already 'doing for fun' project, I'd like to see if the mobile character can perform these kind expressions using bones, material code and (the part I'm not too sure will work on mobile) morph targets. If parts of this don't work, its not a big deal; these faces can still be pulled off at a texture level too.
Its worth remembering that these expressions (particularly the Wideface 'lines for eyes' faces from Hidamari Sketch) are context dependant; the character's implied feeling can be completely changed with a different background or a change to other key components like other parts of the face (compare the blond girl at the bottom with the white-haired girl above her, and with no context the image up and right from that one is difficult to work a meaning from ). As such, care should be taken to only present the face when it is the correct response to a given situation.
Tomorrow I should have the character doing some rough expressive faces. They'll be hopeful inclusions on the final game asset.
I'm not sure about the eyebrows though. Being that pronounced and bushy is more of a male facial feature, but maybe there's a way to find a middle ground?
As for the expressions, I don't think you'll be able to recreate them using bones or rigged facial features, at least for the eyes. There's so many unique and strange expressions on those characters, I feel like they'd almost certainly have to be done via texture swaps.
I probably should've explained the setup a little better: Bones would drive the antenna and ears, the cheeks and chin will be driven by morph targets and the face itself can swap textures via a texture atlas:
I drew some roughs of expressions that I would think this character would have.
The top half are more extreme faces that would hopefully would also use morph targets to mold the shape of the face into more different shapes. The bottom half need to do this; they are not that extreme.
Really want to start modelling now, so I'll do the orthographics tomorrow.
Do some tests on typical mobile devices - latest retina phones don't count, target the lowest realistic device - iPhone 4 and Vita.
On the topic of mobile and your antennae, your plan to bone it and still achieve those jagged expression poses for them is going to be a little dangerous. I mean you can get away with it but I'd much rather spend those bones where they matter (in the body) because billboards could easily deal with those antennae, and given the size on screen it wouldn't particularly be a fill rate hit to do so. whereas bones would be a measurable cost. I'm also not sure on the costs of morph targets and whether they'll be seen at game distances. For cutscenes, yeah, but not actual gameplay surely?
Really, you can't jump into starting a game project by throwing together a character unless you want to re-do work later - you'll want to really plan out how and where your processing is going to be spent and then build around these targets for the maximum visuals at the best performance.
Doing it as you go is the number one reason most projects fail
Good luck though, keep us posted
My target sized mobile devices are the 7-inch/10-inch tablets; I didn't think about opening up to the phones as I wanted to try and keep this project simple (though in fairness, if it would work on phones, it'd probably work on tablets, just not the other way round). I'll see if she can be adapted for those two (well.... iPod Touch 4th gen and PSP.... close enough).
I wish I could say otherwise, but I don't have a suitable tablet that could actually run a UE4 game well (or as mentioned, no vita or iphone 4/5); I highly doubt the only one I've got (Asus TF101) could actually run the game at LDR/Basic Lighting settings. Although theres fun to be had with animation and blueprint scripting, this is primarily an asset development thread. However I'm really glad that feedback is pressing on the importance of optimising assets and planning for the tight constraints of mobile development. So for the question of 'are my assets efficient enough and fit visually for mobile game' I guess it will be a lot of benchmarking and porting videos/screenshots to my TF101.
As for the antennae, I don't know whether bones or an Opacity Masked material would cost more; if I use an opacity masked material if keep the antennae with the rest of the body (excluding the face), the entire model's area becomes a constant zone for alpha checking. Split it up into its own material and it gets an extra drawcall and is harder to animate things like bouncing. Or the problematic expression could just be removed and a simpler bone chain can be used. I don't know which one to go for (though 3rd option seems like an easy way out) but I do worry about how the UE4 doc stresses its hatred of opacity masking so severely that I think that if I can get away with not using an opacity material, I probably shouldn't use it.
I don't mind the idea of reworking her; this is pretty much a learning experience and I'm a sucker for the more painful ways of learning.
Anyways, I took your advice of getting her onto mobile devices for a test using this quick image:
On my TF101 it seems reasonable. I understand that aside from making people download it and try it on their systems I can hardly prove it without primitive levels of photography:
On PSVita (or well, PSP as a cheap man's option) the character looks alright but its more like in blocks of colour rather than defined parts. This is ok, but it may be worth increasing her head size so that her eyes and expression are more visible. On iPod 4 as a psuedo iPhone 4 its a bit small, kinda needs a proportion change to be viable but its not too bad. On my Xperia Play its surprisingly better than expected in that I can make out the eyes in sufficient detail, but again on head size.
As for how the character looks right now I've gone and finally finished her orthographics for modelling.
In reality the smaller of the moth's wings are a little bit bigger than that, but that makes it difficult to fold them in without overcomplicating it (as you can see they are barely covered by the larger of the two when folded) so I think it can be accepted as a stylised derivative.
She currently stands at 4+2/3rds heads tall. As noted her head size might need some increasing but I'm fine with doing that in actual modelling as I really want this ball to finally get rolling.
Updated the test image so that a comparison could be formed, its much more helpful
On the 10-inch her face is very easily discernable. On PSP it is an improvement as the eyes are much clearer but in order to get better it would probably require a proportion overhaul and I'm not entirely sure I'd want to do that. It would most likely look better on its actual representation (Vita), so if anyone's got a vita and wants to give it a try I'd greatly appreciate it.
Face tested with a quick polypaint drawing to try and make it look correct from different angles. I've taken sculpting eyes for granted as this was a lot harder than I thought it would be.
leg/boot fur closeup
Please let me know what you think, onto the wings and the final touch ups and stuff.
Wings unfolding (left = little stretch, middle = default outstretch stance, right = full outstretch; very/too fairy like)
I took the sculpt and retopped it in 3D coat. I gave it an unwrap which is using symmetry wherever possible. The good thing is that at 1024 pixels, the normals are looking much better than I expected in UE4. The bad thing is that I ended up with 8786 triangles which is much higher than the 4-7k range I was targeting.
I think I can find more optimisations at the fur areas (chest, arms, boots) but for now I'll treat this as the highest possible LOD.
Normals in UE4 with AO:
Test in-game:
Gonna make her roughness map soon, using it to determine if its gonna be worth having one or just using FullRoughness
Also, consider your target audience. Try to get some feedback from them; present a wide palette of textured figures, and find out which they like.
I'd probably nix the fur, at least around her lower legs & feet. I don't think it's buying you anything, and it's inflating your polygon expense. I'd be willing to bet that smoothing her legs and getting rid of the bracers will get you close to your 7k budget.
On interesting experiment - if your engine can handle it - is to render her model on a game screen (with game camera) in wireframe mode. You might be surprised with how dense some areas appear; I've known PS2 games where the characters appeared almost solid...
Woo! Some feedback! I agree, I think that she needs to have some of her colours more vamped up and needs much more use of that accent colour. I think I'll do a few paintover thumbnails to evaluate that. In terms of her colour versus the environment, whilst theres some help from things like the fresnel effect in the shader the colour scheme is most likely going to be pretty different; in a vibrant world of colourful mushrooms, foliage, glittering fairies and whatnot, she is intended to stand out for being dull coloured and different. I don't really know if that would really work in all honesty, more paintovers are going to have to be done to 'verify' these colour choices.
I think one of my biggest flaws in modelling is that I don't trust the normal map projection enough; I was skeptical that even at this tri-count it would come out well, and yet the normals/AO came out very well despite my worries. Since the camera is quite far I think I can cover the chest/leg areas with much less density.
With regards to the wireframe rendering you mean render it like this?
Pretty fair trick! I see what you mean, it should be pretty easy to revise the chest and leg areas and transfer the skinned weights from the old meshes. One thing that I would be slightly concerned out is removing the bracers as they add a little more contrast, but I think its worth a go, she might look better without them.
I'll be revising her with the above changes pretty soon then: I'm going to spend the next couple of days updating my portfolion with a few more additions I've done (hopefully this one is good enough to go in before and after re-iteration).
Thank you very much for your feedback!