Как создать свой кликер в ВК

Приветствую! Многие начинающие разработчики Unity всегда начинают своё обучение с каких-либо простых вещей. И поэтому я решил показать пример создания максимально простого кликера.

Делать кликер мы будем всего с помощью двух UI элементов.

• Кнопка, при нажатии на которую, будет увеличиваться наш счётчик.
• Текст, в котором будет отображаться наш счётчик, то-есть суммарное количество наших кликов по кнопке.

Давайте их создадим. Но перед этим создадим игровой объект canvas, ведь ни один элемент UI не может существовать без канваса. Для этого ПКМ жмём на любое ПУСТОЕ место в окне Hierarchy. Дале выбираем UI — Canvas.

После созданного канваса, по такому же принципу создаём ещё 2 объекта, которые нам непосредственно понадобятся для нашего кликера:

• Жмём ПМК —> UI — Legacy — Button
• Жмём ПМК —> UI — Legacy — Text

Далее с помощью окна Inspector настраиваем свой канвас, кнопку и текст как Вам удобно. У меня получилось как-то так:

ДОХОД С ИГРЫ спустя 2 МЕСЯЦА & Обновление КЛИКЕРА | Unity, Gamedev, Реклама

50% кликера сделано. Осталось чуть чуть.

Теперь перейдём к созданию C# скрипта при помощи вкладки Project, и назовём его, например, clicker. Впишем в него следующий C# код:

using UnityEngine; using UnityEngine.UI; public class clicker : MonoBehaviour < private int num; public Text textNum; public void addNum() < num++; textNum.text = num.ToString(); >>

Давайте разберём, что мы тут сделали:

Поскольку мы будем работать с UI элементами(кнопками и текстом), то в строке №2 мы добавили специальную библиотеку: using UnityEngine.UI;

Далее в строке 6 и 7 мы создаём две переменные. В переменной num храним информацию о количестве кликов. А в переменной textNum будем хранить ссылку на уже нами созданный текстовый элемент UI, чтобы в дальнейшем туда записывать количество наших кликов из переменной num.

В строке №9 мы создали функцию addNum(), которая увеличивает наш счётчик num на +1, и в ледующей же строке, конвертирует наше число num, в текст, и записывает этот текст в textNum.text.

На этом всё, счётчик готов. Как видите он очень простой. Единственное что осталось сделать, это связать наши объекты с данным скриптом. Для этого необходимо выполнить 4 простых действия, которые указаны на картинке:

• (1) — перетаскиваем наш скрипт clicker в окно Inspector, для объекта Button(кнопки)
• (2) Перетаскиваем объект Text(наш счётчик) в поле Text Num
• (3) Перетаскиваем объект Button(кнопку) в событие On Click
• (4) Указываем наш скрипт, в котором имеется наша функция: clicker -> addNum()

Как Сделать Игру Без Программирования

На этом всё. Надеюсь я максимально подробно объяснил принцип работы счётчика. Если у меня это получилось, буду рад вашим лайкам 🙂

Источник: unityhub.ru

Создание простой кликер-игры с нуля

2019-10-04 в 9:38, admin , рубрики: adobe flash, adobe illustrator, C#, unity, Дизайн игр, игра с нуля, кликер, простая игра на юнити, создание игр для android, юнити

В последние несколько лет набирают большую популярность игры такого жанра, как «кликеры». Мне самому очень интересно играть в них, но не менее интересно создавать игру — кликер самому. Благодаря такому движку как Unity, создать свой шедевр не составит труда даже простому новичку. Давайте перейдем к делу.

Что нужно сделать?

1. Подумать, почему и на что мы должны кликать?
2. Что должно произойти, когда мы кликнем?
3. Что должно произойти, если не кликнем?

1. Мы должны кликать в любое место на экране.
2. При клике должен смениться объект.
3. При игнорировании — проигрыш.

О чем будет игра?

Игроку нужно вовремя выбрать либо меч, либо щит, в зависимости от того, что будет падать сверху. То есть, падает меч — выбираем меч, падает щит — выбираем щит. При неправильном выборе игрок просто проиграет. На словах всё довольно просто, а в реализации еще проще.

