TGAA collab retrospective

28 Jul, 2023

i finally posted the great ace attorney art collaboration today. as the title suggests, it's an art collab featuring characters from the game. the image itself looks really good and i'm happy with how it turned out. that final output is pretty standard as far as art collaborations go though, so this post will just focus on the code which was what i was primarily working on... yeah, judging by how it got around 200 link clicks, i feel like i didn't make it clear enough that it was a whole website LOL. but i'm pretty happy and proud of the layout i came up with so i'll share it here in case anyone wants to use it as well.

as a disclaimer, i'm purely a hobbyist when it comes to html/css/javascript and i don't know anything about what's right or wrong! but since it's written from a non-webdev point of view, it might be useful to other people who aren't as familiar with it either. feel free to look through the source code or the github repo if you know where to find it.

planning

it's based on 합작 (hapjak) collaboration websites which are popular in korean fandom. single-character collabs are particularly common in character-focused fandoms which is what i'm used to, so i wanted to make something like that but with a traditional 'art collaboration' layout rather than having the pieces be separate from each other. such a layout isn't possible with website builders, thus i decided to make it myself.

i made a mockup and it was really ugly, but i figured i could get the layout and visuals working later! (the slideshow aspect was there from the start since i just used w3schools lightbox code.)

structure

for the display, my primary goal was to make a flexible grid layout so that there could be a different number of characters on each row on mobile and desktop without having to manually position all of them. that's easy enough on its own, but i also wanted to have the gap between each character as well as overlapping characters so it seemed more like a cohesive put-together image rather than a flat grid of characters next to each other.

the solution i came up with is essentially a grid with both 'blank spaces' and 'art spaces', which makes it look like it's centered while the characters are able to overlap with each other in the gaps. simplified, it's like this:

using nth-child and differing css based on screen size, i could then state how many "grid-artist" and "grid-blank"s i wanted in each row. it's still a bit of work, but it's far better than manually positioning every artist box for desktop and mobile like i worried i would need to.

i'm sure there's a better way of going about this, and if anyone has any suggestions i'd love to hear it. (particularly, i'm bothered that i had to create the grid manually in the html file in order to have klint and lady b be 'centered' differently on mobile and desktop, and i feel like i should just be able to say "have ___ number of items in each row" in the css without having to write the numbers myself.)

as well, sometimes the positioning of the artwork wasn't great, so i just used div ids to move specific characters.

automation

the other big goal was to draw data from a spreadsheet instead of needing to manually copy and paste the code a bunch of times for the artist info. honestly, there were only 54 participants so it wasn't necessary to set up such a structure, but i'm glad i did it because it was so much easier to deal with when i made some layout changes in the end. for this i used javascript which i previously had no experience with.

getting data from an active spreadsheet is really unnecessary though, so what i did was use this .csv to array conversion code which allowed me to export a .csv file from a spreadsheet use that to automatically create divs with the artist information. after that, i used if statements for creating certain divs based on whether the artist had a twitter listed and such.

overall, the layout's scalable and flexible. spreadsheets are a lot easier to manage than copying code over and over again, and it'd be easy to add a hundred more artists with the setup i have. i feel like the equivalent of an illustrator who discovered the multiply layer mode for the first time, but i'm really proud of it! it was fun!!!

minigame

i added a cat collecting minigame at last minute and i'm pretty sure nobody realized it was a thing since i didn't mention it anywhere and it was put in after i messaged the artists for final revisions. i thought it was pretty cute and funny though. all it is is inserting a secret kitty after three of the artist divs randomly. when you click on all three, you get a congratulations notice and a button to tweet that you found all of the cats.

but no one tweeted it!!!

i put it in to encourage people to open up the full artwork in search of all of the cats, but it seems not a single person did it and tweeted it so LOL. at least it was quick and easy to make: just this and another function that adds to a variable whenever a cat is found.

thoughts

initially, i had a lot more to say about the presentation of digital projects, but considering that hardly anyone actually clicked on the site i feel like what i had to say about that doesn't matter. still, i think permanence is important for digital projects. as an artist, i want my artwork to be presented nicely with a feeling that 'it'll always be there'. maybe that's why physical zines are appealing to me even if i have no interest in actually owning a physical copy of the book.¹ twitter is going to shit and google drive isn't accessible through search engines, so it's important to at least put your digital projects on itch.io or gumroad for permanence, even if they're free.

i say digital projects but people only make zines nowadays anyway. i feel like it's pretty funny to see some people treat this as if it was a zine when i never called it that (ok, i did advertise it in zine town server but i didn't tag zine promo accounts or anything). this is just a regular art collab with a very extra organizer who likes to do whatever he wants. i mentioned 합작 sites before, but even outside of single-character focused sites, i would like to see more english digital zines in that style. the format of digital zines in english fandom feels too limited; there's no reason for a digital-only art collection to be in a specific format or for fic to be limited to particular wordcount if it's not going to be printed anyway.

future

anyway my next project is a digital-only art collection zine in a specific format.

the twist is that it's specifically designed for printing at home, so it warrants having a a lot of specifications on the file dimensions and colors (color ink is expensive so it's monochrome only). the theme is DGS characters as dogboys. i've had the site prepared for three months now, but i need to sort out some IRL things first before i can go ahead with it.

with tgaa collab, i didn't hold applications because 1) i genuinely thought i'd only get 54 signups across a whole month², and 2) i hate rejecting people. the first-come first-served method totally sucked though and i still feel really bad about that.³ it seems by my recent twitter poll that people do prefer portfolio-based applications so i will be very brave and reject people for once.

as i said before, tgaa collab's code is scalable so i may host it again in the future with a different theme and fully open submissions (no assigned characters). as well, if anyone else wants to make something similar for any series then you're welcome to just pull the code directly. i won't bother cleaning it up unless someone really wants to make something with it though, so if you do then feel free to message me.

that's all! overall, again, i am super happy with how the collaboration looks in the end. thank you to everyone who drew something for it! happy 2nd anniversary to the game that made me insane for a ****** man!!!

#art #coding #report