Вие се борите със скука и сърбеж, за да използвате творчеството си. Искате да изградите нещо, нещо визуално впечатляващо, нещо артистично. Или може би искате да научите програмиране и да направите нещо впечатляващо възможно най-скоро. Ако е така, тогава езикът за обработка е пътят.

Сред всички програмни езици, с които съм работил досега, Processing без съмнение беше един от най-забавните. Това е ясен език - лесен за научаване, разбиране и използване, но е много мощен. Почти сякаш рисувате върху празно платно с редове код. Няма твърди правила или насоки, които да ограничават творчеството ви, единственото ограничение е вашето въображение.

В колежа бях асистент по преподаване на програма, която събираше ученици от гимназията и ги учех на Обработка. Повечето от тях не са имали силен опит в програмирането, някои дори не са написали нито един ред код преди. Само за пет дни се очакваше да научат езика и да изградят свои собствени прости игри. Успеваемостта беше почти сто процента, рядко се сблъсквахме с неуспех. В тази статия ще направим точно това. Свих цялата програма на две части. Първа част, ще говоря за езика. Ще дам основен преглед, стъпка за обработка и ще дам няколко съвета и трикове. След това в следващата част ще изградим проста игра стъпка по стъпка, всяка стъпка ще бъде обяснена подробно. Също така ще преобразувам кода на играта в JavaScript използвайки p5js, за да може нашата игра да работи в уеб браузър.

Какво трябва да знаете вече

За да разберете и лесно да следвате тези статии, трябва да имате основни познания по програмиране, тъй като няма да говоря за основите на програмирането. Най-вече няма да се докосвам до някакви усъвършенствани концепции за програмиране, така че ще има повърхностно разбиране. Има някои части, в които говоря за някои идеи и концепции от ниско ниво, като обектно-ориентирано програмиране (ООП), но те не са от решаващо значение. Те са за любопитни читатели, които се интересуват от структурата на езика. Ако не искате да знаете, можете просто да пропуснете тези части. Освен това, единственото нещо, което трябва да имате, е амбицията да научите този страхотен език и ентусиазъм да създадете своя собствена игра!

Как да следвате

Винаги съм за ученето на програмиране чрез опити и експерименти. Колкото по-рано се потопите в собствената си игра, толкова по-бързо ще се почувствате комфортно с обработката. Така че това ще бъде първото ми предложение, опитайте всяка стъпка в собствената си среда. Обработката има прост и лесен за използване IDE (т.е. редактор на код), това е единственото нещо, което ще трябва да изтеглите и инсталирате, за да следвате. Можете да го изтеглите оттук .

Така че нека да започнем!

Какво представлява обработващият език?

Този раздел включва кратък технически преглед на езика, неговата структура и някои бележки за процеса на компилиране и изпълнение. Подробностите ще включват някои разширени познания по програмиране и Java среда. Ако засега нямате нищо против подробностите и нямате търпение да научите и кодирате собствената си игра, можете да преминете към раздела „Основи на обработката“.

Обработката е визуален език за програмиране, който ви позволява да скицирате с кодове, така да се каже. Въпреки това той не е точно език за програмиране сам по себе си, той е това, което те наричат ​​'Java-esque' език за програмиране, което означава, че езикът е изграден върху Java платформата, но не е точно Java сам по себе си. Той се основава на Java и целият ви код се обработва предварително и се преобразува директно в Java код, когато натиснете бутона за изпълнение. Класът PApplet на Java е базовият клас за всички обработващи скици. За да дадем пример, нека вземем няколко основни блока за обработка на код:

