Etorkizunaren hitzaurrea eskuan

Hitzaurrea, Piszifaktoria Ideien Laborategiaren eta Fikzio Fabrikaren; hau da: Irati Agirreazkuenaga, Xabier Landabidea, Eneko Olazabal eta Mikel Ayllon taldekideen, elkarlanaren emaitza da. 2023an Sormen Digitaleko Beka irabazi ondoren, 2025eko Loraldia festibalaren irekiera izan da haien zuzeneko ekitaldi kolektiboa. Eta, hain da deigarria proiektua, ekintzan parte hartzeko gonbidapen guztiak agortu zituztela aspaldi.

Aukeratu zure abentura estiloan sorturiko bidai sonoro bat da Hitzaurrea. Eta, Talaios Kooperatibaren erronka, mugikorrean eta entzungailuekin “jolasteko” interfaze bat sortzea izan da. Jokoa (edo bidaia), oso sinplea da: entzungailuak jarrita, entzungo duzun istorioari kasu eginez (ala ez), oinez, zure herrian aurkitu ditzakezun lekuetara joan beharko zara. Noizbehinka, istorioak aurrera egin ahal izateko, hautu batzuk egin beharko dituzu zure istorioaren aldaera propioa sortuz.

Jokoaren muina audioa izanik, istorioa eta erabiltzailea lotzeko gailu retro-futurista bat sortu dugu. 70/80. hamarkadako cassette futurism estetika erabili dugu interfazea eraikitzeko. Eta, gehitu dizkiogun botoiek zein animazioek, eta audioak elkarri eragiten diete.

Kasetearen zintaren efektua lortzeko, audioaren luzerarekin jolastu nahi genuen bobina bat hustu eta bestea bete zedin. Soilik CSS erabilita hainbat froga egin eta gero, JS eta CSS erabili beharko genituela ondorioztatu genuen.

--tape-width CSS aldagai globala erabili dugu JS eta CSS artean komunikatzeko. Eszena berri bakoitza abiaraztean zero balioa ezartzen diogu eta audioa martxan den bitartean requestAnimationFrame erabili dugu --tape-width balioa eguneratzeko. Uneko denbora audioaren luzerarekin zatituta 0 eta 1 arteko balioa ematen digu. Hemen erabili dugun kodearen sinplifikazioa:

// Eszena berria kargatzean
document.documentElement.style.setProperty('--tape-width', '0');

// Audioa martxan jartzen denean
requestAnimationFrame(animationCallback);

function animationCallback() {
    const time = audio.currentTime;
    document.documentElement.style.setProperty(
        '--tape-width', 
        (time / audio.duration).toString()
    );

    // Berriro deitu martxan jarraitzen badu.
    if(audioStatus == 'playing') {
        requestAnimationFrame(animationCallback);
    }
}

Kasetearen bobina bakoitza PNG irudi bat da eta zintaren efektua egiteko CSS outline atributua erabili dugu. outline balioa ezartzeko calc funtzioa erabili dugu, non --tape-width erabiltzen dugun, formula sinple batekin, behar ditugun zabalera balioak lortzeko.

.cassette-L {
    outline: calc(15vw - 14vw * var(--tape-width)) solid black;
}

.cassette-R {
    outline: calc(1vw + 14vw * var(--tape-width)) solid black;
}

Modu antzekoan egin dugu baita ere rewind efektua, baina JS aldean kalkulu gehiago behar ditu.

Efektuaren emaitza gozagarria da, klik eta rewind soinu efektuek borobiltzen dutena.

Hori bai, beranduegi izan arte pasa zitzaigun detaile batek arazotxoak sortu dizkigu. requestAnimationFrame sabelkoia da baliabide kontuetan eta egiten ari ginen jokaldiak karga handia eragiten du prozesadore eta memorian (eta ondorioz baterian). Eta hau mugikorretan erabiltzeko pentsatua dago!

Gailu gehienetan arazo berezirik gabe erabili daiteke, bateriaren hustutzea nabaritu daiteke agian. Baina marka bateko gailuek arazo nabarmenak zituzten, iOS plataforma erabiltzen duten mugikorrek zehazki. Dirudienez lan-karga handiegia da eta sistemaren egonkortasuna bermatze aldera nabigatzailearen fitxa berrabiarazten du. Efektua kendu dugu iPhone-en kasuan…

Kontua da, eta egia esan, audio martxan dela zintaren handitze zein txikitzea ez direla guztiz perfektu ikusten, saltotxoka egiten du. Hasieran CSS animazio hutsak erabilita guztiz fluidoa zen efektua, baina ondoren ez dugu lortu. requestAnimationFrame zen fluidotasun hau lortzeko aukera bakarra, baina seguruna CSS calc barruan sortuko diren zenbakiak ez dute behar dugun erresoluzioa (ez dugu aztertu).

Gauzak horrela, seguruna requestAnimationFrame erabili ordez setInterval erabiliko dugula hurrengo eguneraketan. Orain dagoen bezala, play efektua 250-500 milisegunduro eguneratzea nahikoa izan daiteke.

Hausnarketa guztiak eginda eta hobekuntza posibleak aurkitu ondoren, jokoa gozatzera animatzen dugu pertsona oro. Izan ere, adinez nagusi izatea hobea izan badaiteke istorioan murgiltzeko, mugarik ez duen jokoa dela esan genezake. Interneta, entzungailuak eta mugitu ahal izatea dira behar diren gauza bakarrak. Erabakiek eramango dute jokalaria erabakitzen duen tokira.

Aspalditik sortu zitzaigun soinuarekin eta teknologiarekin zerbait egiteko gogoa. Orain, esperientzia hau izan dugula eta jaso duen harrera ikusita, argi dugu ez garela hemen geldituko. Hitzaurrea, hitzaurrearen hitzaurre besterik ez da izango.