Главная » 2D графика » Изометрия – 2,5 мерное пространство

RSS

Изометрия – 2,5 мерное пространство

Не нравитсяНравится   Рейтинг +6

Для наглядности приведу 2 картинки :

При наложении образуется уже нормальная картинка. Для удобства я написал класс TIFlur смотрите файл IMap.pas. Все практически тоже, что и у TFlur :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
type TIFlur= class
private
  Resource:TImageList;// Ресурсы графики
public
  Width,Heigth:Integer;// Ширина и высота карты
  Map:PTable; // Массив карты развернутый в список
  Constructor Create(Const X,Y:integer);// ширина, высота карты
  Procedure LoadResource(FileName:String); // путь к BMP ресурсу
  Procedure RandomGenerator; // случайное заполнение Table
  Procedure Draw(DestCanvas:TCanvas;SourceRect:TRect);
  // Canvas для вывода,
  // SourceRect - какой кусок карты Table выводить на экран, В КОЛ_ВАХ СПРАЙТОВ
  Destructor Destroy;override;
end;

Так, только необходимые процедуры, ничего лишнего.
Пожалуй, самое сложное это определить координаты клетки где находится мышь. Ведь координаты курсора у нас X и Y, а в карте все ячейки распологаются со сдвигами. Но тут нас выручат маски. Для начала создадим такую маску :

Получим координаты мыши и целочисленным делением получим координаты клетки где находится курсор ( так мы поступали при простом виде сверху ):

1
2
3
I:=(X div SpriteWidth)*2; для четных
I:=(X div SpriteWidth)*2-1; для нечетных, а Y везде одинаковый :
J:=Y div SpriteHeigth;

На рисунке эти координаты 2.0

По такой не слабой формуле мы вычисляем, куда конкретно попал курсор в пределах одной маски :

1
2
dX:=SpriteWidth*(Frac(X/SpriteWidth));
dY:=SpriteHeigth*(Frac(Y/SpriteHeigth));

Это остато от деления умножается на ширину или высоту маски. Соответственно эти переменные ВСЕГДА лежат в пределах dX (0-60) и dY (0-30). С помощью этих координат мы можем определить цвет куда тыркнулась мышка и по цвету задать смещение. Приведу целиком тело этой процедуры.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
procedure FormMouseMove(Sender: TObject; Shift: TShiftState; X,Y: Integer);
var
  dX,dY:Real;
  I,J:integer;
begin
  case Odd(Screen.Left) of
    False: begin
             I:=(X div SpriteWidth)*2;
           end;
    True: begin
             X:=X+30;
             I:=(X div SpriteWidth)*2-1;
          end;
  end;
  J:=Y div SpriteHeigth;
 
  CursorX:=I;
  CursorY:=J;
 
  dX:=SpriteWidth*(Frac(X/SpriteWidth));
  dY:=SpriteHeigth*(Frac(Y/SpriteHeigth));
 
  case Mask.Canvas.Pixels[Trunc(dx),Trunc(dy)] of
    clRed: begin // Красный
             CursorX:=I-1;
             CursorY:=J-1;
           end;
    clBlue: begin // Синий
              CursorX:=I+1;
              CursorY:=J-1;
            end;
    clLime: begin // зеленый
              CursorX:=I-1;
            end;
    clYellow: begin // Желтый
                CursorX:=I+1;
              end;
  end;

Теперь при перемещении мыши по экрану, мы сразу можем определить реальные координаты карты. Они на рисунке обозначены черным цветом 3.0 Для компиляции исходника потребуется компонент THeadedTimer, который находится вместе с исходником. Для чего он нужен/не нежен читайте в Создание карты в игре, методом спрайтов Там же Вы узнаете как избежать «дрожания» курсора.

Изометрия в играх

Теперь пару слов о способах задания объектов для карты. Каждый движущийся объект будет иметь по 2 переменные на каждую координату. Допустим первые X и Y координаты в системе карты. А вторые 2 dX и dY пиксельные координаты. Т.е. персонаж ходит по координатам dX и dY, а взаимодействует с картой по координатам X и Y.

Хотя все это условно и все зависит от Вас. В скором времени я добавлю анимированный спрайт на карту и пару объектов. Все качаем исходник тут.

Пример изометрического движка

Страницы : 1 2