Champions Chess Tour Logogenerator
Sammen med Schjærven Reklamebyrå utviklet vi en logogenerator for Play Magnus og Chess24 sin nye online-satsning – Champions Chess Tour.
Schjærven Reklamebyrå utviklet i 2020 det visuelle konseptet for Champions Chess Tour. Sentralt i den visuelle profilen var idéen om at logoen skulle være en visuell gjengivelse av et spesifikt sjakkparti, som fanget dramatikken i spillet trekk for trekk, og dannet et unikt visuelt mønster. Logoen består av et 8x8 rutenett som representerer sjakkbrettet, hvor trekkene tegnes inn på sine faktiske posisjoner. Ved hjelp av forløpninger får man en følelse av retning, og over tid viskes gamle trekk gradvis ut slik at man får en følelse av progresjon.
Designerne hos Schjærven hadde allerede laget en skisse på logoen, men prosessen med å sette alle trekkene manuelt i Adobe Illustrator var tidkrevende. I tillegg var det behov for animerte versjoner til bruk på nett, film og TV-sendinger.
Teknologi
- Vue
- GSAP
- ffmpeg
- Slim
- Netlify
Generatoren
Heldigvis er også sjakkspillere nerder! 🤓 Allerede i 1993 ble det laget et filformat for å representere et sjakkparti, Portable Game Notation (PGN). Sammen med chess.js, et åpent Javascript-bibliotek for å lese og validere sjakktrekk, hadde vi ganske raskt en motor for å spille gjennom trekkene i et sjakkparti.
Den neste (og største) utfordringen, var å gjenskape det visuelle uttrykket som Schjærven hadde skapt, på en måte som gjorde at vi både kunne hente ut et stillbilde fra et gitt trekk, og en animasjon som viser hele eller deler av et parti. Vi landet på å tegne ut trekkene på et canvas-element, og bruke GSAP til å bygge tidslinjer for de ulike trekkene, og partiet som helhet. Dette gjorde det mulig å generere bitmap-versjoner av logoen helt opp til 32767x32767 pixels, fra et hvilket som helst punkt i partiet. 😲
Rundt det hele bygget vi en Vue-applikasjon for å styre alle de ulike parametrene i motoren. Ved hjelp av applikasjonen kan designerne hos Schjærven og Chess24 på en enkel og morsom måte eksperimentere seg frem til endelige logo-versjoner for de ulike partiene.
Eksport
Et viktig krav til leveransen var muligheten for eksport av både stillbilder og videoer av logoene, til bruk i trykte medier, reklamefilmer og TV-sendinger, og integrert på nett.
Mens stillbilder praktisk talt laget seg selv (canvas.toDataURL() 🎉), måtte vi bygge en egen serverapplikasjon for å sette sammen videoene. Vi landet på å bruke mikro-rammeverket Slim som et tynt og effektivt lag over ffmpeg, som gjorde de tunge løftene. Dette gjorde det mulig å eksportere de ferdige filmene både i optimaliserte formater som MP4/h264 for bruk direkte på nett, og i høykvalitetsformater som Prores 4444 til bruk i videre produksjoner.
Til sist tilrettela vi for at en logo-animasjon kan embeddes direkte i en nettside vha en enkel embed-kode.
Turneringen
Champions Chess Tour samlet hele verdenseliten i sjakk i sin første sesong. Med fem millioner timer sett, og 19,5 millioner live views, ble den tidenes mest sette online-turnering i sjakk. I tillegg ble turneringen sendt på utallige TV-stasjoner, og promotert i ulike medier.
Under European Design Awards 2021 vant prosjektet gull i kategoriene "Motion Logo" og "Digital Miscellaneous". 🥳
