×
image for ux jobs category in dev.bg

Преглед на урок

Ролева платформена игра - Първа част

Ролева платформена игра - Първа част




Създаване на Ролева игра базирана на платформи

трудност на урока 4/5

!! ВНИМАНИЕ !! Този урок НЕ е за начинаещи, прилагам скрийнове само на най-необходимото. Предполага се, че сте креативни и ще измислите сами останалата графична част.

Платформените игри са изключително популярна форма на online забавление. Този урок ще ви помогне да създадете своя собствена такава правейки я по най-лесния възможен начин.

- работния файл от урока

Получения резултат
*CTRL - атакува
*ARROWS - движение
*SPACE - стрелба (ако има оръжие)

@@ Това е най-простия възможен графичен вид на играта. Вие може да и придадете по-естетическа завършеност. Ще се радвам, който изпълни урока да покаже резултата @@

Началото

Ще започнем като нарисуваме два обекта на главната сцена превръщайки ги в MovieClip (F8 )

Първият MC ще е вашият герой. За момента ще го нарисуваме като кръг, след което го маркираме и натискаме (F8 ). Следва двоен клик върху новосъздадения клип за да го редактираме. Позиционираме кръга CTRL+K (horizontally centered & bottom edge). Време е да се върнем на основната сцена и да му зададен Instant Namechar”.

Следващият клип ще е вашата земя или т.нар. повърхност, по която ще се движи героя. Направете я широка колкото цялата ви сцена, че дори и повече и висока около 20 px за да може героя да пада на нея, след като добавим AS за скачането. Сложете и Instant Nameground”.

Основните движения

За първата част от нашият AS ще се нуждаем от хоризонтално двупосочно движение на героя. В следващият код има и добавен модул за триене, за да се придаде по-реалистично движение.





Добавете този AS на първия кадър на някой нов слой:


Код
onClipEvent (load) {

speed = 0;

maxmove = 15;

}

onClipEvent (enterFrame) {

if (_root.dead) {

this.gotoAndStop("dead");

} else {

speed *= .85;

if (speed>0) {

dir = "right";

} else if (speed<0) {

dir = "left";

}

if (dir == "right"){

this._x += speed;

_root._x -= speed;

}

if (dir == "left") {

this._x += speed;

_root._x -= speed;

}

if (Key.isDown(Key.LEFT)) {

if (speed>-maxmove) {

speed--;

}

this.gotoAndStop("run");

this._xscale = -100;

} else if (Key.isDown(Key.RIGHT)) {

if (speed<maxmove) {

speed++;

}

this._xscale = 100;

this.gotoAndStop("run");

}

if (speed<1 && speed>-1 && !attacking) {

speed = 0;

this.gotoAndStop("idle");

}

}

}


За момента той включва и различните състояния на героя, които още не сме създали!



Гравитация и Скачане

Следващата важна стъпка е скачането на героя. Този код ще ви го зададе:

Добавете кода на същият кадър, непосредствено след предния.

Последните 3 реда на предния код се препокриват с долния, така че нека ги слеем!


Код
if (speed<1 && speed>-1 && !attacking) {

speed = 0;

this.gotoAndStop("idle");

}

if (Key.isDown(Key.UP) && !jumping) {

jumping = true;

}

if (jumping) {

this.gotoAndStop("jump");

this._y -= jump;

jump -= .5;

if (jump<0) {

falling = true;

}

if (jump<-15) {

jump = -15;

}

}


Горният код симулира скачане, подобно на долното изображение:



Редно е да зададете променливи за скачането и падането при зареждания на самит клип, така че заместете с долните редове в самото начало на скрипта, над който работим:


Код
onClipEvent (load) {

jumping = true;

jump = 0;

speed = 0;

maxmove = 15;

}


Въпреки, че вече зададохме скачането, ако тествате клипа си, ще видите, че човечето пропада през земята, затова ще му зададен да не го прави:

Както вече знаем – кодовете ще се препокриват, така че нека отидем на последния ред на нашия код и го допълним:


Код
if (jump<-15) {

jump = -15;

}

}

if (_root.ground.hitTest(this._x, this._y, true) && falling) {

jump = 12;

jumping = false;

falling = false;

}
- - - - -

За момента така трябва да изглежда целият ни код!



Код
onClipEvent (load) {

jumping = true;

speed = 0;

maxmove = 15;

jump = 0;

}

