В этом уроке мы создадим трехмерную игру памяти. По пути мы рассмотрим добавление переменных и mouseEvents к объектам Away3D. Давайте начнем..
Шаг 1: Файл ActionScript
Создайте новый файл ActionScript 3.0.
Шаг 2: Редактировать профиль
На панели «Свойства» нажмите кнопку «Изменить».
Шаг 3. Выберите версию Flash Player
Выберите профиль Flash Player 9 и нажмите «ОК».
Шаг 4: Получите Away3D Engine!
Сохраните файл под именем «Memory Game.fla» в папке «Учебное пособие по игре на память». Теперь загрузите движок Away3D с Away3D Downloads . Мы будем использовать версию 2.3.3 для Flash Player 9. Распакуйте архив и скопируйте все папки в папку Memory Game Tutorial.
Шаг 5: Получите Tweener!
Загрузите Tweener отсюда . Распакуйте файлы классов в папку «Учебник по игре на память», чтобы все выглядело так:
Шаг 6: Импорт текстур
Для этой игры мы будем использовать 5 разных карт (их можно найти в исходных файлах). Импортируйте их во Flash, выбрав «Файл»> «Импорт»> «Импорт в библиотеку».
Шаг 7: Экспорт текстур для ActionScript
Чтобы использовать эти текстуры во время выполнения, нам нужно прикрепить к ним имя класса. Выберите изображения по одному и перейдите правой кнопкой мыши> Свойства> Экспорт для ActionScript. Просто удалите «.png» части их имен.
Шаг 8: Начните кодирование
После всего этого мы готовы начать кодирование. Давайте заполним наши первые строки, импортировав классы:
|
1
2
3
4
5
6
7
8
|
import away3d.cameras.*;
import away3d.containers.*;
import away3d.materials.*;
import away3d.primitives.Plane
import away3d.primitives.Cube
import away3d.containers.ObjectContainer3D;
import away3d.core.math.Number3D;
import caurina.transitions.*
|
Шаг 9: Настройка переменных
После импорта наших классов мы должны определить наши переменные для использования в следующих шагах.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
|
var scene:Scene3D;
var camera:Camera3D;
var view:View3D;
var totalchildren:int=10
var cards:Array
var textures:Array = [ new texture0(0,0),
new texture1(0,0),
new texture2(0,0),
new texture3(0,0),
new texture4(0,0)]
var backtexture:BitmapData = new textureback(0,0)
var woodtexture:BitmapData = new texturewood(0,0)
var cardwidth:Number = 110
var cardheight:Number = 150
var xoffset:Number = 10
var yoffset:Number = 10
var cardsholder:ObjectContainer3D
var selectedCard1:Plane
var selectedCard2:Plane
var disableMouseEvents:Boolean=false
|
Массив текстур содержит наши текстурные изображения. Чтобы прикрепить изображения к нашей сцене из библиотеки, мы используем этот метод:
var imageData: BitmapData = LibraryLinkageName (0,0) . Мы используем тот же подход для нашего стола и оборотной стороны карт. xoffset и yoffset определяют расстояние между картами.
Шаг 10: Настройка Away3D
Прежде всего нам нужно собрать Away3D.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
function initAway3D():void {
scene = new Scene3D();
camera = new Camera3D();
camera.y = 700
camera.z = 500
camera.lookAt(new Number3D(0,0,0))
view = new View3D({scene:scene, camera:camera});
view.x = stage.stageWidth/2
view.y = stage.stageHeight/2
addChild(view);
}
|
Первая строка в нашей функции создает 3D-сцену. Мы добавим в него 3D-объекты. После этого мы создаем камеру. Мы немного переместим его назад и вверх. Делая это, мы сможем лучше видеть карты, когда играем в игру. Тогда мы отцентрируем это. Наконец мы создаем вид и устанавливаем его в середине сцены.
Шаг 11: Создание таблицы
На этом шаге мы создадим таблицу:
|
1
2
3
4
5
|
function createGround():void {
var cube:Cube = new Cube({width:680,depth:400,height:20,pushback:true,ownCanvas:true,material: new BitmapMaterial(woodtexture)})
cube.y=-20
scene.addChild(cube)
}
|
Чтобы он выглядел более реалистично, мы используем куб вместо плоскости. Наиболее важным моментом здесь является использование свойств pushback в Cube, чтобы сделать его видимым под картами. Материал, который мы используем для Cube, это BitmapMaterial. Это лучший способ использовать растровые изображения в качестве текстур.
Шаг 12: Создание одной карты
Сначала мы создадим держатель. В этом держателе будет два самолета. Один из этих самолетов — лицевая сторона карт, а другой — задняя. Мы будем использовать держатель для поворота или перемещения карт.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
function createCard(texture:BitmapData,id:int):ObjectContainer3D {
var card:ObjectContainer3D = new ObjectContainer3D()
var front:Plane = new Plane({width:cardwidth,height:cardheight, material: new BitmapMaterial(texture,{smooth:true})})
var back:Plane = new Plane({width:cardwidth,height:cardheight, material: new BitmapMaterial(backtexture,{smooth:true})})
front.rotationY=180
back.rotationZ=180
back.rotationY=180
back.extra = {}
back.extra.id = id
back.extra.targetCard = card
back.addOnMouseDown(onBackClicked)
card.rotationZ=180
card.addChild(front)
card.addChild(back)
card.ownCanvas = true
return card
}
|
В этой функции мы воссоздаем то, что иллюстрирует диаграмма. Мы должны использовать вращение, чтобы положить карты лицом вниз. Мы не добавляем событие в держатель, потому что мы нажимаем только на обратную сторону карты. По этой причине мы добавляем событие mouseDown только на заднюю плоскость.
Каждый 3D-объект в Away3D может иметь дополнительные переменные, и каждый цвет в нашей игре имеет уникальный идентификатор. Мы добавим эту переменную id в «дополнительные» свойства задней плоскости. Мы будем использовать идентификаторы, чтобы проверить, являются ли выбранные две карты одного цвета или нет.
Шаг 13: Создание всех карт
После функции создания карты мы готовы создать их все.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
function initCards():void {
cards = new Array()
for(var i:int = 0; i<textures.length; i++ ) {
var card1:ObjectContainer3D = createCard(textures[i],i)
var card2:ObjectContainer3D = createCard(textures[i],i)
cards.push( card1 )
cards.push( card2 )
}
}
|
Мы поместим все наши карты в массив карт. Там будет две карты каждого цвета (две синие, две красные и две зеленые). Из-за этого мы создаем две карты одного цвета и затем помещаем их в массив.
Шаг 14: рандомизировать карты
Следующий шаг — рандомизировать массив карт.
|
1
2
3
4
5
6
7
|
function randomizeCards():void{
var newArray:Array = new Array();
while(cards.length > 0){
newArray.push(cards.splice(Math.floor(Math.random()*cards.length), 1)[0]);
}
cards = newArray
}
|
Это все так просто. Сначала мы создаем новый массив. Затем мы выбираем случайный элемент из массива карт, помещаем его в новый массив и удаляем из массива карт. После того, как цикл while завершен, мы выравниваем массив cards в наш новый массив. Теперь у нас есть рандомизированный массив.
Шаг 15: Добавление карточек в сцену
Теперь мы рандомизировали наши карты, чтобы добавить их на сцену. Мы будем использовать сетку для своих позиций
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
function addCardsToScene():void {
cardsholder = new ObjectContainer3D()
var currentindex:int = 0
for(var i:int=0; i<2; i++) {
for(var b:int=0; b<5; b++) {
cards[currentindex].x=b*(cardwidth+xoffset)+cardwidth/2
cards[currentindex].z=i*(cardheight+yoffset)+cardheight/2
cardsholder.addChild(cards[currentindex])
currentindex++
}
}
var cardswidth:Number = (5*cardwidth) + (4*xoffset)
var cardsheight:Number = (2*cardheight) + (1*yoffset)
cardsholder.x=-cardswidth/2
cardsholder.z=-cardsheight/2
scene.addChild(cardsholder)
}
|
Первый цикл for предназначен для оси x, а второй — для оси y. Мы добавляем карты в новый основной держатель, поэтому, когда мы хотим повернуть или переместить карты, мы можем использовать только основной держатель. Затем мы устанавливаем карты с помощью системы сетки. Для этого мы используем переменные cardwidth, cardheight, xoffset и yoffset. Карты должны быть в середине стола. Для этого нам нужно получить значения ширины и высоты основного держателя карт. Эта диаграмма показывает, как мы их получаем.
Получив их, мы перемещаем основной держатель в середину стола.
Шаг 16: событие мыши вниз
Мы добавили карты на сцену. Нашим следующим шагом будет создание функции события mouseDown.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
function onBackClicked(e:Event) {
if(disableMouseEvents==false) {
if(selectedCard1==null) {
selectedCard1 = e.currentTarget as Plane
}else {
if(selectedCard2==null) {
selectedCard2 = e.currentTarget as Plane
waitForDecision()
disableMouseEvents = true
}
}
Tweener.addTween(e.currentTarget.extra.targetCard,{y:50,rotationZ:0,time:1})
}
}
|
Сначала мы проверяем disableMouseEvents. Это означает, что если у нас есть разрешение кликать по карточкам, мы продолжаем, но если у нас ничего не происходит. Если первая карта не выбрана, кликаемая карта является нашей первой картой. Если первая карта не нулевая, то эта нажатая карта является нашей второй картой.
Наша игра должна принять решение после того, как мы выберем две карты, независимо от того, одинаковые они или нет. По этой причине наша функция «waitForDecision» работает, и мы установили для disableMouseEvents значение true. Поэтому, пока игра ожидает решения, ничего не произойдет, если мы нажмем на карту.
Свойство вращение Z нашей кликаемой карты будет равным 180 градусам с Tweener, поэтому мы можем видеть цвет карты.
Шаг 17: Жди решения
Когда выбраны две карты, игра немного ждет (это просто для удовольствия).
|
1
2
3
4
5
|
function waitForDecision():void {
var timer:Timer = new Timer(1000,1)
timer.addEventListener(TimerEvent.TIMER,makeDecision)
timer.start()
}
|
Как видите, это простое использование таймера. Он ждет 1000 миллисекунд (1 секунда). После этого TimerEvent запускает функцию makeDecision.
Шаг 18: Примите решение
Мы подождали 1 секунду, поэтому пришло время принять решение. Если значения идентификаторов карт одинаковы, они исчезнут, если нет, то снова повернут лицом вниз
|
01
02
03
04
05
06
07
08
09
10
11
12
|
function makeDecision(e:Event):void {
if(selectedCard1.extra.id == selectedCard2.extra.id) {
Tweener.addTween(selectedCard1.extra.targetCard,{alpha:0,time:0.2,onComplete:removeCard,onCompleteParams:[selectedCard1.extra.targetCard]})
Tweener.addTween(selectedCard2.extra.targetCard,{alpha:0,time:0.2,onComplete:removeCard,onCompleteParams:[selectedCard2.extra.targetCard]})
}else {
Tweener.addTween(selectedCard1.extra.targetCard,{y:0,rotationZ:180,time:1})
Tweener.addTween(selectedCard2.extra.targetCard,{y:0,rotationZ:180,time:1})
}
disableMouseEvents = false
selectedCard1 = null
selectedCard2 = null
}
|
Мы делаем именно это в этой функции. Мы проверяем значения идентификаторов двух выбранных карт. Если они одинаковы, их альфа-значения изменятся на 0 с помощью Tweener (мы заставим их исчезнуть). Когда эта анимация заканчивается, вызывается функция removeCard. Параметром функции removeCard являются сами карты. Мы делаем это с двумя картами одновременно. Если они не совпадают, мы отправляем их на прежние позиции и заставляем их лицом вниз. Каким бы ни было решение, selectedCard1 и selectedCard2 будут установлены в нуль.
Шаг 19: Извлечение карт
Нам нужно удалить две карты из нашего основного держателя, когда они исчезнут, потому что они нам больше не нужны.
|
1
2
3
4
5
6
7
8
|
function removeCard(e:ObjectContainer3D):void {
cardsholder.removeChild(e)
totalchildren—
if(totalchildren==0) {
trace(«WIN»)
}
}
|
После того, как их выгнали со сцены, общее количество детей уменьшается один за другим. Когда он достигает 0, это означает, что вы выиграли игру!
Шаг 20: Рендеринг
Последний шаг — написать функцию цикла для рендеринга Away3D во время выполнения.
|
1
2
3
4
5
6
|
function startToRender():void {
addEventListener(Event.ENTER_FRAME, render);
}
function render( e:Event ):void{
view.render();
}
|
Шаг 21: вызов всех функций
Мы готовы вызвать все функции, которые мы написали.
|
1
2
3
4
5
6
|
initAway3D()
createGround()
initCards()
randomizeCards()
addCardsToScene()
startToRender()
|
Теперь проверьте это и играйте в свою игру 🙂
Вывод
На этом уроке мы узнали, как добавлять переменные и mouseEvents к объектам Away3D. С этими навыками мы создали игру, и, как вы видите, это было не так сложно 🙂
Надеюсь, вам понравился этот урок, спасибо за чтение!