Get Adobe Flash player
Главная » Flash Обучение » Flash Уроки Текстом » #2 Создание игры “Набей мяч”

Как создать?

Подпишитесь сейчас и вы получите на email серию бесплатных видеоуроков по flash.

Ваш e-mail:

Ваше имя на русском:

Подписавшись, Вы получите 4 видео урока, которые научат вас создавать flash презентации, flash баннеры, flash кнопки буквально за несколько минут!

Курс по flash cs5

 

Adobe Flash CS4 и Actionscript 3.0. Полный курс видео уроков.

Внимание!

Вы можете изучить все секреты flash анимации всего за 3 недели! Перейти из разряда новичка в разряд опытного пользователя даже без посещения дорогих курсов и чтения толстенных талмудов.

110 видео уроков,

в превосходном качестве помогут пройти, Вам, терни flash анимации самым быстрым и легким путём!

+ActionScript 3.0

Подробнее!..

www.megastock.ru
Уведомление об ответственности


#2 Создание игры “Набей мяч”

Notion   17 июня 2011    Раздел сайта: Flash Обучение » Flash Уроки Текстом

Автор: Notion-flash
Источник: http://flash-master.net/archives/200

После того как мы создали сам каркас, а точнее стены и мяч, нам нужно заняться именно возможностью кликать по мячу. Сделаем мы это очень просто, точнее немного схитрим. Вместо того что бы определять контакт на джоин с курсором, мы просто загрузим картинку. Как правило на простой мувик намного легче прикрепить слушатель событий, в нашем случает клика.

От теории прямо к практике. Еще скажу, что если загружать картинки, так загружать их нормально, что бы игра(пускай и незаконченная) но была на что то похожа. Значит, я перехожу в класс 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('http://#'), "_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);
 }
 }
 
 }

Протестируйте и у вас должно получится что то такое:

На это все. В следующем уроке мы добавим самое главное, чтобы мяч мог прыгать в разные стороны, в зависимости от клика. А то проиграть слишком сложно сейчас.
Вот исходник: ball_game_box2d_part_2.rar [3,07 Mb] (cкачиваний: 254)
И, как всегда, я желаю вам удачи!

Просмотров: 3206 | Комментарии (3) | box2d, as3, game
#1   Вапыф      18 июня 2011 06:19   ICQ: --   



Регистрация: --
Публикаций: 0
Комментариев: 0
Научитесь комментировать код :)
#2   VittyRude      18 июня 2011 07:02   ICQ: --   



Регистрация: 8.05.2011
Публикаций: 0
Комментариев: 32

Даааммм, урок даже не прокоментирован.....

Просто взяли и "нагло" скопировали урок с русского сайта  smiles

 

 

P.S. QuickBox2D намного лучше! Как я уже и говорил

"такую игру можно сделать из 8 строчек"

#3   Notion      18 июня 2011 08:05   ICQ: --   



Регистрация: 4.06.2011
Публикаций: 3
Комментариев: 6
Цитата: Вапыф
Вапыф  
Так все комментарии в тексте, зачем засорять код ненужными слешами( //коммент). Ну ок, следующий урок с доп. комментариями

Цитата: VittyRude
VittyRude 
о комментариях немного выше :) Да нет, это ориганальный урок, не паст.
P.S. QuickBox2D намного лучше! Как я уже и говорил
"такую игру можно сделать из 8 строчек"

Не забывайте, что 
QuickBox2D это всего лишь набор команд библиотеки Box2D и возможности ваши ограничены(я имею ввиду чистое использование). Этот урок не для создания супер мега игр, а для того что бы человек смог понять как работать с данной библиотекой.

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.