Курс Arduino - Processing

Processing

Хотелось ли вам сделать свою игру? А управлять собственной игрой с собственного джойстика?

Если да, то вы по адресу!

Что такое Processing? 

Processing – это язык программирования, основанный на Java. С помощью него легко можно “оживить” показания датчиков, а из скучных цифр устроить красочную анимацию.

Кстати, Arduino IDE написана на Processing.

Я не буду рассказывать об основах Processing. Если станет интересно – на сайте processing.org есть обучающие видео от Даниэля Шиффмана. Одна загвоздка – они на английском. Если языковой барьер мешает изучать Processing, то можно поискать в интернете обучающие видео. На helloprocessing.ru есть перевод уроков Шиффмана к часу кода.

Поехали!

Так как Processing не предназначен для создания игр, от сложных проектов придется отказаться.

А вот небольшую игру из 90ых накодить –  пожалуйста.

Этой игрой будет Арканоид. Если кто не помнит или не знает, Арканоид – это игра, цель которой сбить шариком все кирпичи сверху и при этом не дать мячу упасть ниже платформы.

Управлять платформой мы будем с джойстика. А играть будем на экране компьютера.
Примечание: В одном из последующих уроков джойстик станет беспроводным.

Начнем с необходимых сегодня компонентов. Их немного:

• Arduino UNO – для считывания показаний с джойстика и передачи их в Processing через Serial port.
• Модуль Джойстик – для управления платформой.
• Компьютер с установленными Arduino IDE и Processing .

Схема джойстика

• Vcc – подключается к выводу в 5V
• VER или X – подключается к A0
• HOR или Y – подключается к А1
• SEL или SW – подключается к 2
• Gnd – подключается к земле

Готовый джойстик

Сейчас нужно подумать, как же связать Arduino и компьютер. Для этого и существует Serial port. Помните – мы использовали Serial monitor в Arduino IDE для просмотра показаний с датчиков? Теперь с помощью передачи данных с джойстика в Serial мы сможем управлять платформой. Осталось разобраться с тем, каким образом мы будем это делать.

Алгоритм

• Джойстик – пишем код на Arduino IDE, с помощью которого считываем показания с джойстика.
• Serial – отправляем показания джойстика в Processing с помощью Serial.
• Processing – обрабатываем поступившие показания и пишем код игры на Processing.

Джойстик и Serial

Открываем Arduino IDE и пишем код.

#define axisX A0 //Ось Х джойстика, отвечающая за движение вверх и вниз
#define axisY A1 //Ось Y джойстика, отвечающая за движение влево и вправо
#define buttion 2 //Кнопка на джойстике

void setup() 
{
  //Обозначим оси как выходы...
  pinMode(axisX, INPUT);
  pinMode(axisY, INPUT);
  //... а кнопку как выход с подтягивающим резистором
  pinMode(buttion, INPUT_PULLUP);
  //Установим соединение с Serial портом
  Serial.begin(9600);
}

void loop()
{
 //Переменные для передачи данных
 int Y = analogRead(axisY);
 int X = analogRead(axisX);
 int B = digitalRead(buttion);
 
//Протокол передачи данных
 Serial.print(Y);
 Serial.print(",");
 Serial.print(X);
 Serial.print(",");
 Serial.println(B);
}

Протокол?

Возможности Serial port ограничены передачей только одного показания, а показаний то у нас целых три – ось Х, ось Y и кнопка. Для этого и нужны протоколы связи. Что такое протокол?

Когда мы общаемся друг с другом, мы знаем, что говорим на одном языке и знаем, что значит каждое слово. Если встретятся два человека из разных стран, то они не будут понимать друг друга, так как не знают одного языка.

Так и с устройствами. Они не могут понимать друг друга без протокола связи. Он устанавливает правила общения между устройствами и позволяет им понимать друг друга. Если хочется более полного и “мудреного” объяснения загляните в Википедию.

Вернемся к скетчу. Данные с джойстика отправляются в виде: 

ОсьY, ОсьX, Кнопка *Переход на другую строку*

Это и есть наш протокол. Осталось научить Processing его распознавать.

Processing

Теперь нужно открыть Processing.

Начнем с “дешифровки” нашего протокола.

Код

//Импортируем библиотеку для работы с Serial monitor

import processing.serial.*;

//Создаем объект класса Serial

Serial myPort; 

//Создаем переменные для полученных показаний

int reset, axisX, axisY;

//Создаем переменную для размера шрифта

int fontSize = 36;

void setup()
{
  //Определяем размер окна
  
  size(480, 480);
  
  //Выводим список COM портов и берем тот,
  //к которому подключен микроконтроллер
  //У Windows обычно 1 порт, а у MAC - 0
  
  println(Serial.list()) ;
  String portName = Serial.list()[1];
  
  //Открываем последовательный порт
  
  myPort = new Serial(this, portName, 9600);
  
  //Считываем приходящие данные, пока не дойдем до символа 
  //перевода строки
  
  myPort.bufferUntil('\n');
}
 //Этот метод вызывается тогда, когда в буффер пришло
 //значение перевода строки

void serialEvent(Serial myPort)
{
  //Считываем данные из буффера
  
  String inputString = myPort.readStringUntil('\n');
  
  //Отбрасываем ненужные символы(возврат каретки и перевод строки)
  
  inputString = trim(inputString);
  
  //Разделяем полученную строку по запятым и задаем переменным
  //нужные значения
  
  int axises[] = int(split(inputString, ','));
  if(axises.length == 3)
  {
    axisY = axises[0];
    axisX = axises[1];
    reset = axises[2];  
  }
}

//Этот метод рисует показания датчиков на экране
//В процессе дешифровки протокола участия не принимает

void draw()
{ 
 //Задаем цвет фона в кодировке rgb или html, если не задать - будет черный
 
 background(#044f6f); 
 
 //Задаем цвет заполнения в кодировке rgb или html, если не задать - будт белый
 
 fill (#ffffff);
 
 //Создаем шрифт - его размер, стиль
 
 PFont myFont = createFont(PFont.list () [2], fontSize);
 
 //Задаем шрифт
 
 textFont(myFont);
 
 //Выводим показания датчиков на экран
 
 text(axisY, width / 2, height/ 2);
 text(axisX, width / 2, height / 2 + 40);
 text(reset, width / 2, height / 2 - 40);
}

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

Игра

Теперь можно начинать делать игру. Так как код достаточно большой, я не буду писать его. Код можно найти в прикрепленных файлах под именем  Game.pde.

Пояснения

Структура игры состоит из методов или функций, которые взаимодействуя друг с другом, создают игру. А метод draw выводит на экран картинку производимых действий.

Так как Processing не предназначен для создания игр, в нем нет функции о соприкосновении объектов друг с другом, поэтому пришлось определять момент столкновения по координатам, что несколько сложнее.

Каждое действие должно подлежать описанию, а для того чтобы определить действия используются переменные, которые меняют свое значение в соответствии с выполняемым сейчас действием. К примеру – при запуске игры значение переменной start равно нулю, в это время на экране мы видим надпись “Press the button!”, а при нажатии кнопки, значение переменной  start становится равным единице и начинается игра.

Итог

Ура! Получился Арканоид V1.0. Я собираюсь дальше улучшать его и привести к канонам настоящего Арканоида с бонусами и уровнями, с кирпичами и блоками.

Геймплей Арканоида можно посмотреть на видео.

Как вторая версия будет готова, обязательно поделюсь, а пока – можно двигаться дальше.

Теги:

• Микроконтроллер
• Arduino