Показать сообщение отдельно
Старый 24.01.2010, 04:58   #1
odd
Мастер
 
Аватар для odd
 
Регистрация: 06.09.2007
Адрес: Донецк, ДНР
Сообщений: 1,023
Написано 298 полезных сообщений
(для 713 пользователей)
Восклицание Lib_arcade - Аркадные игры это просто

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

Для начала поговорим об игровом мире. Практически во всех играх игровое пространство представляет собой прямоугольник, состоящий из множества повторяющихся картинок (спрайтов). Другими словами представьте, что весь игровой мир можно нарисовать на листочке в клеточку. Тогда весь мир будет прямоугольником из M столбцов и N строк. Ну а в каждой клетке изображена какая-то маленькая часть игрового мира. Усвоили? Ну тогда приступаем к работе.

Для начала нам потребуются спрайты(картинки) с изображением частей нашего игрового мира. У меня уже была такая готовая картинка под рукой и я буду использовать её, а вы можете нарисовать собственную. Мой набор спрайтов выглядит так:

Нажмите на изображение для увеличения
Название: s1.png
Просмотров: 1193
Размер:	4.9 Кб
ID:	14832

Ну а вы можете нарисовать что-то на своё усмотрение, главное чтобы спрайты были квадратными (хотя честно говоря и это не обязательно, но для простоты условимся, что все наши спрайты будут квадратными). Количество и расположение спрайтов в файле может быть произвольным. Формат файла: сохраните в двух экземплярах в форматах PNG (для использования в самой игре) и BMP. Зачем это нужно - позже поймете.

Теперь приступим к созданию карты нашего игрового мира.
Для этого запускаем программу Mappy. Вот что мы увидим при первом запуске:

Нажмите на изображение для увеличения
Название: s2.png
Просмотров: 1218
Размер:	15.8 Кб
ID:	14833

Для начала нужно создать новую карту. Для этого нажимаем:
File --> New map... и видим вот такое окошко:

Нажмите на изображение для увеличения
Название: s3.png
Просмотров: 1221
Размер:	7.6 Кб
ID:	14834

Поясню что тут нужно вводить:
Во первой строчке указываем ширину и высоту спрайтов, с помощью которых мы и будем рисовать нашу карту. В моем случае размер спрайта 40 * 40 точек, но у вас может быть и совершенно другим.
Во второй строке вводим два числа - это ширина и высота создаваемой карты в клетках. В нашем случае это 24 * 24, но вы можете указать любые размеры. Всё, нажимаем на OK для создания новой карты.

Теперь добавим в программу наш набор спрайтов. Для этого нажимаем:
File --> Import и выбираем наш BMP файл со спрайтами игрового мира.
Дело в том, что программа Mappy создавалась очень давно, так что формат PNG она плохо понимает, поэтому приходится использовать BMP, но в нашем случае это совершенно не важно. Всё, теперь можно приступать к рисованию карты. Для этого выбираем в правом окне нужный спрайт, а в левом окне рисуем как обычной кистью нашу карту. У меня вышло примерно следующее, ну а вы можете проявить свою фантазию:


Нажмите на изображение для увеличения
Название: s4.png
Просмотров: 1203
Размер:	73.7 Кб
ID:	14835

Когда вдоволь нарисуетесь и уровень нашей будущей игры будет наконец готов, приступим к сохранению нашего шедевра. Для этого нажимаем на кнопку:
File --> Save As... и назовём нашу карту ну скажем 1.FMP, но нас не интересует полученный файл. Самое главное не забудьте потом нажать на
File --> Export и поставьте галочку напротив строки "Map array as comma values only (?.CSV)" и нажмите ОК. Вот этот файл 1.CSV нам и будет нужен.

Теперь приступим к созданию спрайтов героя игры.
Я особо не стал заморачиваться и на скорую руку накалякал 4 кадра движения героя.

Нажмите на изображение для увеличения
Название: s5.png
Просмотров: 1190
Размер:	900 байт
ID:	14836

Вы можете добавить кадров и намного больше и красивее. Я в вас нисколько не сомневаюсь.

Всё, приступаем к созданию самой игры. А для этого нам потребуется новая библиотека Lib_arcade. Опишем вкратце новые функции, которые поддерживает данная библиотека:

NewMap(w: integer; h: integer; im: image; sw: integer; sh: integer) - Создать новую карту
w - ширина карты в клетках,
h - высота карты в клетках
im - картинка со спрайтами карты
sw - ширина каждого спрайта в пикселах
sh - высота спрайта в пикселах

LoadMap(s: string) - загрузить карту
s - строка, где перечислены через запятую все номера спрайтов, использованных в карте в порядке слева-направо и сверху-вниз.
Нумерация спрайтов идет с единицы.

LoadCSV(fname: string) - Загрузить CSV файл с картой
fname - имя CSV файла

PlaceMap(x: integer; y: integer) - сдвинуть карту в требуемую точку
x, y - кординаты точки на дисплее, которые соответсвуют левому верхнему углу карты

DrawMap - Отрисовать карту (нужно ещё вызывать Repaint чтобы карта стала видимой)

CenterCell(x: integer; y: integer) - Отцентровать карту на экране относительно некой клетки на карте
x, y - координаты клетки

MoveMap(x: integer; y: integer) - Сдвинуть карту
x - перемещение по оси X в пикселах (может быть как положительным так и отрицательным)
y - перемещение по оси Y в пикселах (может быть как положительным так и отрицательным)

