Информация

Обсуждало 5 человек

Создание панели очков. Супер способ.

ActionScript 3.0
08 января 2013 в 16:48:27

ОСТОРОЖНО ПРОГРАММИРОВАНИЕ!!! ActionScript 3.0
МНОГО БУКАФФФФФ

Итак, от нечего делать я решил написать статью в которой решил научить вас создавать панель с очками в игре не мегонубским способом через динамический текст, а супер крутым способом при котором очки будут отображаться цифрами которые мы сами нарисуем.

Вот что у нас должно получиться.
http://dolimoll.idenchig.ru/wp-content/uploads/2013/01/p2Score.swf

Для кого полезен этот урок?

В первую очередь этот урок полезен школоте которая ни чего не понимает в As, а так же нубам. Аниматорам думаю это нах не надо.

Приступим!

Начну с того каждый быдлокодер должен уметь изголяться и извращаться как только может при написании игры. И в этот раз мы будет создавать мегокрутую панель для очков. В этом уроке будет совсем немного рисования и очееееень много быдлокода который я постараюсь объяснить. Итак, для начала создадим новый класс который я назвал p2Score, собственно, это и есть наша панель с очками.

package { import flash.display.MovieClip; import flash.display.Sprite; import flash.geom.Rectangle; public class p2Score extends Sprite { public var mFont:Class; public var fontWidth:Number = 0; public var fontInt:Number = 5; public var mResize:Boolean = false; private var myScore:Number = 0; public function p2Score(fontMovieClip:Class, width:Number, resize:Boolean = false) { mFont = fontMovieClip; mResize = resize; fontWidth = width; } public function set score(num:Number):void { clear(); myScore = num; var mscore:String = String(num); for (var i = 0; i < mscore.length; i++) { var s = mscore.substr(i, 1); var mf:MovieClip = new mFont(); mf.gotoAndStop(Number(s) + 1); if (!mResize) { mf.x = fontWidth * i + fontInt * i; } else { var mfr = mf.getBounds(mf); if (this.numChildren > 0) { var md:MovieClip = this.getChildAt(this.numChildren - 1) as MovieClip; var mdr:Rectangle = md.getBounds(md); mf.x = md.x + mdr.x + mdr.width + fontInt - mfr.x; } else { mf.x -= mfr.x; } } addChild(mf); } } public function get score():Number { return myScore; } public function clear() { var nm:int = this.numChildren; for (var i = 0; i < nm; i++) { this.removeChildAt(0); } } } }


Если вы полный нубяра и уже наложили полные штаны кирпичей от такой кучи кода, то можете переодеться и начать читать дальше. Итак, что же тут такое написано? Здесь все очень просто! Как мы видим класс p2Score наследуется от класса Sprite, а значит он обладает всеми его свойсвами(ваш Кэп) и в него можно добавлять другие графические объекты. Далее идет конструктор с параметрами p2Score(fontMovieClip:Class, width:Number, resize:Boolean = false), fontMovieClip - класс нашего мувиклипа в котором будут наши цифры, width - ширина одной цифры, resize определяет будет ли наша ширина постоянной или она будет зависить от ширины цифры. Думаю то что происходит в конструкторе объяснять не надо, ибо там и так все понятно.

Далее идут set и get методы. "Нах они нам нужны, ведь это непонятно как то?" - скажет типичный нуб. А нужны они нам вот зачем, так как наши очки будут изображаться графически нашими нарисованными цифрами, то мы не сможем изменить это изображение просто изменив переменную которая будет хранить в себе значение очков, а нам придется вызвать функции которая будет все это изменять, и запись будет очень неудобной, например, она будет такой p2Score.setScore(1000), это очень отстойно, т.к для того что бы просто взять значение нам придется написать еще одну функции, а с помощью set и get методов бы будет как чисто козырные кореши использовать такой код p2Score.score += 12 и наше графическое изображение очков сразу поменяется.

Первым мы рассмотрим наш set score метод. Для начала мы очищаем нашу панель от старого изображения функцией clear() которая определена в этом же классе. Далее мы переводим наши очки из типа Number в тип String и перебираем каждый символ что бы узнать на какой кадр нужно установить мувиклип с цифрой, затем мы создаем новый мувиклип с цифрой и ставим его на нужный нам кадр. Если включен флаг resize то выравниваем наши мувиклипы по оси Х в зависимости от их ширины, для этого определяем угловые точки функцией getBounds.

Метод get score и функция clear() очень просты и не нуждаются в объяснении.

Как все это использовать?

Я написал в главном классе игры Main следующий код.