onClipEvent (enterFrame) {

if (_root.dead) {

this.gotoAndStop("dead");

} else {

speed *= .85;

if (dir == "right") {

if (speed>0) {

dir = "right";

} else if (speed<0) {

dir = "left";

}

if (dir == "right"){

this._x += speed;

_root._x -= speed;

}

if (dir == "left") {

this._x += speed;

_root._x -= speed;

}

if (Key.isDown(Key.LEFT)) {

if (speed>-maxmove) {

speed--;

}

this.gotoAndStop("run");

this._xscale = -100;

} else if (Key.isDown(Key.RIGHT)) {

if (speed<maxmove) {

speed++;

}

this._xscale = 100;

this.gotoAndStop("run");

} else if (speed<1 && speed>-1) {

speed = 0;

this.gotoAndStop("idle");

}

if (Key.isDown(Key.UP) && !jumping) {

jumping = true;

}

if (jumping) {

this.gotoAndStop("jump");

this._y -= jump;

jump -= .5;

if (jump<0) {

falling = true;

}

if (jump<-15) {

jump = -15;

}

}

if (_root.ground.hitTest(this._x, this._y, true) && falling) {

jump = 12;

jumping = false;

falling = false;

}

}

}


Ако тествате клипа си до момента CTRL+ENTER, ще забележите, че ходите без да пропадате.

Вмъкнете този код между 7 и 8 ред от нашият скрипт (редно е да работите както е указано в урока за да не стане разминаване с кодовете)



Код
onClipEvent (enterFrame) {

if (!_root.ground.hitTest(this._x, this._y, true) && !jumping) {

this._y += 6;

}

if (_root.dead) {

this.gotoAndStop("dead");

} else {

…



Сега започна да заприличва на игра. Време е за по-забавната част.

Анимирането

В следващите няколко реда, ще добавим малко движение на нашия герой. За момента ще добавим idle(в покой), run(тичайки) и jump(скачайки) кадри в клипа на героя ни.

!! ВАЖНО !! Може да кръстите кадрите си по ваше желание, стига после да нанесете необходимите корекции в кодовете!

Докато сме в char клипа добавяме три кадъра (F6 ) на времевата линия. В кадър 1 ще е героят ви в покой, така че на него поставете това изображение на вашия герой, което най-подхожда на състоянието му. Време е да зададем на кадъра стойност (Frame Label), която съответно трябва да е idle. В долния ляв ъгъл на екрана ви, в менюто Properties. Ако то не е появено използвайте бързата команда CTRL+F3 за да го извикате.

Повторене горното действие и с останалите два кадъра, като смените изображението и Frame Label-а съответно на run и jump.



Стените

Предполагам, ще се нуждаете и от стени (прегради). Най-лесният начин е да ги направим всяка в отделен MC. Затова създайте дясната стена и сложете Instant Nameleftblock” съответно на лявата ”rightblock”. Те са наименовани противоположно защото дефакто допирната точка на дясната стена с нашия герой се намира в ляво, а при лявата стена – дясно (удебелените линии са нашите реални стени):




За да процедираме нататък трябва да коригираме нашият код (търсете подобие в кода след 18 ред):


Код
if (dir == "right" && !_root.leftblock.hitTest(this._x+20, this._y, true)) {

this._x += speed;

_root._x -= speed;

}

if (dir == "left" && !_root.rightblock.hitTest(this._x-20, this._y, true)) {

this._x += speed;

_root._x -= speed;

}

Награди (монети)

Каква била играта ни, ако нямахме цел в нея, затова ще си поставим такава – събирането на монети (или там каквото си изберете).

Един от най-лесните, но неефективни методи ще е да направим всяка монета да бъде проверявана дали се докосва до героя и след което, ако тя се докосва (дефакто човечето я взима) ние я премахваме.

Ето какво ще направим. И така, когато задаваме повишаване или понижаване на някакъв брой, наша основна цел е да използваме число за това действие. Затова в AS ще добавим и стойност за него:


Код
score.text=0;

Горният модул трябва да е извън всякакви други кодове, затова ще го поставим самичък на първият ред на нашият скрипт.

!!ВАЖНО!! Всеки код, който се намира на сцената ни е от първостепенно значение и клипа, ще изпълни първо него!

Сега е врене да нарисуваме нашите монети, затова изберете си някаква форма или картинка, направете я MC (F8 ) и сложете следния код НА НЕЯ!


Код
onClipEvent (enterFrame) {

if (this.hitTest(_root.char)) {

_root.score.text += 1;

unloadMovie(this);

}

}


Вече имаме всички тези кодове, но не и видим резултат, затова е време да направим текстово поле Dynamic Text box, със Instant Namescore”.

Ще забележите обаче, че това текстово поле се движи, ето защо ще зададем следния код за да не го прави видимо. Дефакто нашето текстово поле, ще е на точно определено разстояние от нашия герой, това разстояние, което сте оставили подреждайки елементите на сцената:

Код
 

if (dir == "right" && !_root.leftblock.hitTest(this._x+20, this._y, true)) {

_root.score._x += speed;

this._x += speed;

_root._x -= speed;

}

if (dir == "left" && !_root.rightblock.hitTest(this._x-20, this._y, true)) {

_root.score._x += speed;

this._x += speed;

_root._x -= speed;

}

За да размножим нашите монетки, маркирайте едната, задръжте CTRL и провлачете с мишката в произволна посока, така избраната монета/монети ще се размножат без да променят характеристиките си и няма да е нужно да пишете кода отново!



- - - край на Първа част - - -

Превел урока: AxllRose
Източник: www.kirupa.com

Втора част

Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.




Урокът е добавен от: AxllRose

Коментари

TS87

При мен се появява следната грешка

Код
1087: Syntax error: extra characters found after end of program.

picha925

Е направете го за начинаещи!

Добави коментар

Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.