Как создавать свои Flash-игры, подобные Angry Birds и World of Goo?
Box2D - это библиотека, которая моделирует физическое поведение твердых тел в двумерном пространстве. Программисты могут использовать ее в своих играх, чтобы сделать...
После того как мы создали сам каркас, а точнее стены и мяч, нам нужно заняться именно возможностью кликать по мячу. Сделаем мы это очень просто, точнее немного схитрим. Вместо того что бы определять контакт на джоин с курсором, мы просто загрузим картинку. Как правило на простой мувик намного легче прикрепить слушатель событий, в нашем случает клика.
От теории прямо к практике. Еще скажу, что если загружать картинки, так загружать их нормально, что бы игра(пускай и незаконченная) но была на что то похожа. Значит, я перехожу в класс Constants.as и пишу следующее: хотя нет, еще ничего писать не буду. Заходим в гугл и качаем изображение мяча и стадиона. Я скачал вот такие картинки:
Вот сейчас немного изменив класс Constants.as, он выглядит следующим образом:
package net.build { import flash.display.MovieClip; import flash.display.SimpleButton; /** * ... * @author Notion-flash */ public class Constants { static public const METR:int = 30; static public const data:MovieClip = new Ball_mc(); static public const BG:MovieClip = new Bg_mc(); static public const COPPY:SimpleButton = new Flash_Master_net(); } }
Всё предельно легко. Я просто стадион конвертировал в MovieClip и дал ему линкBg_mc, а мячу Ball_mc. Что касается Flash_Master_net, это чисто копирайты, ну куда же без них. Можно увидеть снизу справа, такая беленькая кнопка. Ок, продолжаем. Опять же для удобности я создаю новый класс и называю его, напримерDisplayManager.as, что находится в пакете display. В этот класс я и буду загружать все картинки. После небольших манипуляций из мувиками в библиотеке и самим языком 3-й версии, у меня получилось:
package net.display { import Box2D.Common.Math.b2Vec2; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.MouseEvent; import flash.net.navigateToURL; import flash.net.URLRequest; import net.build.Constants; import net.Main; /** * ... * @author Notion-flash */ public class DisplayManager extends MovieClip { public function DisplayManager() { createBg() createBall() createCoppy() } private function createCoppy():void { Constants.COPPY.x = 475; Constants.COPPY.y = 385; addChild(Constants.COPPY) } private function createBall():void { addChild(Constants.DATA) } private function createBg():void { Constants.BG.x = 550 / 2; Constants.BG.y = 200; addChild(Constants.BG) } } }
Можете протестировать ролик. По идеи у вас ничего быть не должно..И это будет логично, так как в док. класс мы ничего не добавляли. Если все так уж печально, значит нужно это исправлять! Сначала, в главном классе я создам новый экземпляр DisplayManager. После чего добавлю его на сцену.
private var _disManager:DisplayManager = new DisplayManager(); addChild(_disManager)
Если протестировать ролик получается……..опять не то, хммм. Кружок прыгает нормально, но картинка мяча стоит неподвижно. Возвращаясь к Ball.as находим строку:
return circle;
и перед ней добавляем еще одну строку, вот такую:
circle.SetUserData(Constants.DATA) //прикрепляем "информацию пользователя"
После чего переходим в DisplayManager и добавляем новый статический метод, например update(), в котором пишем следующее:
if (Main.ball.GetUserData() != null) { Main.ball.GetUserData().x = Main.ball.GetPosition().x * Constants.METR; Main.ball.GetUserData().y = Main.ball.GetPosition().y * Constants.METR; Main.ball.GetUserData().rotation = Main.ball.GetAngle() * (180/Math.PI); }
Тут надеюсь ясно. В первой строке проверяем если у тела есть “информация пользователя”, и если это правда – двигаем картинку(мяч) идентично кругу. Вот сейчас все можно тестировать.
Теперь время добавить клик. Смотрим код ниже:
package net.display { import Box2D.Common.Math.b2Vec2; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.MouseEvent; import flash.net.navigateToURL; import flash.net.URLRequest; import net.build.Constants; import net.Main; /** * ... * @author Notion-flash */ public class DisplayManager extends MovieClip { public function DisplayManager() { createBg() createBall() createCoppy() } private function createCoppy():void { Constants.COPPY.x = 475; Constants.COPPY.y = 385; addChild(Constants.COPPY) Constants.COPPY.addEventListener(MouseEvent.CLICK, navigateThis) } private function createBall():void { addChild(Constants.DATA) Constants.DATA.addEventListener(MouseEvent.CLICK, clicked) } private function createBg():void { Constants.BG.x = 550 / 2; Constants.BG.y = 200; addChild(Constants.BG) } static public function update():void { if (Main.ball.GetUserData() != null) { Main.ball.GetUserData().x = Main.ball.GetPosition().x * Constants.METR; Main.ball.GetUserData().y = Main.ball.GetPosition().y * Constants.METR; Main.ball.GetUserData().rotation = Main.ball.GetAngle() * (180/Math.PI); } } //*************************************************************clicked private function navigateThis(e:MouseEvent):void { navigateToURL(new URLRequest('https://#'), "_blank"); } private function clicked(e:MouseEvent):void { Main.ball.SetAwake(true) Main.ball.SetLinearVelocity(new b2Vec2(0, -10)) } } }
Всё очень просто. Несколько слов о методе clicked(). Поскольку мы используемSetLinearVelocity, сначала нам нужно тело разбудить и только потом применять к нему ленейную скорость. Почему именно SetLinearVelocity, а не ApplyForce илиApplyImpulse. Только через один факт, когда мяч подлетел довольно высоко, а кликнут возле земли – он почти не среагирует и упадет на землю. В общем протестируйте и увидите разницу.
Еще не забудьте только в метод update(Main.as) добавить это:
DisplayManager.update()
Конечный код класса Main.as с несколькими новыми переменными и изменениями:
package net { import Box2D.Common.Math.b2Vec2; import Box2D.Dynamics.b2Body; import Box2D.Dynamics.b2DebugDraw; import Box2D.Dynamics.b2World; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import net.build.BoxCreator; import net.build.Constants; import net.display.DisplayManager; /** * ... * @author Notion-flash */ public class Main extends MovieClip { public static var _world:b2World = new b2World(new b2Vec2(0, 25), true); private var _boxCreator:BoxCreator = new BoxCreator(); private var _disManager:DisplayManager = new DisplayManager(); static public var ball:b2Body; public function Main() { //debugDraw() createMe() addEventListener(Event.ENTER_FRAME, update) } private function createMe():void { ball = Ball.circleCreator(); _boxCreator.boxCreator(550 / 2, 400, 20, 550, 0, false) _boxCreator.boxCreator(550 / 2, 0, 20, 550, 0, false) _boxCreator.boxCreator(0, 200, 400, 20, 0, false) _boxCreator.boxCreator(550, 200, 400, 20, 0, false) addChild(_disManager) } private function update(e:Event):void { _world.Step(1 / Constants.METR, 10, 10) _world.ClearForces() //_world.DrawDebugData() DisplayManager.update() } private function debugDraw():void { var drawThis:b2DebugDraw = new b2DebugDraw(); var spriteToDraw:Sprite = new Sprite(); addChild(spriteToDraw); drawThis.SetSprite(spriteToDraw); drawThis.SetFlags(b2DebugDraw.e_shapeBit); drawThis.SetDrawScale(Constants.METR); drawThis.SetAlpha(0.4); drawThis.SetLineThickness(1); _world.SetDebugDraw(drawThis); } } }
Протестируйте и у вас должно получится что то такое:
На это все. В следующем уроке мы добавим самое главное, чтобы мяч мог прыгать в разные стороны, в зависимости от клика. А то проиграть слишком сложно сейчас.
И, как всегда, я желаю вам удачи!
Впервые!
Если у вас было хоть раз желание сделать что-то новое и необычное, то этот видеокурс для вас! Знания ActionScript 3.0 вдохнут в ваши проекты новую жизнь, позволив тем самым поднять их на новый уровень
С помощью этого видеокурса вы пройдёте путь от новичка до Объектно-Ориентированного Программирования, сможете работать со многими популярными библиотеками и научитесь создавать сайты во flash! + Видеокурс по PaperVision3D в подарок!
Видеокурс содержит 119 видеоуроков в 12 главах. На сегодняшний день это единственный видеокурс, таких масштабов
Комментарии
Научитесь комментировать код :)
Даааммм, урок даже не прокоментирован.....
Просто взяли и "нагло" скопировали урок с русского сайта
P.S. QuickBox2D намного лучше! Как я уже и говорил
"такую игру можно сделать из 8 строчек"
Вапыф
Так все комментарии в тексте, зачем засорять код ненужными слешами( //коммент). Ну ок, следующий урок с доп. комментариями
VittyRude
о комментариях немного выше :) Да нет, это ориганальный урок, не паст.
P.S. QuickBox2D намного лучше! Как я уже и говорил
"такую игру можно сделать из 8 строчек"
Не забывайте, что QuickBox2D это всего лишь набор команд библиотеки Box2D и возможности ваши ограничены(я имею ввиду чистое использование). Этот урок не для создания супер мега игр, а для того что бы человек смог понять как работать с данной библиотекой.