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

#2 Создание игры “Набей мяч”
Информация
Автор/переводчик: 
Notion-flash
Описание: 

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

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

}

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

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

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

Исходник: 

Впервые!

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

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

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

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

Комментарии

Аватар пользователя Вапыф

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

Аватар пользователя VittyRude

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

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

smiles

 

 

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

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

Аватар пользователя Notion

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

Вапыф  

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

Цитата: VittyRude

VittyRude 

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

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

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