Откуда мне новичку брать красивый спрайт и фон? Ответ: нарисовать самому.

Тут нет ничего сложного, так как мы рисуем в Adobe Illustrator. Даже если у вас нет опыта в рисовании, то опять же не расстраиваемся, так как я покажу вам всё по деталям.

1. Меч
2. Щит
3. Задний фон
4. Ветка с листьями

1. Рисуем контур
2. Заливаем цветами
3. Рисуем тени

И всё, наш меч готов!

Также проделываем и с другими. Не пугайтесь, если в начале одно ваше творение покажется вам далек от идеала, ведь в совокупности они будут смотреться, как картина Ван Гога. Шутка. А может и нет.

Задний фон сделаем еще хитрее.

Нарисуем зеленый прямоугольник и используем градиент. Выглядит вот так:

Можно сказать, что уроки художества на этом закончены и мы наконец идем в Unity.

В первую очередь закинем наши спрайты, а меч и щит перетащим в окно иерархии, так как нам нужно будет создать из них префабы и не только.

1. Добавляем Rigidbody 2D и установим значение “0” в поле Gravity Scale, чтобы щит стоял на одном месте.
2. Добавим Circle Collider 2D и установим галочку в Is Trigger, чтобы отслеживать действия.

С префабом те же действия, только нужно установить значение “1” в поле Gravity Scale, чтобы щит падал вниз. И перетаскиваем его в папку Prefabs. С мечом те же действия. Готово!

Далее украсим игру спрайтами, нарисованными ранее. Первым делом кидаем фон.

1. Размещаем ветки сверху
2. Добавим снизу бревно
3. Посередине разместим мост

Основной секрет дизайна такой: сверху и снизу разместим ветки, а у лесенки уменьшим значение прозрачности. Зачем это делать?

Дело в том, что таким образом мы создаем некую иллюзию пространства. Игроку будет казаться, что есть передний объект, задний и горизонт. И это классно!

Теперь создадим кнопку, которая будет занимать весь экран. Чтобы создать кнопку нужно в иерархии нажать на UI -> Button. Далее:

1. Нажимаем на Color.
2. Устанавливаем значение «0» в поле А, которая отвечает за прозрачность нашей кнопки.
3. Убеждаемся, что кнопка стала такой, какой мы хотели.

Таким же путем создаем текст, чтобы показывать наш текущий счет и рекорд.

И наконец, мы дошли и до программирования.

using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.SceneManagement; using UnityEngine.UI; public class MainScript : MonoBehaviour < public GameObject[] prefabs; //массив префабов public GameObject[] players; //массив объектов public static int score,record,n,k = 0; //счёт, рекорд, «n,k» — счетчики public Text scoreT; //текст на экране void Start() < score = 0; Time.timeScale = 1; StartCoroutine (PrefabsCreate ()); scoreT = scoreT.GetComponent(); record = PlayerPrefs.GetInt («Record»); > void Update() < n = Random.Range (0, prefabs.Length); // генерация случайных чисел //от 0 до кол-ва префабов scoreT.text = score + «/» + record; // вывод счета и рекорда if (score >= record) < record = score; PlayerPrefs.SetInt («Record», record); // сохранение рекорда >> IEnumerator PrefabsCreate() < // создание случайного префаба while (true) < Instantiate (prefabs [n], new Vector2 (0, 6.5f), Quaternion.identity); yield return new WaitForSeconds (0.5f); >> public void BtnClick(string btn)< // метод для кнопок if(btn == «Click»)< Time.timeScale = 1; players [k].SetActive (false); // отключаем активный объект(меч, щит. ) k++; if (k >= prefabs.Length) < k = 0; // обнуляем счетчик, если k превышает кол-во префабов >players [k].SetActive (true); // активируем объект (меч, щит. ) > > >
using System.Collections; using System.Collections.Generic; using UnityEngine; public class PlayerScript : MonoBehaviour < void OnTriggerEnter2D(Collider2D other)else < MainScript.score++; Destroy (other.gameObject);// уничтожение префаба >> >

