Pixel Joint Forum : The Lounge : Diversions
Message Icon Topic: Pixel art and CSS, the Android way... Post Reply Post New Topic
Author Message

Joined: 29 March 2018
Online Status: Offline
Posts: 6
Quote Zukero Replybullet Topic: Pixel art and CSS, the Android way...
    Posted: 31 May 2019 at 12:46pm
Hello pixelers,

I just completed the first version of my weird experiment : making a pixel-art based style for phpBB. This is not so weird in itself, but I made it all (OK, almost all) on my android phone.

There are two reasons behind that:
- My time on the computer is limited by life, and dedicated to working on the open-source Android RPG Andor's Trail.
- I have a good bunch of free time where I only have my phone (during kids' sport, or smoke breaks).

A few months ago, I made the new UI for the game, based on some heavily modified pixel art UI assets found on opengameart. Android has a great support for 9-patches which are great to make pixel art UI elements like frames and buttons.

Our community lives on a phpBB forum at andorstrail.com, and I was thinking of making the visual experience of forum visitors similar to playing the game. And so, this little project was born: create a phpBB skin (they call it a style) based on pixel art UI elements, using my android phone as the main development platform.

To do so, I used the following toolchain:
- Apache http server, mariadb and php for Android thanks to the awesome apps made by Tautvydas Andrikys
- phpMyAdmin for basic database administration
- phpBB, obviously, one of the leading forum software
- Chrome and Firefox, with an extension to Firefox easing access to the "view source" function.
- AnGrep, the best app I found yet to have a visual equivalent of "grep -ri". I wouldn't call it a good app (poor UX, ads...), but I haven't found better yet.
- TerminalIDE, because it comes with the best keyboard for code that I found (much better than the well known Hacker's Keyboard).
-ES File Explorer. I dream about finding an open-source replacement for this one, but its support of FTP and SMB protocols is unmatched, its zip archive support is flawless, the UI is great, and perhaps the most important, its built in file editor is incredible (Turbo Editor isn't up to the challenge).
- Pixel Studio - Pixel Art Editor, a great image editor for Android, with support of layers and animation, lopsec palettes integration, and much more!

The hardest part (beyond learning CSS and finding the right tools) was to emulate the concept of 9-patch in CSS. Most advice I found on stackoverflow and co was to use CSS border-slice property.
The issue with that approach is that the content of the so-bordered container is restricted to the central patch. To counter this, you have put negative margins on all the children of your container. That's a pain to deal with properly, and, in some cases, impossible.
The solution was to cut the images into the 9 separate patches: nw, n, ne, e, se, s, sw, w, and center. Pixel Studio made this tedious, but easy. At some point, I wanted to go faster and made a small bash script that uses ImageMagick to cut my android assets into 9 pieces.
With these pieces, I could leverage the multiple backgrounds capabilities of CSS to emulate the 9-patch without any of the limitations implied by borders. The resulting CSS is more verbose, but nothing to fear.

As a last note, web browsers (especially mobile ones) do a fine job upscaling pictures, but for pixel art, they can really mess things up. I found that saving the pictures at 400% zoom was best to bypass the antialiasing algorithms.

That's it. I don't have nor want a blog, so this was the best place I could think of to post this. I may follow up with snippets of CSS and bash script if you are interested, but all of it will soon end up on github.

I hope you found this interesting. I was amazed that Android now provides an okayish stand-alone environment for web design. The real pain is a lack of CSS inspector like the ones built-in the desktop versions of Chrome and Firefox.
IP IP Logged

Joined: 09 September 2019
Online Status: Offline
Posts: 32
Quote MicmasH Replybullet Posted: 12 July 2019 at 3:20pm
That's neat buddy!
Interesting technical limitations you have to deal with.
Stupid auto-antialiasing.

it makes things look better! and not all sharp and pixely!

Pfffft! If I want to wash out my colors into a puddle of 64x64 mud I would have done it myself! LEAVE MY ART ALONE!!

IP IP Logged
Post Reply Post New Topic
Printable version Printable version

Forum Jump
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot delete your posts in this forum
You cannot edit your posts in this forum
You cannot create polls in this forum
You cannot vote in polls in this forum