Pixelation

Critique => 2D & 3D => Topic started by: Howard Day on June 26, 2019, 04:00:27 pm

Title: Wing Commander Pixel Art-y Unity Remake
Post by: Howard Day on June 26, 2019, 04:00:27 pm
Remakin Wing Commander 1 in 640x400 in Unity3d! Why? Cause I think it looks cool. Ship re-designs inspired by Arne - https://androidarts.com/spaceships/WC.htm And a running, AI-driven demo here: http://www.hedfiles.net/WCR_GL/index.html So far I just have the one cockpit, unfinished, and two fighters. I plan on replicating most of the ships from WC1 with a very few additions.
(http://www.hedfiles.net/WCRemake110.gif)
Enjoy!
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Ozego on June 27, 2019, 02:08:24 am
Looks amazing. What is your process like? I can tell that the ships are put together using mulitple billboards/imposters but I can't grok how it was made. Could you show your sprite sheet?
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Howard Day on June 27, 2019, 03:07:37 am
There's actually 17 sprite sheet per ship, for a total of 544 sprites each. Here's a couple!
(http://www.hedfiles.net/HowieDralthiACE6.png)
(http://www.hedfiles.net/ArneHornet12.png)
Basically each sheet holds a vertical angle of a complete horizontal rotation. Then some fancy code is used to figure out the rotation of the sprite and what angle the billboard needs to be at. It was fun to figure out - and it was so long ago, I don't really remember the math involved. :P
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Howard Day on June 27, 2019, 06:43:21 pm
(http://www.hedfiles.net/WCRemake111.gif)

Okay - medium update - I've added some animation to the player's legs - it always bugged me that they we static with everything else going on. now they're controlling yaw - I miiight change that to spin? Maybe. I've fixed the eject light and core damage warning lights - Eject will light up with 30% core damage - but only if your shields are < 50%. I've updated the explosions to inherit the ship's velocity when they die, also updated the projectile impacts to spawn debris when you start chewing through armor.  The plan is to have specific Kilrathi/Terran armor and hull chips - but for now it's just spawning a bunch of rings like Sonic getting shot in the ass.  Fuel's been coded and hooked up - a Hornet has the same fuel capacity as a F-14. 2400gals. Seemed a good starting point. In the background, but not quite live- I've been working on camera switching for right/left/back/ chase cam views - they look awesome - but I need to mess with the art-shifing logic a bit to make the m move around right when you turn.
Enjoy!

http://www.hedfiles.net/WCR_GL/index.html (http://www.hedfiles.net/WCR_GL/index.html)
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: pistachio on July 03, 2019, 08:49:29 am
Without being around for WC1, you've nailed a hand pixeled/index painted vibe. Looks like your last projects were leading into this. And always great to see tributes to Arne's in-depth designs. No time right now but I'm def jumping into this demo soon. Bit nostalgic for arcades now...

What was the process for the UI/cockpit? Straight 2D paint from scratch? 90% 3D model? Or (I'm guessing) a 3D base that was painted over?

BTW the latest hyperlink doesn't work, bronze-age PHP forum doesn't handle anything other than plain URL tags.
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Howard Day on July 03, 2019, 09:08:24 pm
Thanks, pistachio! The UI and cockpit...are renders. No painting. I directly save images from 3DSMax to Unity. I fiured out how to do index painting in max, and I love the poop outta it. Here's a glimpse at a straight from MAX 3D render of the main menu:
(http://www.hedfiles.net/StartDemo.png)
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Vinik on July 09, 2019, 02:32:21 am
Thanks, pistachio! The UI and cockpit...are renders. No painting.
They are what the what? Not even some manual adjustments on the pixelized result at all? :o
Frankly I am shocked. I could guess that on the ships, given the tech displayed on the pixel rendering thread, but not on the cockpit/UI, no.

Also, are the ship's sprites rendered with a parallel camera or a perspective one? I guess parallel, and you zoom by simple scaling, disregarding perspective to cut on the number of sprites? Awesome stuff.
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Howard Day on July 09, 2019, 08:04:25 pm
They're straight renders. I don't touch them up at all. I'm pretty lazy. I just did a pass on doing damaged versions too - these get dynamically masked in based on your ship taking core damage. Again - these are just renders. I'm happy to share the max file for parts of the cockpit, or maybe give a procedural rundown of how it's done? I need to make a new cockpit for a Dralthi and Valtar, so either one would be a good step-by step tutorial! :D
(http://www.hedfiles.net/Hornet_Cockpit_Front.png)
(http://www.hedfiles.net/Hornet_Cockpit_Front_Damage.png)
(http://www.hedfiles.net/WCRemake211.gif)
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: eishiya on July 09, 2019, 08:08:58 pm
Do you plan to do a clean-up pass on these? At a glance they look fantastic, but I fear during prolonged play it'll be much easier to notice the messy bits. But then again, during prolonged play, the hectic gameplay might keep one's eyes from wandering xP

Nitpick: the shattered glass on the fuel monitor and the one above it seem to have their cracks lined up, making them look like one monitor with a frame across it. If that's not the intent, I think offsetting or h-flipping the cracks on the smaller screen would work better. The two small monitors on the left have this same issue, but to a much lesser degree.
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Howard Day on July 10, 2019, 12:57:07 am
Vinik: Oh the ships are rendered at a very narrow perspective, not orthographic. I *think* it's something like 7.5deg FOV. Completely orthographic didn't look right in a perspective-rendered scene. I'd likely go that way in an isometric game, tho.
eishiya: I don't plan a clean up pass, actually...I'd actual;ly love a list of the things you see that would otherwise *need* a pass, and to see if I can fix them on the render side! :D Thanks for the glass crack line up note - I will *definitely fix that.
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: eishiya on July 10, 2019, 01:15:06 am
Hard to give a list, almost all the assets you've posted have some noisy bits that, in a perfect world, would be worth cleaning up. The parts that stand out the most to me are in the cockpit: the area around the round screen, the ceiling, the side-frames of the main window, and the orange bit in the bottom centre.
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Vinik on July 10, 2019, 03:39:15 pm
Cool, so it is just quite low Fov.

I would add to eishiya's list that the ship's green "windshield" (don't know the equivalent term for airplanes and ships) have gradients that look a little too smooth for typical pixel art, and it seems to be skipping the dithering part of the style (intended?).

Anyway, this looks really great :). If I were you, I would be tempted to rebrand this as a game without WC IP/designs after you are finished having fun :P. Also, do you have any plans on commercially releasing your pixel-art rendering tech as a shader?
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Howard Day on July 11, 2019, 06:29:20 am
eishiya:Thanks! I'll see if I can make these things less noisy - It increases my render times, but does improve the look.
Vinik: I've done that sort of thing before...I just in this case really like the nostalgic feel of this particular universe, and I'm on a roll, creatively. Id sorta hate to stub my mental toe, so to speak, and change direction. Does that make sense?
Here's an update on the damaged version - I'm really proud of how the glass looks.
(http://www.hedfiles.net/Hornet_Cockpit_Front_Damage2.png)
And the Sprite masking in Unity is super cool, too - I can easily dynamically blend this guy with the clean version, with dithered edges. It's cool. :D
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Vinik on July 12, 2019, 01:45:43 am
It surely makes sense to have fun :) and any step by step on the process of doing this would elevate this thread to a treasure-chest-level art reference :D
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Howard Day on July 13, 2019, 11:43:18 am
I will do that, then!
Got Damage Masking working!
(http://www.hedfiles.net/WCRemake225.gif)
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Kich on July 13, 2019, 02:06:56 pm
This is looking great. :o

Thanks, pistachio! The UI and cockpit...are renders. No painting. I directly save images from 3DSMax to Unity. I fiured out how to do index painting in max, and I love the poop outta it. Here's a glimpse at a straight from MAX 3D render of the main menu:
(http://www.hedfiles.net/StartDemo.png)

I'd love to hear how you did that rendering on 3DSMax.
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Howard Day on July 15, 2019, 04:34:48 pm
Sure! I'll even share the MAX file. :D So, the basics are: Build a mesh, duplicate that mesh, push it out a bit, turn it inside out, and make it slightly darker than the original. (http://www.hedfiles.net/renderdemo01.PNG)
Then for the materials, you should grab this plugin - http://www.ddag.org/products.html F-Edge. It provides really nicely controlled edge smoothing in scanline 3dsmax.
So the basic workflow for the materials is to use a mapped Gradient ramp using a bitmap gradient.
(http://www.hedfiles.net/renderdemo02.PNG)
I've actually got it a bit wrong here - for the gradient to ramp correctly, the bright side should be on the right, not left - but since I'm lazy, I just added an inverting output node to fix it.
So here's what the controlling composite map, under that output node looks like!
(http://www.hedfiles.net/renderdemo03.PNG)
Layer 1 is a simple gradient that's mapped using UVs on the text - it goes bottom to top, and front to back on the text model. The second is the highlight edge 0 it uses the f-edge material to call out the hard edges of the text with bright corners, and then is masked by an angle blend to only appear on the bottom of the text. The top is the dither - it's a 1-1 screen-mapped texture that is just a tiled classic dithering pattern. This is blended in very gently at 10%.
There you go! That's basically how I made these:
(http://www.hedfiles.net/GameLogo.png)
(http://www.hedfiles.net/StartDemo2.png)
and as promised, here's the max file, with everything you need in 2015 format!
http://www.hedfiles.net/StartDemo.zip
Enjoy!
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Vinik on July 17, 2019, 01:23:19 am
Amazing tutorial, thank you Howard :y:
So, the basics are: Build a mesh, duplicate that mesh, push it out a bit, turn it inside out, and make it slightly darker than the original.
I have been using this as a way to have cheap outlines on meshes, interesting that it can be also be used in renderings with this level of quality.

I am not a fan of dithering in general, except when it implies texture, but here it does help selling the pixel-art-ish style of the renders.

Are all materials such as the green painted metal and the rest of the cockpit being rendered with gradient ramps as well? I was under the impression that the color ramps were caused by a LUT posterization on the whole screen, rather than a mapped gradients per material. I wonder if the rote would be too different to achieve something similar to your results in blender.
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Howard Day on July 23, 2019, 02:40:18 am
Yeah - I agree that too much dithering is...problematic. I try and keep it subtle - just enough to look like someone polished their pixel art a bit. And yep - all the materials are gradient ramps. The LUT posterization on the final product just enforces the 236 color limit - but most of the colors are already in that range save for some little fringes of AA here and there.
I'd be excited to see what you come up with out of Blender!

Here's the new added Salthi, both in turnaround and in action!
(http://www.hedfiles.net/WLSalthi01.gif)
(http://www.hedfiles.net/WCRemake301.gif)
Also showing off how well those damage effects work!
Enjoy!
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Howard Day on July 26, 2019, 06:34:07 pm
I'm pretty close to pushing out a new update to the demo - A major update, in fact.
(http://www.hedfiles.net/WCRemake320.gif)
And I['m starting to think about the Dralthi cockpit. That'll be the first playable version - where you can pick a side to have combat with.
Here's a glimpse of the Dralthi IV cockpit I did a while ago.
(https://cdn.wcnews.com/newestshots/full/armada_dralthicockpit.png)
Enjoy!

Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Howard Day on August 01, 2019, 03:42:07 am
So, I just figured out how to record Wingleader in 60fps!
https://drive.google.com/open?id=1bycs44aNQRWFeemwSLMnyOZBkrbXF87U
I also updated the background art to be more space-y and less LSD-y.
(http://www.hedfiles.net/SpaceBackground01.png)
Enjoy!
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Vinik on August 02, 2019, 04:31:51 am
Loving everything  ;D. Regarding the Dralthi metallic tubes on the left side, perhaps make the ramp have a few less steps? Feels a little too gradienty and rendered compared to the first cockpit, although the pixelated shape of the white cluster on the blinn-like highlight is quite cute. The ones on the right side feel more handmade. As a whole the Dralthi one seem to have a higher color count compared to the first one. Anyway the model is great :y:

As for the galaxies (particle generated?), the original ones look more like handmade pixel art on a quick glance from the gifs, while the new ones feel more like index-painting, but I also prefer the more sober coloring. Nitpicking as I am, I would ditch the lower bottom one, it gives a lowres/blurred vibe. The green, pink and neutral ones are neat.
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Howard Day on August 03, 2019, 08:22:41 pm
Vinik: Oh! That dralthi cockpit is ooolllddd. It wasn't done with index rendering and is missing a bunch of the stuff I've learned. I've got the new one in progress!
And I took your advice - new background set!
(http://www.hedfiles.net/SpaceBackground02.png)

Also, I figured out how to record the game in 60fps. Here's a look where that's at! https://www.youtube.com/watch?v=0rUsiMM9eTo

Enjoy!
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Howard Day on August 05, 2019, 08:00:07 am
Weekend work on the Dralthi cockpit - Still WIP but the vast majority of the base is there!
(http://www.hedfiles.net/dralthicockpit01.png)
(http://www.hedfiles.net/Dralthi_Front.png)
Enjoy!
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: eishiya on August 05, 2019, 02:33:04 pm
The horizontal rounded parts in the middle seem more high-colour and painted than the rest of it. The monitors seem to have very noisy frames. I guess this shader doesn't handle rounded shapes quite as nicely as the orthogonal lines in the first cockpit xP
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Howard Day on August 05, 2019, 06:25:43 pm
eishiya: Innnteresting - that area is using the same ramp as everywhere else. I might down-step the # of colors in that ramp. The noise is completely avoidable, and I'll fix it going forwards. Sorry. :(
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: eishiya on August 05, 2019, 06:53:38 pm
It's a small, curved area, so all those colours get used in relatively small areas, creating the more painted look. The same ramp might work better for other surfaces.
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Howard Day on August 07, 2019, 06:49:12 am
Tuesday Evening Dralthi update - I did lower the # of colors on the bright end of the pipe ramp, and went with an even subtler brown shade to the shadows, added a ton of detail. Definitely getting closer to something that looks good!
(http://www.hedfiles.net/dralthicockpit02.png)

Enjoy!
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: eishiya on August 07, 2019, 12:52:16 pm
This is looking much better!
The orange... wings? sticking forward into space fade to a dark colour, the ramps on that look rather dull since the colours are all the same hue. Even though it's space and thus has very little ambient light, I think some sort of hue-shifting there would look nice.
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: pistachio on August 08, 2019, 02:08:27 am
It has a pretty weak pulse but when I see a project going for this long on pixelation I'm reminded of what an awesome place it is/was.
Finally getting into wing commander now :crazy:
I want to know how much the underlying tech/indexing/whatever has been updated for this since the release of the old thread where parts of those methods were exposed, or if it's the same stuff, just a lot of asset and ramp tweaking.
Lookin sexy, nothing else to say, just keep it up.
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Vinik on August 10, 2019, 11:43:02 pm
Tuesday Evening Dralthi update - I did lower the # of colors on the bright end of the pipe ramp, and went with an even subtler brown shade to the shadows, added a ton of detail. Definitely getting closer to something that looks good!
(http://www.hedfiles.net/dralthicockpit02.png)

Enjoy!

Definitely digging the brown shading/ambiance on those chrome parts. On the gameplay side of things, I understand you are being purist and remaking the cockpit with the original shape, but I wonder if a modern entry in the franchise wouldn't reduce the amount of screen area taken by cockpit to increase the view of the actual gameplay content in the center. But this is not critique, just rambling.
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Howard Day on August 13, 2019, 07:38:25 pm
eishiya: Thanks! I've tweaked the ramps a bit, added a bit less fade off. hopefully that improves it. :D
pistachio: I'm not quite sure what you mean - I've only been working on this for a couple of months. :D All the rendering tech I'm doing for this is brand new for this project.
Vinik: Thanks! So, one thing to note is that the viewing area is actually larger than it seems - these images have about 10% more area around the edges for the cockpit to shift around as you turn.
Dralthi cockpit update!
(http://www.hedfiles.net/Dralthi_Cockpit_Front.png)
(http://www.hedfiles.net/Dralthi_Cockpit_Front_Damage.png)
Enjoy!
Title: Re: Wing Commander Pixel Art-y Unity Remake
Post by: Howard Day on August 14, 2019, 09:31:38 am
https://youtu.be/mglMsYJ-d0w