Предыдущие части: Расстановка объектов, Инициализация, Функции и библиотеки, Проектирование
После завершения четвёртой части у меня есть готовое состояние игры: поле 22*22, заполненное стенами, роботами, препятствиями и игроком.
Мне нужно отобразить всю эту информацию на экране каким-то способом.
Я решил, что буду рисовать графику. Для начала – просто цветные прямоугольники, но ничто не помешает мне улучшить это в будущем. Пока достаточно видеть игровое поле и то, как протекает игра.
Каким образом программа может нарисовать что-то на экране? Это крайне просто в своей основе. Кроме обычной памяти, у компьютера есть видеопамять. И у этой видеопамяти есть свои адреса. Если в какой-то адрес видеопамяти записать какое-то число, то в каком-то месте экрана появится пиксел какого-то цвета.
Но эти времена давно прошли. Сейчас прямой доступ к видеопамяти закрыт от нас многими слоями абстракций. Например, когда мы запускаем программу, на экране появляется окно, у которого есть заголовок и кнопки "закрыть" и "свернуть". А ведь наша программа не рисовала это окно и не программировала эти кнопки – и тем не менее это всё появилось на экране. Это всё сделали операционная система и графическая библиотека языка, на котором мы пишем.
Так что в наше время графику нужно понимать так: программа работает в некой среде, созданной для неё внешними силами. Чтобы нарисовать что-то на экране, программа должна попросить у этой среды: дайте мне что-нибудь, на чём я могу рисовать.
И среда выдаст программе "холст" для рисования. К этому холсту прилагаются готовые функции-инструменты. Вы можете нарисовать точку, линию, квадрат, круг. Или готовую картинку. Набор функций, их возможности и правила использования зависят от того, какая среда и какой конкретно холст вам выдала.
Я постараюсь очень кратко рассказать, откуда берется холст в JavaScript и Python, но увы, там слишком много отвлекающей информации, поэтому придется потерпеть.
Итак, средой для выполнения JavaScript является HTML-документ в браузере. То есть нужно сначала создать документ на языке HTML, поместить в него JavaScript и открыть его браузером. Я написал минимальный HTML-код, который содержит единственный нужный мне элемент: <canvas>.
Это и есть тот самый холст, на котором я буду рисовать. Но он пока доступен только в HTML.
У элемента <canvas> должен быть указан атрибут id. Именно по id я найду его из JavaScript. Также у него указаны атрибуты width и height, это ширина и высота в пикселах. Я назначил им значение 400.
Чтобы заполучить canvas себе в JavaScript, нужно запросить его следующим образом:
var my_canvas = document.getElementById('canvas');
document – это объект, который представляет документ в браузере и является моей средой. Он уже существует, и у него есть функция getElementById для поиска HTML-элементов. Я запрашиваю у него:
"Эй, document, у тебя там в HTML-коде должен быть элемент с id='canvas', дай мне доступ к нему."
Документ (смотрит в HTML-код):
"Ага, вот элемент, у которого id='canvas', забирай"
И вот уже у меня в переменной my_canvas записана ссылка на внутренний объект <canvas> из HTML-кода. У этого объекта есть различные свойства и функции, и теперь я имею к ним доступ. Например,
my_canvas.width – это ширина холста
my_canvas.height – это высота холста
Но чтобы начать рисовать, нужно получить еще контекст для рисования. У объекта my_canvas есть два контекста: для рисования обычной 2D-графики, и для рисования 3D-графики. Мне нужен контекст 2D, и запрашиваю я его следующим образом:
var ctx = my_canvas.getContext('2d');
Всё! Я наконец-то могу рисовать, используя функции-инструменты, имеющиеся в этом контексте. Финальный вариант HTML+JS кода:
Что происходит в Python?
Там есть свои библиотеки для рисования, причем их несколько. Я посмотрел пару и они мне категорически не понравились по причинам, которые сейчас долго объяснять. В результате я остановился на библиотеке, которая называется pygame. Она спроектирована специально для игр и методы рисования графики в ней довольно похожи на те же из JavaScript, что мне в данном примере и требуется.
Чтобы можно было использовать её в Python, её требуется для начала установить, что я сделал с помощью утилиты pip в командной строке:
> pip install pygame
А затем, чтобы моя программа про неё знала, нужно импортировать её в начале программы
import pygame
А чтобы получить себе холст, на котором уже можно рисовать, надо выполнить:
pygame.init()
ctx = pygame.display.set_mode((400, 400))
Всё! Наконец-то я могу начать рисовать! Финальный вариант кода:
В следующем выпуске я напишу функцию для рисования игрового поля одного квадрата.
Читайте дальше: Чёрный квадрат
