Uniwersytet Łódzki dla dzieci

Transkrypt

Uniwersytet Łódzki dla dzieci
27.02.2011
Jak jeździć autkiem po zielonej łące, czyli tworzymy grę komputerową
http://cni.wfis.uni.lodz.pl
Plan zajęć
1.
2.
3.
4.
5.
6.
7.
8.
Czym jest gra?
Rodzaje gier
Gry kiedyś i dzisiaj
Trochę o grafice komputerowej (jakie są rodzaje)
Animacja
„Dzień dobry. Nazywam się Flash”
Szybki kurs programowania
Tworzymy grę
Czym jest gra?
•
•
•
•
•
•
•
Czynność
Forma rozgrywki
Zbiór zasad
Konkurencja (rywalizacja)
Dążenie do zwycięstwa
Bywają gry edukacyjne
Pamiętajcie: Gry nie tylko to gry komuterowe!!
Rodzaje gier
1. Gry fizyczne (sport)
• Piłka norzna
• Siatkówka
• Wiele innych
2. Gry umysłowe
• Szachy
• Warcaby
• Państwa miasta
3. Gry podwórkowe
• Kapsle
• W chowanego
• Berek
4. Gry planszowe
• Chińczyk
• Eurobiznes/Monopol
5. Gry karciane
• Makao
• Wojna
Rodzaje gier
Gry komputerowe
• Platformowe
• Zręcznościowe
• Przygodowe
• Akcji
• Sportowe
• Fabularne (RPG)
• Strategiczne
• Symulacyjne
• Edukacyjne
Gry kiedyś i dzisiaj
• Pierwsza gra powstała 1947r.
• Pierwsza gra konsolowa PONG (1972r.)
dostępna dla ludzi
• Z czasem powstały komputery specjalnie do gier komputerowyc
• Konsole do gier
• Nintendo
• PlayStation
• X-BOX
Trochę o grafice komputerowej
Klasyfikacja grafiki komputerowej według
1. Techniki tworzenia
• Grafika wektorowa
• Grafika rastrowa
2. Charakter danych
• 2D
• 3D
Animacja
Rodzaje animacji:
• Rysunkowa
• Lalkowa
• Plastelinowa
• Animacja komputerowa.
Rodzaje animacji?
• Animacje 2D
– Gotowe ilustracje (sprite)
– Wirtualny szkielet
• Animacje 3D
– W zasadzie tylko i wyłącznie używa się modelu „wirtualnego szkieletu”
Animacja
1. FPS
– Co to jest?
– Ile powinno wynosić?
Minimum 12, zalecane 15. W grach zalecane nie mniej jak 20 FPS
2. W czym się tworzy animacje 2D
– Adobe® Photoshop
– GIMP
– Inkscape
– Adobe® Flash
– Notatnik (czyli javascript oraz SVG)
3. A co z grafiką 3D
– Najpierw uczymy się 2D !
– Dla ciekawych: openGL, directX, 3ds Studio (wcześniej 3D Max Studio), Autodesk
Softimage, Cinema 4D, LightWave 3D, Maya, Rhinoceros 3D, Blender
Animacja
GIF – najprostsza i najstarsza forma animacji 2D
Jakieś wnioski?
• Bardzo prosty efekt
• Płynność niestety tylko wystarczająca
• Brak możliwości zatrzymania
Czy ktoś to jeszcze używa?
• Głównie na stronach WWW – coraz rzadziej w formie animacji
• Ikonki w niektórych programach
• Częściej stosowana jest jego „konkurencja” - PNG
„Dzień dobry. Nazywam się Flash”
•
•
•
•
•
•
Grafika wektorowa
Animacje tworzone na zasadzie klatek kluczowych
Program komercyjny (czyli niestety płatny)
Istnieją darmowe odpowiedniki
Daje możliwość programowani
Wykorzystywany przy tworzeniu: gier internetowych, banerów reklamowych, niekiedy całych stron
internetowych, częściej pojedyncze elementy strony
Szybki kurs programowania
Wszystko jest zmienne
• Co to jest zmienna?
• Co może przechowywać?
• Jak ją tworzyć?
Podstawy logiki
• „NIE pada deszcz”
• „pada deszcz I świeci słońce”
• „pada deszcz LUB świeci słońce”
• „pada deszcz I NIE świeci słońce”
• „pada deszcz LUB NIE świeci słońce”
Operacje matematyczne
• Reszta z dzielenia
• Układ współżędnych
• ++
• +=
• -=
Tworzymy grę
Kilka słów wstępu
• Tworzymy platformową grę 2D
• Poruszamy się autkiem tylko do przodu
• Autko może podskakiwać
• Losowo zostaje stworzony obiekt – przeszkoda
• W lewym górny narożniku wyświetlana jest ilość kolizji autka z przeszkodami
Tworzymy grę
No to do roboty
1. Z prawej strony wybieramy narzędzie Linia
– Rysujemy linię poziomą
– Przekształcamy na klip filmowy
– Ustawiamy jej Y=330
– Nazywamy „ziemia”
2. Wybieramy narzędzie owal
– Nad ziemią tworzymy koło (z klawisze shift tworzy się ładne koło – nie jajo)
– Przekształcamy na klip filmowy
– Nazywamy „kolo”
3. Przechodzimy do zakładki kodu źródłowego
Tworzymy grę
Kodujemy
import flash.events.Event;
import flash.ui.Keyboard;
import flash.events.KeyboardEvent;
var skok = false;
var spadek = true;
var spadanieTempo = 5;
var skakanieTempo = -5;
ziemia.y = 330;
this.addEventListener(Event.ENTER_FRAME, enterFrame, false, 0, true);
stage.addEventListener(KeyboardEvent.KEY_DOWN, key_down);
function key_down(event:KeyboardEvent):void{
if (event.keyCode ==Keyboard.SPACE){
skok=true;
}
}
function enterFrame(event:Event) :void
{
if (skok){
kolo.y += skakanieTempo;
if (kolo.y <= 200){
skok=false;
spadek=true;
}
}
if (spadek){
kolo.y += spadanieTempo;
}
if((ziemia.hitTestObject(kolo))){
spadek=false;
}
}
Tworzymy grę
Kodujemy - timer
import flash.utils.Timer;
import flash.events.TimerEvent;
//--------------------------------------------------var czasomierz:Timer = new Timer(2000);
czasomierz.start();
//--------------------------------------------------czasomierz.addEventListener(TimerEvent.TIMER,timer);
//--------------------------------------------------function timer(event:TimerEvent):void{
skok=true;
}
Tworzymy grę
Kodujemy - timer
Mała zmiana timera ;)
//------------------------------------------------var tworz=false;
var stworzony = false;
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0x000000);
mc.graphics.drawRect(0,0,30,30);
mc.graphics.endFill();
//------------------------------------------------function timer(event:TimerEvent):void{
if (Math.random()%6==0 || !stworzony){
tworz=true;
}
}
{
/* ZOSTAWIAMY BEZ ZMIAN DO
spadek=false;
} */
if(tworz){
stworzony=true;
mc.x=485;
mc.y=300;
stage.addChild(mc);
tworz=false;
}
if (stworzony){
mc.x -= 5;
if (mc.x<0){
stworzony=false;
}
}
}
Tworzymy grę
Licznik kolizji
Tworzmy dwa pola tekstowe w jednym wisujemy „kolizje” drugie zmieniamy na klip
filmowy i nazywamy „txt_kolizje” i zostawiamy puste
//------------------------------------------------var kolizje=0;
var koliza_trwa=false;
//------------------------------------------------// Na koniec function enterFrame(event:Event) :void zmieniamy
if (stworzony){
mc.x -= 5;
if (mc.x<0){
stworzony=false;
}
if (kolo.hitTestObject(mc)||!kolizja_trwa){
kolizje++;
txt_kolizje.text = kolizje;
kolizja_trwa=true;
}
else{
kolizja_trwa = false;
}
}
import
import
import
import
import
import
var
var
var
var
var
var
var
var
var
flash.events.Event;
flash.ui.Keyboard;
flash.events.KeyboardEvent;
flash.utils.Timer;
flash.events.TimerEvent;
flash.display.MovieClip;
spadek=true;
}
}
if (spadek){
kolo.y += spadanieTempo;
}
spadek=false;
}
skok = false;
spadek = true;
spadanieTempo = 5;
skakanieTempo = -5;
czasomierz:Timer = new Timer(2000);
tworz=false;
stworzony = false;
kolizje=0;
koliza_trwa=false;
if(tworz){
stworzony=true;
mc.x=485;
mc.y=300;
stage.addChild(mc);
tworz=false;
}
if (stworzony){
mc.x -= 5;
if (mc.x<0){
stworzony=false;
}
if (kolo.hitTestObject(mc)||!kolizja_trwa){
kolizje++;
txt_kolizje.text = kolizje;
kolizja_trwa=true;
}
else{
kolizja_trwa = false;
}
}
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0x000000);
mc.graphics.drawRect(0,0,30,30);
mc.graphics.endFill();
czasomierz.start();
ziemia.y = 330;
this.addEventListener(Event.ENTER_FRAME, enterFrame, false, 0, true);
stage.addEventListener(KeyboardEvent.KEY_DOWN, key_down);
czasomierz.addEventListener(TimerEvent.TIMER,timer);
function key_down(event:KeyboardEvent):void{
if (event.keyCode ==Keyboard.SPACE){
skok=true;
}
}
function timer(event:TimerEvent):void{
if (Math.random()%6==0 || !stworzony)
{
tworz=true;
}
}
{
if (skok){
kolo.y += skakanieTempo;
if (kolo.y <= 200){
skok=false;
}
Zakończenie
Pytania?
Dziękujmy
Za uwagę !
http://cni.wfis.uni.lodz.pl/

Uniwersytet Łódzki dla dzieci

Transkrypt

Podobne dokumenty

ZAPISY NA ZAJĘCIA WYCHOWANIA FIZYCZNEGO 2014-2015

Współpraca regionalna w ramach Unii Europejskiej Z punktu

KARTA EWALUACYJNA PRZEDMIOTU, Eklektyzm, historia sztuki, r