Scratch

Igra, narejena v programu Scratch. Naredili bomo eno najbolj osnovnih iger, katera ima zelo veliko različic, katere najdemo tudi na spletu. To je igra pong!!!!! Pri tej nalogi imamo dva najbolj osnovna konstrukta: lopar in žogico. 

Lopar smo ustvarili sami, žogo pa poiskali pri že ustvarjenih modelih.

Žogica se odbija od treh sten, če pa pride v stik s četrto (spodnjo), pa je igre konec. Lopar lahko definiramo tako, da se premika s pomočjo premikanja miške ali s pritiskom tipk na tipkovnici. Mi bomo izbrali prvega. 

No, pa kar ustvarimo lopar. Lopar je vodoravni pravokotnik, od katerega se žogica odbija. Vedno se premika le vodoravno, zato bomo uporabili le x koordinato miške. Pri tej igri bomo uporabili še spremenljivke “cas”, ki nam bo meril sekunde. Spremenljivka “stevilo dotikov” pa bo merila, kolikokrat se je žogica odbila od loparja. Oboje ob začetku igre nastavimo na 0. 

Tako izgleda koda za lopar v angleščini.

Težje bo ustvariti žogico. Najprej moramo definirati, kje bo žoga začela. Seveda bi bilo malo čudno, če bi žoga začela pod loparjem, zato ji je treba določiti y koordinato na približno 157. Razmislimo, kdaj se bo igra zaustavila: takrat, ko bo žoga pod loparjem. To naredimo tako, da spodnji rob pobarvamo z bravo. Takrat, ko se bo žoga dotaknila te barve, se bo igra zaključila. Definirati moramo tudi premikanje žogice. Damo funkcijo odbij se, če si na robu, da žogica ne izgine iz polja. Mora pa se tudi premikati. Lahko se premika s konstantno hitrostjo npr. 3 korake. Da pa bo igra zanimiva, definiramo spremenljivko “tezavnost”. Ta se povečuje glede na čas. Kaj pa, ko se žogica dotakne loparja? Ne sme kar nadaljevati poti. Mora se odbiti. Dodamo funkcijo “za vedno če” in dodamo “se dotika lopar”. V zanki dodamo lahko tudi predvajanje zvoka. Žogica se obrne za 180˚. To dosežemo s funkcijo “obrni se za” in dodamo “180-smer”. Nato naj se premakne za nekaj korakov in se obrne še naključno od -20 do 20. Tako bo igra težja in zato bolj zanimiva. 

Tako pa izgleda koda za žogico.

Seveda pa se iz te kode da marsikaj spremeniti, nadgraditi ali dodati. To je le model, kaj lahko učenci v osmem ali devetem razredu naredijo v eni učni uri. Seveda tako najlažje motiviramo otroke: da sestavijo lastno igro in jo lahko tudi sprobajo. Nato se lahko učenec sam doma ali v šoli “igra” s kodo in jo spremnja.

Naslov igre: http://scratch.mit.edu/projects/10742751/

Ustvarili smo igro, katera velja za eno izmed prvih in najbolj osnovnih. Ta igra vsebuje nekaj if stavkov in nekaj lastnosti, katere moramo definirati vsakemu objektu posebej. Tako učenec dobi jasen pogled, kako so igre sploh sestavljene in kako delujejo. Obenem pa se uči osnov programiranja, predvsem objektno orientiranega. Če bi se učenci učili v šoli scratch, bi tako igro uporabil na koncu obravnave scratcha, saj vključuje spremenljivke, zanke, spremenljivke,pogojni stavek... To mora učenec združiti v celoto, za to pa je potrebno neko znanje programa scratch.   

Zvok in zajem zaslona

Gotta catch them all, pokemon!
Če ste ljubitelji starih iger, ste zagotovo že slišali za igro pokemon (blue, ed emerald, black, gold...), katera je bila ustvarjena za gameboy. Seveda se lahko igra tudi na osebnem računalniku. To je igra, katera zavrača teorijo, da je uspešnost igre odvisna od ločljivosti.
Seveda zvoka pri tej igri se tudi ne da primerjati z zvokom pri modernejših igrah. Iz teh melodij sem naredil krajšo "pokemon song". Najprej sem v google translate vpisal besedilo in ga predvajal, s programom Audacity pa sem snemal.

Nato sem obrezal posnetek na začetku in na koncu. Kot vidite na sliki, je zelo dolg se začne kar pozno. To sem popravil s funkcijo "Izreži". 