Что творится в этих методах?

Start (). Он запускается каждый раз, когда мы запускаем игру или же перезапускаем сцену. Всё что прописано внутри этого метода выполняется только один раз. Поэтому мы туда записываем: счет равный нулю, запуск корутины (то, что отвечает за создание префабов), значение времени.

Update (). Выполняется раз за кадр. Сюда удобно записать то, что постоянно должно обновляться. В нашем случае: показатель счета и рекорда, рандомное значение n от которого зависит что создастся – меч или щит.

BtnClick (). Вы спросите, почему перед этим методом стоит «public»? Нам необходимо, чтобы он отражался в самом Unity и мы могли прописать слово «Click», чтобы отследить, на какую именно кнопку мы нажимаем, хотя и кнопка всего одна, знать чуточку больше никому не помешает.

Сюда запишем то, что должно произойти после нажатия на кнопку. При нажатии должно меняться с меча на щит и наоборот, устанавливать значение времени «1», так как при проигрыше она обнуляется.

OnTriggerEnter2D (). Проверяет столкновение объекта. Если теги обеих объектов совпадает, то счет увеличивается на единицу, а префаб уничтожается. Если теги разные, то проигрыш – останавливается время и обнуляется счет.

Осталось добавить эти самые теги. И тут всё очень просто:

1. В окне Inspector нажимаем на Tag.
2. В выпавшем списке в самом низу нажимаем на Add Tag.
3. Жмем на плюсик и называем тег как хотим.

После создания также нажимаем на Tag и выбираем нужный.

Осталось перенести скрипты нужным объектам и заполнить некоторые поля. Создадим пустой объект и добавим скрипт «Main Script», а «Player Script» добавим в наш меч и щит.

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

Всем добра и удачи в геймдеве!

Источник: www.pvsm.ru

Fishka (IT-направление)

На экране в случайном месте появляется прямоугольная область – регион. Кликнув по ней мышкой, игрок получает +1 очко, а прямоугольная область перемещается в новое случайное место. У игрока есть 20 секунд чтобы успеть набрать наибольшее количество очков.

Видео с готовым результатом

Ход работы

1. Создание и подготовка проекта.

1.1. Создайте в вашей папке с сайтами новую папку «canvas-clicker» и в ней создайте такую структуру файлов и папок:
canvas-clicker
—js
—-script.js
—css
—-style.css
—index.html

Файл со стилями style.css
body, html <
margin:0;
width: 100%;
height: 100%;
background-color: #2d2d2d;
>

Файл со скриптами script.js
var canvas = document.getElementById(«canvas-main»);

canvas.width = window.innerWidth; // ширина холста занимает всю ширину экрана
canvas.height = window.innerHeight; // высота холста занимает всю высоту экрана

var WIDTH = canvas.width;
var HEIGHT = canvas.height;

var ctx = canvas.getContext(‘2d’);

2. Понятие игрового цикла

В работе с canvas мы используем анимацию. Для того, чтобы что-то изменилось на холсте, необходимо проводить такой цикл:
1) очистить весь холст
2) отрисовать объекты в их координатах
И делать это столько раз в секунду, чтобы человеку казалось это плавным. Например, базово это можно делать 25 кадров в секунду (то есть, с интервалом в 1000/25 = 40 миллисекунд).
2.1. Напишем игровой цикл в конце программы:
var ctx = canvas.getContext(‘2d’);

3. Добавление объекта – региона.

3.1. Для создания региона будем использовать функцию-конструктор
var ctx = canvas.getContext(‘2d’);

// Объявляем переменные, характеризующие свойства региона – координаты и размеры
var regionX,regionY,regionW,regionH;
function createRegion() <
regionX = Math.random()*WIDTH;
regionY = Math.random()*HEIGHT;
regionW = 20;
regionH = 20;
>
// Сразу же вызываем эту функцию
createRegion();

3.2. Напишем функцию для отрисовки региона и будем вызывать её в игровом цикле.

