Главная › FLASH ОБУЧЕНИЕ › #2 Создание игры “Набей мяч”


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

Опубликовано 17 июня, 2011 - 04:42 пользователем Notion
FLASH ОБУЧЕНИЕ
Flash уроки текстом
#2 Создание игры “Набей мяч”
Информация
Автор/переводчик: 
Notion-flash
Источник: 
https://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('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);
 }
 }
 
 }

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

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

И, как всегда, я желаю вам удачи!

Исходник: 
ball_game_box2d_part_2.rar
box2d
as3
game

Впервые!

Если у вас было хоть раз желание сделать что-то новое и необычное, то этот видеокурс для вас! Знания ActionScript 3.0 вдохнут в ваши проекты новую жизнь, позволив тем самым поднять их на новый уровень

С помощью этого видеокурса вы пройдёте путь от новичка до Объектно-Ориентированного Программирования, сможете работать со многими популярными библиотеками и научитесь создавать сайты во flash! + Видеокурс по PaperVision3D в подарок!

Видеокурс содержит 119 видеоуроков в 12 главах. На сегодняшний день это единственный видеокурс, таких масштабов

Узнайте о других возможностях ActionScript 3.0

Поделись с друзьями
  • 3766 просмотров

Похожие записи

Комментарии

Опубликовано 18 июня, 2011 - 06:19 пользователем Вапыф
Аватар пользователя Вапыф

Научитесь комментировать код :)

Опубликовано 18 июня, 2011 - 07:02 пользователем VittyRude
Аватар пользователя VittyRude

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

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

smiles

 

 

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

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

Опубликовано 18 июня, 2011 - 08:05 пользователем Notion
Аватар пользователя Notion

Цитата: Вапыф

Вапыф  

Так все комментарии в тексте, зачем засорять код ненужными слешами( //коммент). Ну ок, следующий урок с доп. комментариями

Цитата: VittyRude

VittyRude 

о комментариях немного выше :) Да нет, это ориганальный урок, не паст.

P.S. QuickBox2D намного лучше! Как я уже и говорил
"такую игру можно сделать из 8 строчек"

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