https://peda.net/id/ba095d3c0bf 2026-02-17T14:46:49+02:00 https://peda.net/:static/539/peda.net.logo.bg.svg <div class="license">Tämän sivun lisenssi <a rel="license" href="https://peda.net/info">Peda.net-yleislisenssi</a></div> https://peda.net/id/2ffc263a0c0 2026-02-17T15:05:21+02:00 Vaihdamme lähestymistapaa:<br/> <br/> <h2><!--filtered attribute: data-start="255"--><!--filtered attribute: data-end="291"-->Miten sprite-animaatio toimii?</h2> <ul><!--filtered attribute: data-start="293"--><!--filtered attribute: data-end="491"--> <li><!--filtered attribute: data-start="293"--><!--filtered attribute: data-end="385"--> <p><!--filtered attribute: data-start="295"--><!--filtered attribute: data-end="385"-->Meillä on <strong><!--filtered attribute: data-start="305"--><!--filtered attribute: data-end="322"-->yksi PNG-kuva</strong>, jossa on useita animaation ruutuja vierekkäin (sprite sheet).</p> </li> <li><!--filtered attribute: data-start="386"--><!--filtered attribute: data-end="431"--> <p><!--filtered attribute: data-start="388"--><!--filtered attribute: data-end="431"-->Näytämme siitä vain pienen osan kerrallaan.<br/> <br/> <br/> <br/> </p> </li> </ul> Netistä löytyy valmiita sprite sheet -kirjastoja esimerkiksi sivulta:<br/> <a href="https://moosadee.itch.io/rachels-cc0-assets?utm_source=chatgpt.com" rel="nofollow ugc noopener">Rachel's CC0 Assets (Tiles, sprites, items, UI, fonts) by Moosadee</a><br/> <br/> <br/> Ohessa mallisivu sekä sprite-kuvasarja. Lataa ne koneellesi ja tutki, miten ohjelma toimii.<br/> <a href="https://peda.net/orivesi/perusopetus/yhteiskoulu/oppiaineet/tietoteknikka/tvt-ja-ohjelmointikurssi-25-26/18.-helmikuuta-2026/sprite-sheet-pelianimaatioissa/canvas.html#top" class="service">Canvas.html</a><br/> <a href="https://peda.net/orivesi/perusopetus/yhteiskoulu/oppiaineet/tietoteknikka/tvt-ja-ohjelmointikurssi-25-26/18.-helmikuuta-2026/sprite-sheet-pelianimaatioissa/spinjump.png#top" class="service">spinjump.png</a><br/> <br/> Jatka sitten kyseisen ohjelman kehittelyä tekoälyn avulla esimerkiksi seuraavasti:<br/> <ul> <li><!--filtered attribute: data-start="2323"--><!--filtered attribute: data-end="2366"--> <p><!--filtered attribute: data-start="2325"--><!--filtered attribute: data-end="2366"-->Hahmo liikkuu <strong><!--filtered attribute: data-start="2339"--><!--filtered attribute: data-end="2366"-->näppäimillä vasen/oikea</strong></p> </li> <li><!--filtered attribute: data-start="2367"--><!--filtered attribute: data-end="2393"--> <p><!--filtered attribute: data-start="2369"--><!--filtered attribute: data-end="2393"-->Tausta on erillinen kuva</p> </li> <li><!--filtered attribute: data-start="2394"--><!--filtered attribute: data-end="2453"--> <p><!--filtered attribute: data-start="2396"--><!--filtered attribute: data-end="2453"-->Hahmo voi hyppiä ja animaatio vaihtuu liiketilan mukaan</p> </li> </ul> Tämän jälkeen voit jatkaa vapaamuotoisesti tämän tai oman pelisi kehittelyä. Pidä teemana kuvakirjaston hyödyntämistä eli 1) hahmoja, jotka liikkuvat pelissä ja 2) taustakuvia, jonka päällä hahmot liikkuvat. 2026-02-17T15:04:26+02:00