createRegion();

function update() <
// Очищаем холст
ctx.clearRect(0,0,WIDTH,HEIGHT);

// Отрисовываем прямоугольник
ctx.fillStyle=»green»;
ctx.fillRect(regionX,regionY,regionW,regionH);
>

setInterval(function() <
update();
>,40);

3.3. Запустите index.html и пообновляйте её несколько раз. Если всё было написано без ошибок, то вы увидите небольшой прямоугольник зелёного цвета, который каждый раз появляется в новых координатах.

4. Программируем событие нажатия мышки

setInterval(function() <
update();
>,40);

5. Добавление очков за клик по региону

5.1. Сейчас у нас за клики ничего не даётся. Негоже. Пора добавить очки. Вначале игры они равны нулю:
var ctx = canvas.getContext(‘2d’);

5.2. При каждом удачном клике по региону будем увеличивать очки на 1.
if(mouseY>=regionY mouseY <=regionY+regionH) <
createRegion();
score = score + 1;
>

5.3. Набранные очки хранятся в памяти, но было бы круто вывести их на экран, не так ли? Всё, что мы выводим, прописываем в функции update. Дополним эту функцию.
function update() <
// Очищаем холст
ctx.clearRect(0,0,WIDTH,HEIGHT);

// Отрисовываем прямоугольник
ctx.fillStyle=»green»;
ctx.fillRect(regionX,regionY,regionW,regionH);

// Выводим количество очков
ctx.font = «20px Arial»
ctx.fillStyle=»white»;
ctx.fillText(score,30,40);
>

6. Добавление таймера

6.1. Чтобы ограничить время игры и увеличить её интересность, добавим таймер. Объявим переменную, которая будет хранить количество времени.
var ctx = canvas.getContext(‘2d’);

var score = 0;
var time = 0;

6.2. Теперь рассмотрим, каким образом можно увеличивать таймер. Мы сделали так, чтобы игровой цикл повторялся каждые 40 миллисекунд – это 25 кадров в секунду. Найдите место в коде, где это прописано. Идея в том, что если нам нужно что-то повторять с какой-нибудь периодичностью, мы можем это делать каждые N кадров.

Например, если нам что-то нужно повторять каждые 3 секунды (например, генерировать врагов или пищу в игре), то мы проверяем, прошло ли 75 кадров (25 кадров * 3 секунды = 75).
С таймером увеличение будет каждые 25 кадров. Для проверки, прошло ли 25 кадров мы используем операцию остатка от деления на это количество кадров
// Объявляем переменную с кадрами, вначале их 0
var frames = 0;
setInterval(function() <
frames++; // увеличиваем количество кадров на 1
if(frames%25==0) < // Если прошло 25 кадров, то
time = time + 1;
>
update();
>,40);

6.3. Как и со счётом, нам нужно выводить время на экран. Сделайте это самостоятельно.

7. Финал игры

Добавим ограничение в 20 секунд. Если проходит 20 секунд, то на экран выведется количество набранных очков и игра окончится (кликать больше будет нельзя)
7.1. Добавим функцию проверки времени. Если время закончится, будем выводить alert (это пока что).
function checkTime() <
if(time>=10) <
alert(«Game over! You have » + score + » scores!»);
>
>
Вызываем эту функцию в игровом цикле:
if(frames%25==0) <
time = time + 1; // Увеличили время
checkTime(); // Проверили, не закончилось ли оно
>

7.2. Рассмотрим два состояния игры:
1) игра не окончена (на экране регион, на который можно кликать, увеличиваются очки и время)
2) игра окончена (больше очки не добавляются, на экране надпись об окончании игры)

За эти состояния будет отвечать переменная булева переменная isGameOver, которая вначале будет равной false, а в момент, когда время выйдет, сделаем её true.

var score = 0;
var time = 0;
var isGameOver = false;

7.3. Теперь поправим код с учётом этих двух состояний – игровой цикл будет увеличивать фреймы и осуществлять перерисовку только если игра не окончена.

Источник: fishka-it.blogspot.com