package { import flash.display.Sprite; import flash.events.MouseEvent; public class Main extends Sprite { public var myScore:Number = 10; public var tablo:p2Score; public function Main() { tablo = new p2Score(myFont, 40, true); addChild(tablo); tablo.score = myScore; stage.addEventListener(MouseEvent.CLICK, onMyClick); } private function onMyClick(e:MouseEvent):void { tablo.score += 12; } } }


Здесь создается новый экземпляр tablo нашего класса p2Score с параметрами myFont - это класс моего мувиклипа с цифрами, в нем есть 10 кадров, на первом кадре нарисована цифра 0, на втором - 1, на третьем - 2 и т.д, дальше идет параметр width который я написал 40, и флаг resize у меня равен значению true, т.е длина каждой цифры разная. Дальше на stage вешается мышиный слушатель и по каждому щелчку мыши наш параметр tablo.score увеличивается на 12.

Достоинства.
[+] Мегокрутое отображение панели очков.
[+] Относительное быстродействие.
[+] Удобство использования.

Отстоинтсва.
[-] Нельзя вывести отрицательные числа.
[-] Нельзя вывести дробные числа.

Послесловие:
Недостатки очень лего исправляются, для этого нужно сделать проверку символа и если он равен "-" или "." то мувиклип ставим на кадр в котором нарисованы "-" или "." соответственно.

Обновлено: 08 января 2013 в 19:17:24

Обсуждение (вниз)

Не хватает только вашего мнения. Зарегистрируйтесь, чтобы написать!

10 мая 2016 в 17:06:05

Хрена, я 3 года назад знал про сеттеры и геттеры ХДД

10 мая 2016 в 17:05:27

Ебать такой позор ХД

10 января 2013 в 23:00:53

очки отображаются твоими собственными цифрами, т.е ты можешь нарисовать все цифры которые собраны как бы из костей или из черепов и т.д


Вааааааааааааау да ты чоооооо?!!??! О_О и для этого писать целую статью хД это и так логически понятно как реализовывается, и не только одним способом. Я подобное делал для битмапки, там у меня была таблица и в каждой ячейке был символ, и я обрабатывал строку и печатал на битмапку текст, и там у меня все возномжно было, и отрицательные числа и спец символы и перенос строк и динамическое изменение цвета, кароче вот так вот хД

10 января 2013 в 18:52:57

Симпатично смотрится )

09 января 2013 в 17:12:01

Да, интересная идея

09 января 2013 в 17:01:32

Я понял ))

09 января 2013 в 15:19:13

Надеюсь кто то понял.

08 января 2013 в 19:18:28

Всё, теперь можно посмотреть что в итоге получится.

08 января 2013 в 18:32:11

Можно, ща ссылку добавлю.

08 января 2013 в 18:29:22

А примерчик посмотреть можно?

08 января 2013 в 18:17:07

ага тогда можно в каждом кадре указать цифорку включая знак минус и точку, укозать им якорь поступающий скор переобразовать в строку через цикл и ЧарАт, чильдишь и выставляешь гото туда тоесть newClip.gotoAndStop(Scor.CharAt(i)); ну енто как расширения твоего кода и вообще тогда нет недостатков))


Так и сделал же Хдд

08 января 2013 в 18:10:17

я непонил..*пук*

08 января 2013 в 17:25:48

ага тогда можно в каждом кадре указать цифорку включая знак минус и точку, укозать им якорь поступающий скор переобразовать в строку через цикл и ЧарАт, чильдишь и выставляешь гото туда тоесть newClip.gotoAndStop(Scor.CharAt(i)); ну енто как расширения твоего кода и вообще тогда нет недостатков))

08 января 2013 в 17:17:13

Эм при всем уважении я не совсем понял для чего это? Не проще создать окно с текстом куда записывать текс? ну а что-бы не за артманили использовать соль? код будет проще var myWinScore = WinScore();addChild(myWinScore);myWinScore .Score.text = glScore;??


Смотрится в 100раз круче когда очки отображаются твоими собственными цифрами, т.е ты можешь нарисовать все цифры которые собраны как бы из костей или из черепов и т.д, а не просто вставить динамический текст.

08 января 2013 в 17:10:27

Эм при всем уважении я не совсем понял для чего это? Не проще создать окно с текстом куда записывать текс? ну а что-бы не за артманили использовать соль? код будет проще var myWinScore = WinScore();addChild(myWinScore);myWinScore .Score.text = glScore;??
Fundux.ru v.3.0 © 2006-2014 AleXNoD
Портал русских флеш игр и flash мультов