Nato sem dodal še zvok, ki sem ga dobil iz youtube-a (http://www.youtube.com/watch?v=bbpvcU0eMYE). 

Izbrisal sem dele, ki mi niso bili všeč, nekatere pa sem spremenil/dodal.

Dodal sem tudi kratke izrezke v "zgornji" zvočni posnetek.

Če primerjate zgornjo sliko ter sliko pred njo, lahko opazite, da sem dodal del melodije. To sem naredil tako, da sem kopiral in prilepil izbran del melodije. Melodijo sem združil s sliko v programu windows live movie maker. Končni izdelek pa izgleda takole:

Tak način obravnave zvoka in zvočnega zapisa se mi zdi zanimiv za učence, saj se skozi primer veliko naučijo. Vidijo tudi, kako je zvok v računalniku zapisan in ga sami spreminjajo/obdelujejo/rešejo in dodajajo. Moj zvočni posnetek bi pokazal kot primer, kaj se da v kratkem času narediti v nekem programu z zvočno datoteko. Seveda bi bilo uporabno, da bi to znali tudi učenci.

Sedaj pa še zajem zaslona. To je najlažji način, da pokažeš na računalniku nekaj, kar ti gre dobro od rok. In kaj gre učencem boljše od rok, kot igranje igric? Učence bi lahko spodbudil k učenju tako, da bi jim dal nalogo, da sami ustvarijo "tutorial" svoje najljubše igre. Za višjo oceno bi lahko dodali, da učenci morajo še govoriti o tem kaj delajo (se posneti). 

Nastali bi tako videi, kot je ta:

Tako bi se učenci na zabaven način srečali z zajemom zaslona. Spoznali bi nove teme in med tem kazali, kaj znajo na računalniku najbolje. 

To sem naredil s programom Screenpresso. Ta program je zelo enostaven za uporabo. Ko se odpre program imamo na izbiro snemanje ali slikanje zaslona. Mi smo seveda izbrali snemanje. Nato se pojavi okno:

Pritisneš "print screen" ali "Prt Sc" za začetek in za konec snemanja. Žal pa ta program ne omogoča snemanja zvoka (jaz nisem zasledil).

Po koncu snemanja se pokaže okno z datotekami: zgodovina Screenpresso z vsemi slikami in videi. 

Datoteko samo shranimo in že imamo sliko ali v našem primeru video.

Video in ...tube

Naj vam povem, da obstaja igrica, ki je ena najpreprostejših, hkrati pa ena najbolj zakompliciranih igric. Izšla je leta 2011, igra pa je v manj kot enem letu obnorela svet.

Seveda, prav ste uganili. To je MINECRAFT!

Na spletu sem našel kar nekaj videov, ki pričajo o tem, da je minecraft lahko zelo uporaben v šolah za izobraževanje ter da veliko šol to že prakticira. Iz dveh najbolj zanimivih videov sem sestavil novega ter mu dodal še nekaj slik, besedila in zvoka. Pa si kar poglejmo potek izdelave.

Video sem naredil v programu windows live movie maker. Dodal sem prvi video (http://www.youtube.com/watch?v=RI0BN5AWOe8) in ga razdelil na več delov. Odstranil sem tudi neprimerne dele ter začetek in konec, katera imata drugo vsebino. 

Uporabil sem funkcije split, set start point in set end point in razdelil video na več krajših videov. Sedaj lahko  tem manjšim videom zamenjam vrstni red, jih zbrišam ali določim katere druge lastnosti, npr. hitrost predvajanja.

Ker se bo moj video končal z vprašanjem, sem dodal še "naslov" na koncu s funkcijo add title. Dodal sem naslov ??? in ga obarval belo. Povečal sem tudi pisavo.

Vstavil sem še drugi video in iz tega videa odrezal uporabne dele. Ta video sem našel na youtube-u (http://www.youtube.com/watch?v=ZO_cs1DrbhA). 

Dodal sem še eno sliko: šolo, zgrajeno v minecraftu. 

Pri sliki sem dodal še besedilo in zvok.

Zvok sem dodal z add music funkcijo. Zvok sem skrajšal in določil "fade out". Ne vem, kako se to prevede, je pa zvok protikoncu vedno bolj tišji.

Tako sem ustvaril video. Upam, da bo prepričal katerega učitelja, da bo začel poučevati s pomočjo minecraft-a, mogoče celo na naši fakulteti. 

Film si lahko ogledate tukaj:

Ali pa ga odprete na povezavi in ga gledate preko youtube-a: http://www.youtube.com/watch?v=LoRUEJiAhHM

Video bi bil lahko zelo uporaben v šolstvu. Učenci bi polek teme, katero predstavljajo, naredili še video, kateri se nanaša na vsebino predstavitve. Vsi otroci so že siti plakatov, do konca osnovne šole naredijo najmanj 5 seminarskih nalog, videa pa nobenega. Trud pa je primerljiv, saj je ta program enostaven za uporabo. Če bi otroci delali izobraževalne videe, bi bilo tudi več gradiva na spletu. Prav tako je video zabaven. Vključuje sliko in zvok, je tudi bolj zanimiv za predstavitev, saj lahko video sestavimo iz drugih slik, videov ali besedila. Tako bi že otroci sami izdelali gradivo, ki bi vključevalo večpredstavnost.

Spletna stran

Pa poglejmo kako sem naredil spletno stran.
Povezava na spletno stran: http://breza.pef.uni-lj.si/~nikh/spl_stran/index.html.

It's not much, but

Poglejmo kodo spletne strani, katero sem posal v Notepad++ (obarva kodo):

Začnemo s <html> in dodamo dodatek za šumnike <meta http-equiv="content-type" content="text/html;charset=utf-8" />. Mislim, da bi šumniki tako delali vsaj na google chrome. Nato napišemo "glavo" <head> in v njej stile <style>. Definiramo stile za tabele, naslove, besedila, slike in linke. Na sliki lahko vidite deklaracijo le teh:

Pri stilu body označujemo barvo odzadja, dodal pa sem še sliko levo zgoraj.

Pisavi h1 in h2 sta za naslov. Definiramo jima barvo (#FFFFFF je bela), velikost (font-size) in pisao (font-style). Enako je pri stilih h2 in p. Stil center je za okvir za naslov. Stil table pa je za tabelo, s katero sem si pomagal narediti izbirni meni. Barve za odzadja, okvirje itd. sem izbral tako, da sem na internetu poiskal program, ki barvo spremeni v kodo, kateri pa izgleda takole:

Izdelal sem še stile za tekst in izbirni meni:

Stil tekst je definiran za spodnji okvir. Stil linka pa je tak, da če čez link pelje miška, se obarva pisava in izgleda takole:

Sedaj pa od stilov k vsebini. Označimo ga kot "telo" <body>. Dodamo naslove, besedila, tabelo ter linke. Koda izgleda takole:

Primer kode za dodajanje slike, ali v mojem primeru animacije: <img src="1.gif" hspace="500" vspace="50" width=16%>.

Šele tako dobi spletna stran svoj izgled. Pri različnih sklopih sem dodal še drugačna besedila. Pod sklop računalniške igre pa sem dodal še video in spletna stran izgleda tako:

Koda pa izgleda takole:

In to je moja spletna stran.

Menim pa, da izdelava spletne strani ni primerna za osnovno šolo. Vsaj ne na tak način (s html). Koda spletne strani ni primerna (je preveč besedila za minimalen rezultat) in na prvi pogled ni logična, tako kot pri programu scratch. Osnovnošolske učence bi morali učiti dalj časa uporabljati tako kodo tako, da bodo sami znali to znanje uporabiti. Osnovnošolski otroci bi morali poslušati le o varnosti na spletu. Ta snov je bolj primerna za srednjo šolo, ko učenci že bolje poznajo angleške pojme in se lažje znajdejo v kodi. Morali bi imeti tudi dosti izkušenj s programiranjem. 

Animacija in miselni vzorec

Kot ste že z naslova lahko razbrali, bom pokazal, kako se izdela animacija oz. miselni vzorec. Izdelal jih bom seveda na temo računalniških iger.
Pa si kar poglejmo, kako sem naredil animacijo, ki na koncu izgleda takole:

Izbral sem igrico, za katero mislim, da jo vsi že zelo dobro poznate. To je italijanski vodovodar Mario. Mario je nastal na Japonskem, pri podjetju Nintendo in je do zdaj nastopal v več kot 200 igrah. 

Zgodba igre: Mario prebiva v gobovem kraljestvu in večkrat reši princeso breskvico, katero ugrabi zlobni želvak Bowser. Mario ima tudi druge nasprotnike, kot so Donkey Kong in Wario.

Sedaj, ko poznamo igrico, lahko naredimo animacijo. Najprej potrebujemo odzadje, po katerem se bo mario premikal. Na spletu sem poiskal sliko, ki izgleda takole

in jo prilepil v program GIMP. Ampak to ni dovolj, seveda mora v animaciji nastopati še Mario. Ker nisem na spletu našel ustrezne slike, sem sam s printscreen ustvaril slike, ko sem igral igrico. Slike sem v GIMP-u obrezal, tako da sem dobil le moj sprite. Seveda sem to naredil za Mariota, ki stoji, teče, počepne in skače. 

In tako izgleda moj sprite, ki skače:

Sedaj, ko imamo vse sprite pripravljene za animacijo, moramo ustvariti toliko slik, da bo animacija videti čim bolj "takoča." Kopiramo odzadje tolikokrat, kolikor slik bomo imeli. 

Na desni lahko opazimo, da imamo veliko plasti. Na vsako plast dodamo Mariota tako, da ne bo preveč oddaljen od Mariota na prejšnji plasti. Mario hodi tako, da se izmenjujeta sprita, ko stoji in ko hodi. Tako dobimo občutek, da se naš objekt premika. Da pa vemo, za koliko se premakne, pa uporabimo trik. Zadnjo plast, na katero smo prilepili sprite označimo kot vidno (ikona očesa), naslednjo plast pa označimo in prilepimo nov sprite. Nato ga povlečemo v neposredno bližino sprita iz prejšnje plasti, kot kaže slika:

Seveda lahko dodamo še en premikajoč se objekt, kot je npr. Gumba na zgornji sliki. Morate pa biti previdni pri shranjevanju, saj lahko pri izvizu animacije program zablokira in izgubite pol dela. Seveda pa to še ni vse, kar lahko naredite z animacijo. Sliki lahko določite čas trajanja, kot sem jaz naredil pri Pasted Layer #14. To je plast, na kateri Mario čepi oz. se odrine.

Plasti le še izvozimo kot .gif animacijo in že imamo sliko, katero lahko uporabimo v šolstvu. Lahko bi tako animacijo uporabili pri učenju objektnega programiranja, ter ugotavljanju, kako je igra sploh sestavljena. Na taki animaciji lahko pokažemo, kako se položaj sprite-a spreminja, kako se spreminja njegov videz/postavitev. Lahko bi preko te animacije spoznali if stavek (če se sprite dotakne tal, se spremeni njegov videz oz. če ukažemo sprite-u naj skoči, bo spremenil videz). Lahko pa bi uporabili tako animacijo za poučevanje matematike ali fizike (sprite lahko skoči v kvadratni funkciji). Zanimiv primer uporabe animacije v šolstvu pa je, kako deluje pi:

Za miselni vzorec si pa nisem izbral samo ene igrice, ampak cel sklop. Izbral sem si strateške zgodovinske igre. Ker najdemo zelo veliko iger na to temo, sem se odločil, da bom izbral le nekaj teh iger, ki so mogoče bolj primerne za otroke oz. izobraževanje. Igre sem razdelil glede na čas, v katerem se odvijajo. Razdelil sem jih v 5 obdobij ali sklopov:

• prve visoke civilizacije,
• antika,
• srednji vek in obdobje do 1. sv. vojne,
• osvajanje Amerike,
• Od 1. sv. vojne do danes.

Ločil sem jih po obdobjih in kraju dogajanja, saj se mi to zdi bolj smiselno. Za izdelavo sem uporabil zastonjski program, ki ga najdemo na spletu. Tj. Gliffy. Preizkusil sem kar nekaj programov, ampak se mi je ta zdel najbolj uporaben in zanimiv. Pri večini ostalih sem opazil kar nekaj pomankljivosti npr. ni mogoče dodajanje slik, ni mogoče zamenjati vrstnega reda naslovov ipd. Gliffy omogoča svobodno ustvarjanje, hkrati pa ponuja različne že pripravljene modele za uporabo. Pa si poglejmo, kako sem naredil svoj miselni vzorec:

 Izbral sem okvir za naslov. Nato sem določil še barvo okvirja in naslova:

Dodal sem "mehurčke" in v njih napisal podkategorijo. Naslove in besedila se da tudi obračati.

Možnost imamo izbrati funkcijo "on top", katera izbran okvir postavi tako, da ga vidimo, kot bi bil najvišje. Ta funkcija je uporabna, saj miselni vzorec, kot ga vidite na naslednji sliki ni najbolj primeren.

 Dodamo še naslove igric in jih dodelimo nekemu "mehurčku". Naslove kasneje še uredimo, zasučemo, pomanjšamo ali povečamo za lepši videz.

Gliffy omogoča tudi dodajanje slik. Tako si učenci lažje predstavljajo zgodovinska obdobja in civilizacije.

Slike lahko dodamo kar direktno iz spleta, kot je videti na prejšnji sliki. Tako. Pa že imamo miselni vzorec, katerega lahko pkažemo svojim učencem:

Tak miselni vzorec lahko uporabimo, da učencem pokažemo s katerimi igricami se lahko naučijo o katerem zgodovinskem obdobju.

Učenci se lahko veliko naučijo z igranjem teh iger. Spoznavajo razne kulture in civilizacije. Naučijo se o navadah, dogodkih in veri. Spoznajo načine transporta in trgovanja, kako je včasih delovala ekonomija, njihov politični sistem in razvoj. S takim miselnim vzorcem pa povežejo igre z zgodovino in se le te na zabaven način tudi učijo.