forum.boolean.name - Lib_arcade - Аркадные игры это просто

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

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

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

Вложение 14832

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

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

Вложение 14833

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

Вложение 14834

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

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

Вложение 14835

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

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

Вложение 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 очков. Вот исходный код (кому впадлу набирать, можете скачать его ниже):

PHP код:




Program ArcadeDemo; 
Uses arcade; 
Var    x, y, score, key: integer; 
        p: boolean; 
 
Procedure DrawAll; 
begin 
    SetColor(0, 0, 0); 
    FillRect(0, 0, GetWidth, GetHeight); // Очистка экрана 
    CenterCell(x, y); // Центрируем карту относительно главного героя 
    DrawMap; // Отрисовываем карту 
    DrawSprite(0); // Отрисовываем героя 
    NextFrame(0); // Следующий кадр для героя 
    SetColor(255, 255, 255);  
    DrawText('SCORE: ' + score, 3, 3); // Рисуем количество очков 
    Repaint; 
    p:=false; // Сброс флага отрисовки 
end; 
 
Function Step(dx: integer; dy: integer): boolean; // Тут у нас проверка можно ли ходить в эту клетку 
begin 
    Step:=true; 
    if ((dx < 1) or (dy < 1) or (dx > 23) or (dy > 23)) then Step:=false; 
    else 
    begin 
        if (GetCell(dx, dy) > 3) then Step:=false; 
    end; 
    if (GetCell(dx, dy) = 3) then score:=score+100; // Если это алмаз, то прибавляем очки 
end; 
 
Begin 
    NewMap(24, 24, LoadImage('/s1.png'), 40, 40); // Создаем новую карту 
    LoadCSV('/1.CSV'); // Загружаем файл с картой 
    x:=1; y:=1; // Начальные координаты героя 
    score:=0; // Очки пока равны нулю 
    AddSprite(LoadImage('/hero.png'), 40, 40); // Загрузка спрайтов главного героя 
    SpritePosition(0, GetWidth/2- 20, GetHeight/2- 20); // Устанавливаем позицию куда выводить спрайт 
    p:=true; // Это флаг того нужна ли перерисовка экрана 
     
While(true) do // Бесконечный цикл 
begin 
    if (p) then DrawAll;     
    key:=KeyToAction(GetKeyClicked);     
    if (key = GA_LEFT) then if (Step(x - 1, y)) then begin x:=x-1; p:=true; SetCell(x, y, 1); end; 
    if (key = GA_RIGHT) then if (Step(x + 1, y)) then begin x:=x+1; p:=true; SetCell(x, y, 1);  end; 
    if (key = GA_UP) then if (Step(x, y - 1)) then begin y:=y-1; p:=true; SetCell(x, y, 1);  end;     
    if (key = GA_DOWN) then if (Step(x, y + 1)) then begin y:=y+1; p:=true; SetCell(x, y, 1);  end; 
    Delay(50); 
end;     
End.

Вот скриншот из игры:

Вложение 14837

Как видите, всего 50 строк кода, а готова практически уже законченная игра.
На досуге попытайтесь расширить эту игру введя в неё несколько уровней или попробуйте добавить расчет каждого алмаза или валуна на падение (то есть после каждого шага героя пробегаетесь по массиву клеток и если под валуном или алмазом пустая клетка, то сдвигаете этот валун/алмаз вниз).