Devlog Update #2: Advertising in a new world

Welcome to the third entry of our Junkerpunk devlog series! As the creative journey unfolds, I’m excited to share the intricacies and artistry behind bringing this unique game world to life. Junkerpunk is an ambitious project, blending the nostalgic charm of pixel art with the immersive depth of a 3D environment. Today, we dive into the heart of the visual design process: crafting pixel art for a 3D world.

Creating pixel art for Junkerpunk isn’t just about placing pixels on a grid; it’s about capturing the essence of a post-apocalyptic cyberpunk world, filled with remnants of a bygone era, and translating that into a vibrant, explorable universe. Each sprite, texture, and detail is meticulously designed to ensure it not only stands out but also seamlessly integrates with the three-dimensional spaces our players will navigate and the layers of advertising they will be bombarded with as they roam the underbelly of Neo New Hampshire.

In this devlog, we’ll explore the challenges and triumphs of merging these two artistic styles. We’ll delve into the techniques we use to maintain the integrity of pixel art while ensuring it complements the 3D structures, video, and environments. From the initial sketches to the final rendered assets, join me as I reveal the process, tools, and inspirations behind the pixel art that defines Junkerpunk.

Archaeology

#

When I first heard about the shoebox tools back in 2012 (ish?) I was pretty blown away by the power I could wield to aid me in building texture maps – even if the source image I had was taken at an angle. 🤯

It’s seriously some impressive stuff! It can save you TONS of time making a flat version of an image like the example below illustrates. I was equally as surprised that this tool didn’t have a more modern counterpart that could be used for similar things. It was built using the now defunct Adobe Air, which you can’t even get from Adobe’s website anymore. If you have a machine running Apple Silicon you will also have to go in and enable Rosetta for it so it will emulate for Intel architecture, but let me show you why you should jump through a few hoops to get it running.

Dang. It really is that easy! This would help me take a ton of old source photos I had lying around from different photoshoots over the years and straighten them up to use as textures and references. I still can’t believe nothing else like this exists.. it’s so insanely useful for texture artists and will save you mountains of time. I cannot recommend it enough. I would love to see something with AI take this to the next level.

Textures and sprite mapping

#

The walls will be pretty high but they’ll actually be folded in to be C-shaped. I think they are coming along well enough. Was worried I’d have to upscale them but I like how the lego set/sprite sheet for the first area is coming along. the added height gives me a lot of room to play around with overhanging things like pipes and cables and I can extend it upwards even more if need be.

Out of all new features, I’m probably most excited about the various walls, info kiosks, displays, and billboards that I can project advertisements onto. I have a lot of freedom to get really creative with these, and if you’d like an example of how all of these will work, read on!

Leveraging ComfyUI, Runway.ai, and After Effects

#

What’s a cyberpunk world without the relentless barrage of flashy advertisements? Think of the iconic scene from Blade Runner with the geisha promoting birth control pills. How can we capture that vibe in our game? My approach involves leveraging a suite of tools. First, I’ll generate an image using DALL-E. Next, I’ll animate it with Runway and give it a cool ANSI-style look using Filliptm’s Comfy Fill Nodes in ComfyUI. Finally, I’ll edit these animations into commercials with Adobe After Effects.

Inspiration

#

As a youngun’ growing up on the net, there were many iconic art forms that arose in the 90s that have now sadly been lost or fallen out of favor. The Magic Eye books where 3d forms would pop out of a page if you looked slighly away from them, the Playstation 1 and it’s lovably janky 3D graphics complete with texture popping and warping (this look is still so beloved that people actively try to recreate it now in Unreal and other game engines), and then BBS ANSI art, my personal favorite from that era.

BBS ANSI art is a type of computer art that originated in the 1980s and 1990s on Bulletin Board Systems (BBSs). It is a form of digital art that uses a set of 256 characters, including letters, numbers, and symbols, to create colorful and intricate designs. BBS ANSI art is often used to decorate BBS menus, loading screens, and other graphical elements.

Absolutely. ANSI art isn’t pixel art in the traditional or literal sense; it’s a unique form of text-based art that emerged from artists pushing the boundaries to create something functional for BBS systems globally. This artistic discipline became a hallmark of luxury and distinction. Incorporating this style into my game would be a perfect fit.

I will begin by generating an image in Dall-E, and then I will move that over to runway. it’s still pretty rough at this point, but I’m basically aiming for these segments to have subtle motions applied to them so I can cut them together in After effects.

From here I can place the generated video into ComfyUI to begin ANSI-ifying them. ComfyUI is a powerful and flexible interface designed for creating and manipulating visual content. Basically, it’s like Automatic1111’s Stable diffusion on steroids. It offers a range of tools and nodes for generating and editing images, animations, and other media assets. ComfyUI supports various artistic styles and workflows, making it a versatile choice for artists and developers.

Its integration with tools like Filliptm’s Comfy Fill Nodes allows for unique effects, such as transforming images into ANSI-style art. ComfyUI is particularly useful for projects that require intricate visual manipulation and seamless integration of different media elements.

ascii_image = Image.new('RGB', image.size, (0, 0, 0))
font = ImageFont.truetype("arial.ttf", font_size)
draw_image = ImageDraw.Draw(ascii_image)

Once you’ve satisfied the myriad of dependencies for Comfy and tweaked your python file, you can type python main.py to fire up comfyUI. You should be met with something like the following message that says Machine Delusions in cool ascii art to let you know all of the plugins have loaded.

Now you should be up and running and able to make some seriously awesome ANSI-inspired video with this simple workflow 😎 :

Literally just plop your video into the video element, run it through fl_ascii, and create a video combine output. Easy peasy! fl_ascii lets you use any number of characters as long as it is featured in your font file you chose in your python file you edited earlier. here I’ve chosen block characters typically seen in ANSI art. I know some purists won’t think this is ’true’ ANSI art but for me and my needs, it’s close enough. 😉

After a bit of datamoshing I wound up with this as my final design:

Pretty neat, huh?

I love this workflow a lot because it allows for a wide degree of flexibility. Everything from the source image, the animation, and the ANSI-fication can all be changed up to the point where I can smash all of the footage I have into trendy looking advertisements for video walls and kiosks. these will all be saved in h.264 format and plopped over into Unreal to project onto surfaces. This is a really fun asset pipeline to work with, and you can do a whole lot more with Filliptm’s plugins for ComfyUI that I haven’t gone over yet, but I’m having a great time experimenting with all of this. Props to Phillip for making such a cool library of effects.

In closing

#

As I continue to build the vibrant world of Junkerpunk, the integration of diverse artistic styles like ANSI art and cyberpunk elements ensures a visually rich and immersive experience. By leveraging advanced tools and creative techniques, my hope is to push the boundaries of game design to craft something truly unique. I know people have misgivings on using AI art, I get it. But I think it can have a seriously formidable place in your toolbox if used correctly, even if it’s just for creating a good concept and I hope that shows in this article. Thank you for joining me on this journey. Your support and feedback are invaluable as I bring this vision to life. Stay tuned for more updates and insights in my next devlog. Until then, keep the spirit of innovation alive and keep creating!