public void setup() { // setup codes goes here } public void draw() { // draw codes goes here }

Тези кодови блокове ще бъдат преобразувани в нещо подобно:

public class ExampleFrame extends Frame { public ExampleFrame() { super('Embedded PApplet'); setLayout(new BorderLayout()); PApplet embed = new Embedded(); add(embed, BorderLayout.CENTER); embed.init(); } } public class Embedded extends PApplet { public void setup() { // setup codes goes here } public void draw() { // draw codes goes here } }

Можете да видите, че блокът на кода за обработка е обвит с клас, който се простира от Java-приложенията на Java. Следователно всички класове, които дефинирате в кода си за обработка, ако има такива, ще бъдат третирани като вътрешни класове.

Фактът, че обработката е базирана на Java, ни дава много предимства, особено ако сте Java разработчик . Синтаксисът не само е познат, но също така ви дава възможност да правите неща като вграждане на Java код, библиотеки, JAR файлове във вашите скици, използване на вашите обработващи аплети директно във вашите Java приложения, дефиниране на класове и използване на стандартни типове данни като int , float, char и така нататък. Можете дори да напишете вашия код за обработка директно от Eclipse, ако искате прекарайте малко време за да го настроите. Едно нещо, което не можете да направите, е да използвате AWT или Swing компоненти във вашите скици за обработка, защото те противоречат на цикличния характер на обработката. Но не се притеснявайте, ние няма да правим нищо от тези изискани неща в тази статия.

Основи на обработката

Кодът за обработка се състои от две основни части, настройвам и рисувам блокове. Блокът за настройка се изпълнява веднъж, когато кодът се изпълнява, а блоковете за теглене се изпълняват непрекъснато. Основната идея за обработка е, това, което напишете в блока за теглене, ще бъде изпълнено 60 пъти в секунда отгоре надолу, докато програмата ви приключи . Ще изградим всичко, като се възползваме от тази идея. Ще накараме нашите обекти да се движат, да запазим резултатите си, да открием сблъсъци, да приложим гравитация и да направим почти всичко останало, използвайки тази функция. Този цикъл за опресняване е сърцето на нашия проект . Ще обясня как да използвате този сърдечен ритъм, за да оживите кода си в следващите раздели. Първо, позволете ми да ви запозная с IDE за обработка.

Обработка на IDE

Ако сте чели до този момент и все още не сте изтеглили IDE за обработка, моля, продължете и направи го . В цялата статия ще очертая няколко лесни задачи, които можете да опитате сами, можете да практикувате само ако IDE е стартиран и работи. Ето кратко въведение в обработващата IDE. Това е много просто и обяснимо, така че ще го съкратя.

Както очаквате, бутоните за изпълнение и спиране правят това, което предлагат. Когато щракнете върху бягай бутон, вашият код ще бъде компилиран и изпълнен. По природа програмите за обработка никога не се прекратяват, те работят вечно и винаги, докато не бъдат обезпокоени. Можете да го прекратите програмно, но ако не го направите, можете да използвате Спри се бутон.

Бутонът, който прилича на пеперуда вдясно от run & stop е дебъгер . Използването на дебъгера се нуждае от цяла друга статия, посветена на него. Той е извън обхвата на тази статия, така че засега можете да го игнорирате. Падащото меню до бутона за отстраняване на грешки е мястото, където добавяте / задавате модове. Модове предоставят ви определена функционалност, позволяват ви да пишете код за Android, позволявате ви да пишете код на Python и т.н. и т.н. Модовете също са извън обхвата, така че можете да го запазите в Java режим по подразбиране и да го игнорирате.

Прозорецът на редактора на кодове е мястото, където обикновено се изпълняват вашите скици. В изображението то е празно, защото не сме задали никакви свойства като размер или цвят на фона или не сме нарисували нищо.

Няма какво много да се говори за редактора на кода, просто там, където пишете кода си. Има номера на редове (!) По-старите версии на Processing нямаха това и не можете да си представите колко бях щастлив, когато ги видях за първи път.

Черната кутия отдолу е конзола . Ще го използваме за разпечатване на неща за целите на бързото отстраняване на грешки. The грешки раздел до конзолата е мястото, където ще се появят грешките ви. Това е и нова полезна функция, която идва с Processing 3.0. В по-старите версии грешките се отпечатваха на конзолата и беше трудно да се проследят.

Блок за настройка

Както беше посочено по-горе, инсталационните блокове се изпълняват веднъж, когато програмата стартира. Можете да го използвате за създаване на конфигурации и за неща, които искате да стартирате само веднъж, например за зареждане на изображения или звуци. Ето примерния блок за настройка. Изпълнете този код в собствената си среда и вижте резултатите сами.

public void setup() { // Size of our sketch will be 800x600, // and use the P2D rendering engine. size(800, 600, P2D); // We could have used this function instead of size() // fullScreen(P2D); // The background color of our sketch will be black // by default, unless specified otherwise background(0); // We could have used this to set a background image. // Note that size of our sketch should be the same as the image. // background(loadImage('test.jpg')); // Shapes and objects will be filled with red by default, // unless specified otherwise. fill(255,0,0); // Shaped and objects will have a white border by default, // unless specified otherwise. stroke(255); }

Методите, свързани със стила (фон, запълване, щрих) ще бъдат обяснени в раздела за свойства и настройки. Засега това, което трябва да знаете, е как настройките и конфигурациите, които задаваме тук, влияят на цялата ни скица. Кодовете, написани тук, се използват за задаване на някои базови набори от правила, приложими по време на скицата. Това, което също трябва да разберете в този раздел, са изброените по-долу методи:

размер () - Както подсказва името, тази функция се използва за конфигуриране на размера на нашата скица. Трябва да е в първия ред на блока с кода за настройка. Може да се използва в следните форми:

• размер (ширина, височина);
• размер (ширина, височина, визуализатор);

Стойностите на ширината и височината могат да бъдат дадени в пиксели. Функцията за размер приема трети параметър, визуализатор, който се използва, за да зададе кой механизъм за изобразяване ще използва нашата скица. По подразбиране визуализаторът е зададен на P2D. Наличните визуализатори са P2D (Обработка 2D), P3D (Обработка 3D, трябва да се използва, ако вашите скици ще включват 3D графики) и PDF (2D графики се изчертават директно в PDF файл на Acrobat. Повече информация може да се намери тук ). P2D и P3D визуализаторите използват съвместим с OpenGL графичен хардуер.

цял екран() - От Processing 3.0 вместо функцията size () вече може да се използва функция fullScreen. Подобно на функцията size (), тя също трябва да бъде в първия ред на блока за настройка. Използването е както следва:

• цял екран();
• цял екран (дисплей);
• fullScreen (визуализатор);
• fullScreen (дисплей, визуализатор);

Ако го използвате без никакви параметри, вашата скица за обработка просто ще се изпълни на цял екран и ще се изпълни на основния ви дисплей. Параметърът ‘display’ се използва, за да зададете на кой дисплей ще се изпълнява вашата скица. Например, ако свържете външни монитори към вашия компютър, можете да зададете променливата на дисплея на 2 (или 3, 4 и т.н.) и вашата скица ще се изпълни там. Параметърът „renderer“ е както е обяснено в горната част на size ().

Блокиране на настройките

Това е друга функция, която е въведена с новата версия на Processing. Това е кодов блок, точно като настройка и рисуване. Полезно е, когато искате да дефинирате методи size () или fullScreen () с променливи параметри. Също така е необходимо да дефинирате size () и други свойства за стилизиране като smooth () в този кодов блок, ако използвате друга среда, различна от собствената IDE на Processing, като Eclipse. Но в повечето случаи няма да имате нужда от него, определено не в тази статия.

Изчертайте блок

Няма какво специално да се говори за тегленето, но всичко е специално за него. Block Draw е мястото, където се случва цялата магия. Това е сърцето на вашата програма, която бие 60 пъти в секунда. Този кодов блок съдържа цялата ви логика на кода. Всички ваши форми, предмети и т.н. ще бъдат написани тук.

По-голямата част от кода, за който ще говорим в тази статия, ще бъде от блока за теглене, така че е важно ясно да разберете как работи този кодов блок. За да ви демонстрирам, ето нещо, което можете да опитате. Първо обърнете внимание, че можем да отпечатаме всичко на конзолата с помощта на печат () или println () методи. Методите за печат отпечатват само в конзолата, println обаче отпечатва и добавя нов ред в края, така че всеки println () ще се отпечатва в отделни редове.

Така че, разгледайте следния кодов блок. Първо, опитайте се да познаете какво ще отпечата в конзолата. След това продължете и изпробвайте:

void setup(){ } void draw(){ int x = 0; x += 1; print(x+' '); }

Ако предположихте „1 2 3 4…“, имам ви! Това е едно от объркванията при обработката. Не забравяйте, че този блок се изпълнява многократно? Когато дефинирате променлива тук, тя се определя за всеки цикъл отново и отново. При всяка итерация x се задава на 0, увеличава се с 1 и се отпечатва в конзолата. Следователно получаваме резултата „1 1 1 1…“. Този пример беше донякъде очевиден, но може да е объркващ, когато нещата се усложнят малко.

Не искаме x да бъде презаписано, така че как можем да постигнем това и да получим резултата „1 2 3 4 ...“? Като се използва глобални променливи . Това не е нищо фантастично, ние дефинираме променливата само извън блока за теглене, за да не се предефинира при всяка итерация. Също така, обхватът на променливата ще бъде достъпен през цялата скица. Вижте кода по-долу:

int x = 0; void setup(){ } void draw(){ x += 1; print(x+' '); }

Може би се питате как може да работи променлива, дефинирана извън нашите блокове? И защо не използвахме блока setup (), след като той се изпълнява веднъж в началото? Отговорът е свързан с обектно-ориентирано програмиране и обхвати, ако не сте запознати, можете да пропуснете този параграф. Обърнете се към частта, в която обясних как обработващият код се преобразува в Java. Помните ли как се увиват с клас Java? Променливите, които пишем извън блока setup () и draw (), също се увиват, следователно те се третират като полета от външния клас, който обгръща нашия код. Използването на x + = 1 е същото като използването на this.x + = 1. Той също така функционира по същия начин в нашия случай, в обхвата на draw () не е дефинирана променлива, наречена x, и се търси външен обхват, който е обхватът на това . И защо не дефинирахме нашата променлива x в раздела setup ()? Ако го направихме, обхватът, за който е дефиниран x, ще бъде обхватът на функцията за настройка и няма да бъде достъпен от блока draw ().

Рисуване на форми и текстове

Сега знаем как да конфигурираме нашата скица с помощта на блока за настройка и знаем какво прави блокът за изтегляне. Така че е време да се запознаете малко и да научите за забавните части на обработката: как да рисувате фигури.

Преди да започнем, трябва да разберете координатна система . При обработката вие определяте координатите на всеки обект, който изчертаете на екрана. Координатната система е в пиксели. Началото (т.е. началната точка) е горният ляв ъгъл, трябва да дадете координатите си спрямо тази точка. Друго нещо, което трябва да знаете, е, че всяка фигура има различна отправна точка. Например, rect () има горния ляв ъгъл като отправна точка. За елипса () това е центърът. Тези референтни точки могат да бъдат променени с методи като rectMode () и ellipseMode (), които ще обясня в раздела за свойства и настройки. Представена е примерна фигура, която ще ви помогне да разберете по-добре.

Тази статия е основен преглед на обработката, така че няма да докосваме сложни фигури като върхове или триизмерни фигури. Основните 2D форми всъщност ще ни бъдат повече от достатъчни, за да създадем своя собствена игра. На фигурата можете да видите примери за това как се рисуват фигури. Всяка фигура има свой собствен синтаксис, който трябва да бъде създаден, но основната идея е да се дадат или нейните координати, или нейните размери, или и двете. Ето някои форми, с които трябва да сте запознати (за всички стойности, дадени по-долу, „x“ и „y“ означава координати x и y в пиксели, „w“ и „h“ означава стойности на ширина и височина също в пиксели):

точка() - Обикновена точка, има нужда само от една координата. Употреба:

• точка (x, y)
• точка (x, y, z) - В случай, че използвате 3 измерения.

ред () - За създаване на линия. Можете да създадете линия само с начална и крайна точка. Употреба:

• линия (x1, y1, x2, y2)
• линия (x1, y1, z1, x2, y2, z2) - В случай, че използвате 3 измерения.

триъгълник () - За създаване на триъгълник. Употреба: триъгълник (x1, y1, x2, y2, x3, y3)

четворка () - За създаване на четириъгълник. Употреба: четворка (x1, y1, x2, y2, x3, y3, x4, y4)

rect () - За създаване на правоъгълник. Базовата точка е горният ляв ъгъл по подразбиране (вижте фигурата). Ето използването:

• правоъгълник (x, y, w, h)
• rect (x, y, w, h, r) - „r“ означава радиус в пиксели, за да се закръглят ъглите.
• rect (x, y, w, h, tl, tr, br, bl) - Радиус съответно горе вляво, горе вдясно, долу вдясно, долу вляво. Това също е в пиксели.

елипса () - За създаване на форма на елипса. Това се използва и за създаване на кръг, трябва да бъдат дадени същите стойности на ширина и височина. Референтната точка за тази фигура е центърът по подразбиране (вижте фигурата). Ето използването:

• елипса (x, y, w, h)

дъга() - Начертайте дъга. Употреба:

• дъга (x, y, w, h, старт, стоп) - „старт“ и „стоп“ се използва за определяне на ъгъла за стартиране и спиране на чертането на дъгата. Стойностите са в радиани. Могат да се използват константи като „PI, HALF_PI, QUARTER_PI и TWO_PI“.
• arc (x, y, w, h, start, stop, mode) - променливата ‘mode’ е да определи стила на изобразяване на дъгата (низ). Наличните опции са „ОТВОРЕН, ХОРД, ПИТО“. OPEN ще остави нечертаните части без полета. CHORD ще допълни нечертаните части с контур. PIE ще направи дъгата ви да изглежда като кръгова диаграма.

Показването на текстове на екрана е подобно на показването на фигури, основната идея е да определите координата, при която искате да се показва вашият текст. Има обаче още неща за работа с текстове. Ще имате по-голям контрол върху текстовете си след раздела за свойства и настройки, където ще научите как да прилагате настройки и свойства към обекти. Засега ще покажа основите на показването на текстове. Има много начини да го направите, ще покажа само най-важното.

текст() - Показване на текстове. Употреба:

• текст (c, x, y) - „c“ означава символ, ще се покаже всеки буквено-цифров знак.
• текст (c, x, y, z) - В случай, че работите с 3 измерения.
• text (str, x, y) - „str“ е низът, който трябва да се покаже.
• текст (str, x, y, z) - В случай, че работите с 3 измерения.
• текст (num, x, y) - „num“ е числовата стойност, която трябва да се покаже.
• текст (num, x, y, z) - В случай, че работите с 3 измерения.

Свойства и настройки

Първото нещо, което трябва да бъде обяснено в този раздел, би било логиката зад задаването на свойствата на обектите. Цвят на запълване, цвят на фона, контур, ширина на контура, цвят на контура, подравняване на фигурите, стилове на контури и т.н. могат да бъдат някои примери за тези свойства.

Когато задавате свойство, трябва да запомните, че кодът ще се изпълнява от отгоре надолу . Да речем, вие задавате свойството “fill” на червено, всички обекти, изчертани под този ред, ще бъдат пълни с червено, докато не бъде заменено от друго свойство за запълване. Същото се отнася и за други свойства, но имайте предвид, че не всички свойства ще се презапишат. Например свойството “stroke” не замества свойството “fill”, вместо това те работят заедно. Ето визуално представяне, за да разберете логиката:

Както можете да видите на изображението, първият ред задава цвета на запълването на червен, а вторият ред задава цвета на щриха на синьо. Сега имаме две активни настройки: запълване на червени и сини щрихи. Както очаквахте, какъвто и да е нашият обект на следващия ред, той ще бъде изпълнен с червено и със сини щрихи (ако е приложимо). Можете да продължите да разглеждате изображението по този начин и ще схванете логиката.

Ето някои основни свойства и настройки, които често се използват:

Настройки за стилизиране

запълване () - Задава цвета на запълване на обекти. Тази настройка се използва и за оцветяване на текстове. Засега трябва да знаем само следното използване:

• fill (r, g, b) - Червени, зелени и сини стойности като цяло число
• fill (r, g, b, a) - Допълнителна алфа стойност, макс. е 255

noFill () - Задава цвета на запълване на прозрачен.

удар() - Задава цвета на щриха към обектите. Свойството Stroke е приложимо за линии и граници около обекти. Засега трябва да знаем само следното използване:

• ход (r, g, b) - червени, зелени и сини стойности като цяло число.
• ход (r, g, b, a) - Допълнителна алфа стойност, макс. 255

noStroke () - Премахва удара.

инсулт Тегло () - Задава ширината на хода. Употреба:

• strokeWeight (x) - x е цяло число и представлява ширината на хода в пиксели.

заден план() - Задава цвета на фона. Засега трябва да знаем само следното използване:

• фон (r, g, b) - червени, зелени и сини стойности като цяло число.
• фон (r, g, b, a) - Допълнителна алфа стойност, макс. е 255

Настройки за подравняване

ellipseMode () - Задава къде да се вземе като отправна точка подравняване на елипси. Употреба:

• ellipseMode (mode) - „mode“ е параметърът, ето наличните параметри:
  • CENTER (по подразбиране): Вземете центъра като отправна точка.
  • РАДИУС: Това също приема центъра за референтна точка, но в този режим стойностите w и h, които сте посочили, се третират като половината (т.е. радиус вместо диаметър)
  • ЪГЪЛ: Взема горния ляв ъгъл като отправна точка.
  • CORNERS: Задава първите два параметъра (x и y) като местоположение на горния ляв ъгъл, а последните два параметъра (w и h) като местоположение на долния ляв ъгъл на елипсата. Така че този режим, „ширина“ и „височина“ е без значение. Мисленето за елипса (x_tl, y_tl, x_br, y_br) има по-голям смисъл в този случай.

rectMode () - Задава къде да се вземе като отправна точка правоъгълници за подравняване. Употреба:

• rectMode (mode) - „mode“ е параметърът, ето наличните параметри:
  • ЦЕНТЪР: Вземете центъра като отправна точка.
  • РАДИУС: Това също приема центъра като референтна точка, но в този режим стойностите w и h, които сте посочили, се третират като половината
  • ЪГЪЛ (по подразбиране): Взема горния ляв ъгъл като отправна точка.
  • CORNERS: Задава първите два параметъра (x и y) като местоположение на горния ляв ъгъл, а последните два параметъра (w и h) като местоположение на долния ляв ъгъл на елипсата. Така че този режим, „ширина“ и „височина“ е без значение. Мисленето за това като rect (x_tl, y_tl, x_br, y_br) има по-голям смисъл в този случай.

Настройки, свързани с текста

размер на текста() - Задава размера на шрифта на текста. Употреба:

• textSize (size) - Целочислена стойност на желания размер.

textLeading () - Задава височината на реда на вашите текстове. Употреба:

• textLeading (lineheight) - Пикселна стойност на интервала между редовете.

textAlign () - Задава къде да се вземе като отправна точка за подравняване на текстове. Употреба.

• textAlign (alignX) - „alignX“ е за хоризонтално подравняване. Налично: НАЛЯВО, ЦЕНТЪР, ДЯСНО
• textAlign (alignX, alignY) - „alignY“ е за вертикално подравняване. Налични: ТОП, ДОЛНО, ЦЕНТЪР, БАЗОВА.

Анимации

Досега научихме как да рисуваме предмети и текстове. Но проблемът с тях е, че са статични. Сега как да ги накараме да се движат? Просто, вместо да даваме координати като цели числа, използваме променливи, за да можем да ги увеличаваме / намаляваме . Има смисъл? Разгледайте следния код:

// initialize x and y as 0 int x=0; int y=0; void setup(){ size(800,600); background(255); // set background color to white } void draw(){ fill(255,0,0); // fill color red stroke(0,0,255); // stroke color blue ellipseMode(CENTER); // ref. point to ellipse is its center ellipse(x, y, 20, 20); // draw the ellipse // increment x and y x+=5; y+=5; }

Виждате ли как се справихме с анимацията? Задаваме x и y като глобални променливи и първоначалната им стойност на 0. В нашия цикъл на теглене създадохме нашата елипса, зададохме цвета на запълване на червено, цвета на щриха на синьо и координатите на x и y. Когато увеличим x и y, топката просто променя местоположението си. Но има проблем с този код, можете ли да го забележите? Като лесно предизвикателство за себе си, опитайте се да разберете какъв е проблемът и го изпробвайте. Ето резултата:

Намерението ми да позволя това да се случи е да ви накарам да разберете как действа цикличният характер на обработката. Обърнете се към примера в раздела „Draw Block“, помните ли защо получихме „1 1 1…“ вместо „1 2 3…“? Същата причина, поради която топката оставя следи след себе си. Всеки път, когато блокът за теглене се повтаря, x и y се увеличават с 5 и следователно топката се прерисува до 5 пиксела надолу и вдясно. Въпреки това топката е изтеглена от предишните повторения остават в изгледа. Как да ги накараме да си отидат? Някакви предположения?

За да се отървем от следите, които топката оставя след себе си, ние просто премахваме фона (255) от блока за настройка и го поставяме, за да бъде първият ред на блока за теглене. Когато нашият фонов код беше в блока за настройка, той се изпълни веднъж в началото, правейки фона ни бял. Но това не е достатъчно, ние се нуждаем от него, за да зададем фона на бял на всеки цикъл, за да покрием топките, изтеглени от предишните бримки. Фонът, който е първият ред, означава, че се изпълнява първи, той се превръща в основен слой. На всеки цикъл нашето платно е боядисано в бяло и върху белия фон се изчертават нови елементи. Така че нямаме белези.

Това е идеята за анимиране на нещата в Обработката, манипулиране на координатите на обектите програмно, за да се промени местоположението им. Но как ще правим изискани неща, като например да държим топката на екрана? Или може би прилагане на гравитацията? Ще науча как да правя тези неща в следващата част на тази статия. Ще се учим, опитвайки се и изграждайки. Ще се научим как да го направим и веднага ще ги приложим към нашата игра. Накрая ще имаме цялостна, изпълнима и надяваме се забавна игра.

Взаимодействие с клавиатура и мишка

Взаимодействията на клавиатурата и мишката в Обработката са много лесни и ясни. Има методи, които можете да извикате за всяко събитие и това, което пишете вътре, ще бъде изпълнено веднъж, когато се случи събитието. Също така има глобални променливи като mousePress и keyPress, които можете да използвате в своя блок за теглене, за да се възползвате от цикъла. Ето някои от методите с обяснения:

void setup() { size(500, 500); } void draw() { if (mousePressed) { // Codes here will be executed as long as the mouse // button is pressed if (mouseButton == LEFT){ // This lines will be executed as long as // the clicked mouse button is the left mouse // button. } } if (keyPressed) { // Codes here will be executed as long as a key // on the keyboard is pressed if (key == CODED) { // This if statement checks if the pressed key // is recognised by Processing. if (keyCode == ENTER) { // This lines will be executed if the pressed key // is the enter key. } } else{ // This lines will be executed if the pressed key // is not recognised by processing. } } } void mousePressed() { // These codes will be executed once, when mouse // is clicked. Note that mouseButton variable is // also be used here. } void keyPressed() { // These codes will be executed once, when a key // is pressed. Note that key and keyCode variables // are also usable here. }

Както можете да видите, доста лесно е да проверите дали мишката е щракната или кой клавиш се натиска. Има обаче повече опции за променливите на mousePress и keyCode. Налични опции за mousePress са НАЛЯВО, НАДЯСНО и ЦЕНТЪР. Има много повече налични за keyCode ; НАГОРЕ, НАДОЛУ, НАЛЯВО, НАДЯСНО, ALT, КОНТРОЛ, SHIFT, BACKSPACE, TAB, ENTER, RETURN, ESC и DELETE.

Едно нещо, което трябва да знаете за променливите на мишката, и ние ще използваме това много, е как да получим координатите на мишката. За да получим точните координати на курсора, можем да използваме mouseX и мишка променливи директно в блока draw (). Не на последно място, има много други полезни методи, които трябва да разгледате. Всички те са документирани в Обработка на справка .

Заключение

Вече трябва да се запознаете с Обработката. Ако обаче спрете до тук, всички тези знания ще го направят летя далеч. Силно ви препоръчвам да продължите да практикувате, да играете с наученото. За да ви помогна да тренирате, ще ви осигуря две упражнения. Трябва да се постараете да направите това сами. Ако заседнеш, Google и Обработка на справка трябва да са най-добрите ви приятели. Ще дам кода за първия, но разглеждането им трябва да е последното нещо, което правите.

Препоръчително упражнение 1

Трябва да направиш 4 топки с различни цветове , започвайки от 4 ъгъла на екрана пътуване през центъра с различни скорости . Когато щракнете и задържите бутона на мишката, топките трябва замръзване . И когато пуснете мишката, топките могат да се върнат в първоначалното си положение и да продължат да се движат. И така, търся нещо подобно това .

какво прави node js

След като опитате сами упражнението, можете да проверите кода тук .

Препоръчително упражнение 2

Спомнете си известното DVD скрийнсейвър което логото на DVD отскача около екрана и всички отчаяно чакахме то да се удари в ъгъла? Искам да копирате този скрийнсейвър, но само с помощта на правоъгълник вместо логото на DVD. Когато стартирате приложението, екранът трябва да е черен, а правоъгълникът да започне на произволно място. Всеки път, когато правоъгълникът удари ъгъла, той трябва да промени цвета си (и очевидно посоката). Когато премествате мишката, правоъгълникът трябва да изчезне и цветът на фона да стане бял (това е скрийнсейвър, нали?). Няма да давам кода за това упражнение в тази статия. Трябва да се постараете да го приложите и кодът ще бъде предоставен във втората част на тази статия.

Втората част от крайното ръководство за обработка, урок стъпка по стъпка за изграждане на проста игра, е публикувана.