Kids
November 16, 2018

[Мини-проект] Испытание #1. Создание раскраски

О чем проект

Все ребята и даже многие взрослые любят раскраски! Води виртуальной кистью по листу, меняй цвета, стирай, твори, заполняй картинку красивыми цветами. У раскрасок очень простой функционал, так что это - отличный проект, чтобы потренировать твои навыки разработки!

Для создания раскраски тебе понадобятся навыки работы с инструментами Перо (Pen Tool) и канвой (Canvas), то есть нужно уметь рисовать с помощью команд, отслеживать положение мыши и заполнять линии цветом.

Помни, это - не урок, а испытание! Здесь не будет готовых инструкций. Их ты можешь найти самостоятельно в интернете. Просто начни делать и разбирайся по ходу. Удачи!

В чем делать

Подойдет для всех конструкторов, игровых движков и некоторых языков программирования.

Вот некоторые из них:

Scratch | Construct2 | GameMaker | GameSalad | Unity | Cocos2D | Phaser (JS) | PyGame (Python) | LOVE (Lua)

Что делать

Создай свою версию раскраски на какую-либо тему (машины, космос, животные, супергерои, принцессы, майнкрафт, монстры, школа, мультфильмы, любые другие).

Вот какие функции могут быть в твоем проекте:

  • рисование кистью;
  • смена толщины кисти;
  • смена цвета кисти;
  • выбор картинки для раскрашивания;
  • выбор фигурной кисти (например, в форме цветка, шерсти, травы, облаков, чешуи);
  • заливка цветом;
  • сохранение готовой картинки;
  • ластик;
  • приятная фоновая музыка;
  • твой вариант.

Как это может выглядеть

Пример 1. Сделан в Scratch. Нажми на зеленый флаг, чтобы запустить проект. Двигай ползунки с толщиной кисти и формой, чтобы поменять их.

Пример 2. Сделан в Construct2. Для создания понадобится установка плагина для работы с пером (Pen Tool) и канвой (Canvas).

Как делать

Шаг 1. Изучи примеры выше. Изучать работы других нужно обязательно. Посмотри, что в них хорошего, какие идеи можно позаимствовать, а что ты бы сделал лучше или по-другому.


Шаг 2. Возьми лист бумаги и набросай примерный интерфейс твоей раскраски. То есть, как будет выглядеть каждый экран. Экран выбора картинки. Экран самой раскраски - где будут располагаться цвета, какого они будут размера и формы, где будут кисти, ластик, их параметры и сама картинка.


Шаг 3. Подбери в интернете или нарисуй самостоятельно картинки для раскрашивания. Искать можно по ключевым словам, например: "машины раскраска", "животные скетч" или "фрукты набросок". Сохрани несколько картинок себе на компьютер.


Шаг 4. Продумай, а лучше запиши на листе бумаге логику твоего проекта. Ее можно записывать не на языке программирования, а обычными словами по такой схеме:

Когда событие происходит? Какое событие происходит? Какие у этого события параметры? 

Например:

Перо начинает рисовать, когда нажата левая кнопка мыши. 
Когда я щелкаю мышью на синюю краску, перо изменяет цвет на синий.
Когда я нажимаю кнопку "Очистить", все следы краски с картинки удаляются.

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


Шаг 5. Приступай к реализации. Возьми свои наброски с экранами интерфейса и делай проект в соответствии с ними. Заметь, на этом этапе не важна красивая графика. Важно, чтобы все работало, а графику всегда можно поменять позже.


Шаг 6. Замени черновую графику на аккуратные иллюстрации, кнопки, иконки. Это повысит качество проекта.


Шаг 7. Залей свой проект на хостинг, запиши с него видео или сделай скриншоты и приложи ссылки в комментариях к этому испытанию! Обязательно напиши, на каком движке ты его делал.

Level Up

Как можно улучшить твой проект? Вот несколько идей:

  • добавь больше красок;
  • добавь разные формы кисти;
  • добавь больше картинок для раскрашивания;
  • сделай обложку с названием и кнопкой старта.

Справился с этим испытанием? Нам не терпится увидеть, на что еще ты способен! Возвращайся на страницу с заданиями и выбирай еще одно!


<< Ко всем испытаниям