SetCell(x: integer; y: integer; n: integer) - Записать в клетку карты новый номер спрайта
x, y - координаты клетки
n - новый номер спрайта

integer GetCell(x: integer; y: integer) - Прочитать номер спрайта в клетке с координатами (x, y)

AddSprite(im: image; w: integer; h: integer) - Загрузить набор спрайтов
im - картинка с набором спрайтов
w - ширина спрайта
h - высота спрайта
Всем загружаемым наборам спрайтов присваиваются номера с 0 и выше.

NextFrame(n: integer) - Сдвинуть на 1 кадр указатель текущего спрайта для набора спрайтов
n - номер набора спрайтов

SetFrame(n: integer; f: integer) - Установить конкретный номер кадра для набора спрайтов
n - номер набора спрайтов
f - номер требуемого кадра

SpritePosition(n: integer; x: integer; y: integer) - Установить позицию куда будет выводиться спрайт
n - номер набора спрайтов
x, y - координаты левого верхнего угла спайта

DrawSprite(n: integer) - Нарисовать спрайт на экране
n - номер набора спрайтов

RemoveSprites - Очистить весь массив с наборами спрайтов

Ну и в качестве примера использования библиотеки приведу маленький пример игры. В игре вы можете передвигать по лабиринту маленького человечка и собирать алмазы. За каждый алмаз начисляется 100 очков. Вот исходный код (кому впадлу набирать, можете скачать его ниже):

Program ArcadeDemo;
Uses arcade;
Var    
xyscorekeyinteger;
        
pboolean;

Procedure DrawAll;
begin
    SetColor
(000);
    
FillRect(00GetWidthGetHeight); // Очистка экрана
    
CenterCell(xy); // Центрируем карту относительно главного героя
    
DrawMap// Отрисовываем карту
    
DrawSprite(0); // Отрисовываем героя
    
NextFrame(0); // Следующий кадр для героя
    
SetColor(255255255); 
    
DrawText('SCORE: ' score33); // Рисуем количество очков
    
Repaint;
    
p:=false// Сброс флага отрисовки
end;

Function 
Step(dxintegerdyinteger): boolean// Тут у нас проверка можно ли ходить в эту клетку
begin
    Step
:=true;
    if ((
dx 1) or (dy 1) or (dx 23) or (dy 23)) then Step:=false;
    else
    
begin
        
if (GetCell(dxdy) > 3then Step:=false;
    
end;
    if (
GetCell(dxdy) = 3then score:=score+100// Если это алмаз, то прибавляем очки
end;

Begin
    NewMap
(2424LoadImage('/s1.png'), 4040); // Создаем новую карту
    
LoadCSV('/1.CSV'); // Загружаем файл с картой
    
x:=1y:=1// Начальные координаты героя
    
score:=0// Очки пока равны нулю
    
AddSprite(LoadImage('/hero.png'), 4040); // Загрузка спрайтов главного героя
    
SpritePosition(0GetWidth/220GetHeight/220); // Устанавливаем позицию куда выводить спрайт
    
p:=true// Это флаг того нужна ли перерисовка экрана
    
While(true) do // Бесконечный цикл
begin
    
if (pthen DrawAll;    
    
key:=KeyToAction(GetKeyClicked);    
    if (
key GA_LEFTthen if (Step(1y)) then begin x:=x-1p:=trueSetCell(xy1); end;
    if (
key GA_RIGHTthen if (Step(1y)) then begin x:=x+1p:=trueSetCell(xy1);  end;
    if (
key GA_UPthen if (Step(x1)) then begin y:=y-1p:=trueSetCell(xy1);  end;    
    if (
key GA_DOWNthen if (Step(x1)) then begin y:=y+1p:=trueSetCell(xy1);  end;
    
Delay(50);
end;    
End
Вот скриншот из игры:

Нажмите на изображение для увеличения
Название: s6.png
Просмотров: 1243
Размер:	18.2 Кб
ID:	14837

Как видите, всего 50 строк кода, а готова практически уже законченная игра.
На досуге попытайтесь расширить эту игру введя в неё несколько уровней или попробуйте добавить расчет каждого алмаза или валуна на падение (то есть после каждого шага героя пробегаетесь по массиву клеток и если под валуном или алмазом пустая клетка, то сдвигаете этот валун/алмаз вниз).
Вложения
Тип файла: zip Mappy.zip (446.4 Кб, 963 просмотров)
Тип файла: zip Lib_arcade.zip (3.0 Кб, 942 просмотров)
Тип файла: zip ArcadeDemo.zip (11.8 Кб, 881 просмотров)

Последний раз редактировалось ViNT, 17.09.2011 в 00:52.
(Offline)
 
Ответить с цитированием
Эти 20 пользователя(ей) сказали Спасибо odd за это полезное сообщение:
Amigo888 (06.01.2012), aNNiMON (17.02.2010), cherepets (24.01.2010), dess (25.01.2010), Horror (25.01.2010), Hurrit (24.01.2010), impersonalis (25.01.2010), im_zorg (24.01.2010), Kalter (15.01.2014), LLI.T.A.L.K.E.R. (01.02.2010), Mig-29 (18.02.2010), NetBuilding (26.08.2010), Nex (27.01.2010), Phantom (24.01.2010), Randomize (30.01.2010), Reks888 (24.01.2010), Romanzes (24.01.2010), scimitar (24.01.2010), Trazzy (24.01.2010), Yadro (17.07.2012)