ria pc game
fle game engine - движок для создания игр
fle game engine - движок для создания игр


Balls and holes PC game / Balls and Holes PC игра
Вакансии
Игродельня
Сегодня
22 февраля 2019 15:22
Вход Регистрация Забыли пароль ?

megainformatic - статья Тимонина Андрея - Регистрация. Часть 1. Создаем страничку регистрации на сайте.
[к содержанию] [другие статьи Тимонина Андрея] Регистрация. Часть 1. Создаем страничку регистрации на сайте. автор: Тимонин Андрей дата публикации на сайте Мега Информатик: 18.
подробнее...

Теги создание сайтов, создание игр, дизайн, игры, информатика, уроки photshop, php, c++, музыка, delphi, cms, робосайт
Статьи сайта
megainformatic - Что нужно знать для создания сайта ? float - использование в css - стилях

megainformatic - Уроки Fruity Loops Studio (FL Studio) - урок 2 - пишем свою композицию COLD

megainformatic - Уроки Fruity Loops Studio (FL Studio) - урок 3 - экспериментируем с композицией COLD

megainformatic - Что нужно знать для создания сайта ? Стандартные шрифты для сайта

megainformatic - Что нужно знать для создания сайта ? ASC II Коды символов

megainformatic - Уроки Fruity Loops Studio (FL Studio) - урок 4 - пишем первый вариант композиции COLD

megainformatic - Популяризация Современных Научных Знаний и Размышления на околонаучные темы. СОДЕРЖАНИЕ

megainformatic - Популяризация Современных Научных Знаний и Размышления на околонаучные темы. Энергетический кокон

megainformatic - Модуль галерей для любой cms

megainformatic - Портфолио выполненных проектов сайтов и приложений

megainformatic - Мои Музыкальные Миры - страница 2

megainformatic - megainformatic cms rs

megainformatic - модуль Падающий снег

megainformatic - проект Open Shop

megainformatic - Рисуем красивую девушку всего за 6 шагов

megainformatic - Галерея красивых рисованных девушек

megainformatic - НОВОГОДНЕЕ ОБРАЩЕНИЕ СОЗДАТЕЛЯ webinformatic К ЖИТЕЛЯМ ПЛАНЕТЫ интернет

megainformatic - Отзывы оставленные пользователями как впечатление о проделанной работе или что-либо понравившееся на сайте

megainformatic - Уроки css - атрибут position

megainformatic - Ива Ден энд КуХа - КОДЕКС ФРИЛАНСЕРА - СОДЕРЖАНИЕ

megainformatic - Ива Ден энд КуХа - КОДЕКС ФРИЛАНСЕРА - Глава 1 - Обычный день

megainformatic - Ива Ден энд КуХа - КОДЕКС ФРИЛАНСЕРА - Глава 2 - Начало (begin)

Новогодняя дискотека 2013 на megainformatic точка ru

megainformatic - Программируем на C++ с использованием MFC

megainformatic - Программируем на C++ с использованием MFC - Создание MFC приложения

megainformatic - Программируем на C++ с использованием MFC - Создание MFC приложения - hello, world !

megainformatic - Как создать игру ? - Пишем игровой движок с нуля

megainformatic - Как создать игру ? - Пишем игровой движок с нуля - Вступление

megainformatic - Как создать игру ? - Пишем игровой движок с нуля - Общая структура будущего игрового движка

Разное

megainformatic - Как создать игру ? - Пишем игровой движок с нуля - DXUTMainLoop - цикл работы DirectX-приложения

megainformatic - Варианты макетов Психолог 911

megainformatic - Шаблоны для сайтов - что это и какие они бывают ?

megainformatic - Ива Ден энд КуХа - КОДЕКС ФРИЛАНСЕРА - Глава 3 - Кто он ? (who is ?)

megainformatic - Мои Музыкальные Миры - готовая музыка mp3 - новинки 2013 года

megainformatic - Теория и практика хакерских атак - самозащита от нападения

megainformatic - Теория и практика хакерских атак - самозащита от нападения - Способы подмены реального IP

megainformatic - Fruity Loops Studio 9 - Как синтезировать свои сэмплы - изучаем возможности плагина Sytrus

megainformatic - Видоизменяем тему для Wordpress под свои нужды

megainformatic - Flash приложения и игры - Шаг 3 - управляемый шарик

megainformatic - Учимся создавать флеш-игры, что нужно знать для того, чтобы заняться созданием flash приложений и игр ?

megainformatic - Шаг 4 в освоении Flash-технологий - как анимировать персонажа и управлять им

megainformatic - Форма для смены шаблонов сайта. Модуль template selector

megainformatic - megainformatic cms express files + module slider

megainformatic - Создание сайта бесплатно или под заказ

megainformatic - Как создать flash баннер

megainformatic - Разработка flash-приложения для сайта: онлайн примерочная

megainformatic - Мои впечатления о книге - Владислав Крапивин - Журавленок и Молнии

megainformatic - Модуль отзывов/комментариев для вашего сайта

megainformatic - Модуль отзывов/комментариев для вашего сайта

megainformatic - Модуль отзывов/комментариев для вашего сайта

megainformatic - Модуль короткие ссылки short link

megainformatic - Работа с сокетами fsocket из php

megainformatic - Как создать игру Создание игровых панелей и индикаторов

megainformatic - Приключения Кости Коробкина - Как я провел лето - интерактивный комикс

megainformatic - Приключения Кости Коробкина - Как я провел лето - интерактивный комикс

подробнее

Веселый Буквоежка - онлайн комикс - страница 12

представляем Веселый Буквоежка - онлайн комикс.

Не надо ! Не надо мне мозги пудрить. Вся ваша затея - пуста!

Веселый Буквоежка - онлайн комикс - страница 12

если кликать картинку она будет последовательно меняться в размерах от 620 до 2048 пиксель.

[страница 1]  [страница 2]  [страница 3]  [страница 4]  [страница 5]  [страница 6]  [страница 7]  [страница 8]  [страница 9]  [страница 10]  [страница 11]  [страница 12]  [страница 13]  [страница 14]  [страница 15]  [страница 16]  [страница 17]  [страница 18]  [страница 19]  [страница 20]  [страница 21]  [страница 22]  [страница 23] 

подробнее

Пишем свою соц. сеть - модуль предложений для webjob - часть реализации для личного кабинета

Доброго времени суток, продолжаем наше погружение в разработку социальной сети.

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

Теперь перейдём к практике, т. е. написанию кода.

Прежде всего добавляем пункт меню в личном кабинете, который будет отвечать за показ раздела ПРЕДЛОЖЕНИЯ.

В модулях всех ролей, например admin.php, employer.php и других прописываем примерно такой код -

case 'predlojenia': {
include_once "predlojenia.php";
break;
}

Также добавляем соответствующий пункт меню в личном кабинете.

<a href="employer.php?rdk=predlojenia">Предложения</a>

Теперь собственно переходим к реализации модуля predlojenia.php для личного кабинета.

Весь код я думаю приводить смысла нет, поэтому ограничусь только общей схемой -

///////////////////////////////////////////////////////////////
//
// функции
//эта часть модуля будет содержать все необходимые функции для внутреннего использования в пределах самого модуля.

//например так -

//элементы управления предложениями
function show_list_ctrl_elems()
{
$view = '<table width="100%" cellpadding="0" cellspacing="0" border="0">';

$view .= '<tr>
<td width="90"> </td>
<td width="90"> </td>
<td> </td>
</tr>';

$view .= '<tr>
<td><input type="submit" name="new" value="Создать"></td>
<td><input type="submit" name="change" value="Изменить"></td>
<td><input type="submit" name="del" value="Удалить"></td>'.
'</tr>';
$view .= '</table>';

return $view;
}

///////////////////////////////////////////////////////////////
//
// исполнение

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


include_once "entry.php"; //подключаем модуль проверки залогиненности в личном кабинете
include_once "predlojenia_outer.php"; //подключаем модуль внешних функций, которые будут использованы и во фронтальной части сайта

echo "<div class='container' style='position: relative; z-index: 1;' align='center'>";

//выводим меню в зависимости от роли
switch ( $role_name )
{
case 'admin': {
include_once "admin_menu.php";
break;
}

case 'employer': {
include_once "roles/employer/menu.php";
break;
}

}

echo "ПРЕДЛОЖИТЬ СВОЙ ПРОЕКТ - ".$role_name."<br><br>

<div style='float: left; width: 100%; position: relative; z-index: 1;'>";

$p_list = load_p_list('../');
$p_list_count = count($p_list);
$p_list_view_tbl = show_p_list_tbl($p_list);

echo "<table width='100%' cellpadding='0' cellspacing='0' border='0' bgcolor='#dddddd'>
<tr>
<td colspan='3'>Добро пожаловать в ".$system_name." !<br>Вы можете создать или изменить свой проект (предложение)<
br><br></td>
</tr>

<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>";

$form_action = '';
$p_properties_page = '';
//echo do_action_with_p_list($form_action, $p_properties_page);

switch ( $form_action )
{
case 'new':
case 'change':
{
echo $p_properties_page;
break;
}

default: {
echo " <form name='".$module."' id='".$module."' action='".$module_name."?module=".$module."' method='post'>";

echo show_list_ctrl_elems();
echo $p_list_view_tbl;

echo " </form>";
}
}

echo "<table width='100%' cellpadding='0' cellspacing='0' border='0' bgcolor='#dddddd'>
<tr>
<td><a href=\"logout.php\">Выйти</a></td>

<td> </td>
<td> </td>
</tr>

</table>
</div>";
echo "
</div>
";

Собственно это был прототип, описывающий все базовые элементы модуля предложений.

Вам остается только детализировать логику выгрузки/загрузки данных в файл или базу данных.

Здесь я их приводить не буду в целях экономии времени.

Но если они Вас интересуют - обращайтесь

Вы уже в курсе, что я могу предложить Вам сразу готовое решение, которое реализовано на сайте -

http://webjob.megainformatic.ru

И все-таки спешу Вас обрадовать - в следующей статье Мы с вами рассмотрим реализацию модуля для хранения предложений в csv-файле.

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

подробнее

Game craft - отображение scv модели в формате x в d3d9-приложении

[все уроки game craft]  [моделируем scv]  [моделируем scv шаг 1 часть 2] [моделируем scv шаг 2 часть 3] [Прорисовка текстуры робота SCV шаг 5]  [экспорт робота scv в формат x] 

В предыдущих уроках мы рассмотрели как моделируется, текстурируется и экспортируется модель. Теперь покажем как выводить данную модель в d3d9-приложении.

Модель робота scv в d3d9 - приложении

Вы можете скачать самораспаковывающийся архив, содержащий весь необходимый исходный код

Для нормальной сборки вам также потребуется среда разработки MSVS 2005 и DirectX SDK August 2008.

Теперь попробуем кратко продокументировать код, который содержит приложение d3d9_skin_mesh

Здесь Мы не преследуем формальную цель подробного и досконального описания всего кода, который содержится в модуле D3DAppTemplate.cpp . С полным исходным кодом Вы можете ознакомиться, скачав его по ссылке выше, откомпилировать и запустить полученное приложение, и убедиться, что оно работает.

Выполнение приложения начинается с вызова метода CD3DAppTemplateApp::CD3DAppTemplateApp()

Далее следует остановиться на вызове метода BOOL CD3DAppTemplateApp::InitInstance(), т. к. внутри него создается и скрывается главное окно приложения -

pMainWindow = new CD3DAppTemplateDlg();
pMainWindow->Create(CD3DAppTemplateDlg::IDD);
pMainWindow->ShowWindow(SW_SHOW);
pMainWindow->ShowWindow(SW_HIDE);

Это делается для того, чтобы внутри процедуры InitialD3DAppSettings новое окно, создаваемое и используемое для целей вывода 3D сцены не перекрывалось с основным и не возникало путаницы. Просто создается иллюзия, что окно 3D сцены и есть основное.

void InitialD3DAppSettings()

//...

DXUTCreateWindow( L"D3D9 App Template", 0, 0, 0);

//...

В этой связи возникает вопрос: А почему окно pMainWindow нельзя использовать для вывода 3D сцены ?

Ответ звучит так: окно pMainWindow - это базовое окно MFC приложения, с которым связаны некоторые ресурсы, но для целей вывода 3D сцены оно не пригодно, т. к. DirectX API предполагает для этого только вновь созданное, отдельное окно. В противном случае обеспечить работу D3D в этом окне не представляется возможным. Поэтому именно такой способ и используется в нашем приложении d3d9_skin_mesh

Нетрудно догадаться, что основная работа по подготовке d3d-приложения к работе описана внутри процедуры InitialD3DAppSettings, а собственно цикл работы приложения описан в DXUTMainLoop и заключается в поочередном вызове сначала процедуры void CALLBACK OnFrameMove( double fTime, float fElapsedTime, void* pUserContext ), а после неё - void CALLBACK OnFrameRender( IDirect3DDevice9* pd3dDevice, double fTime, float fElapsedTime, void* pUserContext ).

У Вас может возникнуть вопрос: Как реализуется обработка управления от клавиатуры и мыши ?

В данном приложении она реализована обычными средствами Windows - через функцию MsgProc - но это будет более медленный способ. В реальном игровом приложении это реализуется посредством вызова специальной функции где-то в самом начале процедуры OnFrameMove. Например в игре Веселый Буквоежка для этой цели используется процедура UpdateInput - внутри которой проверяется какие клавиши или действия мышью были использованы пользователем и в ответ на это вызываются соответствующие процедуры, функции или методы которые привязаны к конкретной клавише или действию мышью. Подробнее об этом можно узнать получив полный исходный код движка Fle, на котором написана игра Веселый Буквоежка. Также будут не бесполезны иструменты разработки на движке Fle - SceneEditor, описание механизма сборки локаций и утилита Coords2D.

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

Итак, двинемся по коду d3d9_skin_mesh дальше. После того как все предварительные действия в приложении осуществлены - это как я уже говорил, описано внутри процедуры InitialD3DAppSettings, вызываются поочередно процедуры void CALLBACK OnFrameMove( double fTime, float fElapsedTime, void* pUserContext ) и void CALLBACK OnFrameRender( IDirect3DDevice9* pd3dDevice, double fTime, float fElapsedTime, void* pUserContext ). Внутри них и надо искать ответ на вопросы - как собственно работает d3d-приложение и каким образом это реализовано ?

Очень полезное умение, которое Вам несомненно пригодится - умение задавать себе вопросы и находить на них ответы в коде. Внутри OnFrameMove Вы увидите, как запоминается предыдущее значение таймера в переменной g_fLastAnimTime, там же есть метод вызова камеры (но она пока не используется), а также методы, которые используются для управления обзором игровой сцены вместо камеры - через g_ArcBall.

В процедуре OnFrameRender формируется изображение игровой сцены - сначала выводятся элементы управления g_SettingsDlg, затем очищается backbuffer (невидимый экран, который как только будет подготовлен будет выведен на экран реальный - чтобы изображение не мерцало отображая как на нём рисуются элементы), задаются параметры для источника света и собственно происходит модель робота SCV - DrawFrame.

Резонные вопросы, которые возникают - где, как и каким образом загружается модель и как она затем отрисовывается ? Нужно добавить, что в приложении d3d9_skin_mesh, которое базируется на коде примера SkinnedMesh из DirectX SDK Aug 2008, реализовано отображение не только статичных, но и анимированных моделей. Так что если загрузить модель, в которой есть скелетная анимация - то модель будет выводиться в движении - циклично воспроизводя имеющуюся в ней анимационную цепочку.

Код, который воспроизводит анимацию - достаточно объёмный и Вы его можете посмотреть сами скачав архив по ссылке выше. Традиционно Мы остановимся только на самых важных деталях.

Внутри процедуры OnCreateDevice происходит загрузка файлов эффектов и файла модели. Обрабатывается иерархия объектов в X файле модели, настраиваются указатели на скелетные матрицы, вычисляется граничная сфера для модели (которая может потом использоваться для проверки столкновения с другими моделями в игровой сцене.

Оставшийся код, Вы можете рассмотреть самостоятельно и лучше это делать путём написания нового приложения, которое бы выполняло определенные задачи. Например не только загружало анимированную модель, но и по нажатию клавиш или кликам мышью, заставляло бы перемещатьтся 3D-модель в игровом пространстве. В последующих наших уроках мы именно этим и займёмся: будем рассматривать поэтапно каждую задачу, возникающую в типичном игровом проекте - на примере нашей игры Game Craft, а также будем моделировать все необходимые для этого модели и делать другие сопутствующие вещи (текстуры, описания, звуки, музыку и др.)

В цикле наших уроков Мы постараемся остановиться на следующих вопросах:

- работа с 3d-камерой;
- перемещение модели в пространстве;
- реализация управления игрой от клавиатуры и мыши;
- создание игровых панелей и реализация простейших операций по управлению игрой через игровую панель;
- создание рельефа земной поверхности и его текстурирование;
- вывод рельефа в игре и перемещение по нему моделей;
- модели игровых ресурсов: минералы, гейзер веспен-газа;
- не-интерактивные игровые объекты, формирующие окружающую среду: деревья, кусты, камни и прочее.
- постройка нового коммандного центра в игре рабочим scv;
- добыча ресурсов рабочими роботами scv;
- создание фоновой музыки и сопутствующих игровых звуков;
- создание редактора игровой сцены;

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

В следующем уроке мы займёмся изучением управления игрой от Direct Input и работой с 3d-камерой в d3d9-приложении работа с 3d-камерой в d3d9-приложении

[все уроки game craft]  [моделируем scv]  [Моделируем робота SCV шаг 1 часть 2]  [Моделируем робота SCV шаг 2 часть 3]  [Прорисовка текстуры робота SCV шаг 5]  [экспорт робота scv в формат x] 

подробнее

     
  [к содержанию] [далее]  
     
 

Методы создания растровых изображений в Adobe Photoshop

(урок № 1)

Рассмотрим реальный пример. Мне требовался автомобиль для компьютерной игры Дорога в Город (Road To City). Я решил создать изображение при помощи программы для работы с растровой графикой – Adobe Photoshop.

Что собой представляют программы для работы с растровой графикой?

Любая программа ориентированная на работу с графикой в первую очередь имеет возможность работы с растровыми изображениями и растровой графикой. Растровое изображение состоит из разноцветных точек – пикселей. Пиксель – составное слово от английских picture и element или pixel. Если Вы вооружитесь самой обычной лупой и поднесете ее к Вашему монитору, то увидите, что изображение на экране состоит из отдельных точек разного цвета. Цветные точки формируются из трех составляющих – R G BRed, Green, Blue – т.е. Красного, Зеленого и Синего. Это связано с принципами формирования цветных изображений в телевизионных приемниках и мониторах. Любое растровое изображение отображается на экране как прямоугольная область, состоящая из отдельных пикселей. Каждый пиксель занимает в памяти определенный объем в зависимости от формата графического файла. Например, файл в формате BMP (Bitmap) с разрядностью пикселей 24 бит хранит каждый пиксель изображения в последовательности из трех байт (1 байт – 8 бит). Причем каждому цветовому компоненту пикселя в данном формате отводится ровно по 1 байту (т.е. по 8 бит). В связи с тем, что 1 байт может принимать значения от 0 до 255 (27), то получаем, что каждый пиксель в файле данного формата может хранить значения цветов от 0 до 255х256х256 , т.е. примерно 16,7 Млн. цветов (оттенков). Это множество цветов является достаточным для построения фотореалистичных изображений. Это же множество (называемое также режимом True Color – реалистичный цвет) используется во всех современных мониторах для отображения на экране.

Программы для работы с растровой графикой позволяют оперировать в каждый момент времени с любой точкой изображения как с отдельным элементом. С одной стороны это дает большую свободу действий, но с другой требует определенных навыков от художника-дизайнера. Так как Вы, скорее всего, сейчас будете рисовать предлагаемый автомобиль используя мышь, то Вам это может показаться несколько сложновато. Но это именно тот недостаток, который служит расплатой за большую свободу действия.

Итак, перед Вами вот такой автомобиль:

 

Окончательный вариант

Контур автомобиля

 

Мы попробуем нарисовать его в Adobe Photoshop. По большому счету неважно какой версией Вы воспользуетесь (6, 7 или 8). Во всех этих версиях Ваши действия по созданию такого автомобиля будут примерно одинаковы.

Если Вы уже запустили программу Adobe Photoshop, то можете приступать, если еще нет, то вот способы, которыми Вы можете воспользоваться, чтобы это сделать:

 

Запуск программы

Запуск программы Adobe Photoshop можно выполнить следующими способами:

- двойным щелчком по ярлыку на рабочем столе;

- через пункт меню (кнопку) Пуск > Программы > Adobe > Photoshop х.0 > Adobe Photoshop х.0;

- через Проводник из папки C:\Program Files\Adobe\Photoshop х.0\ двойным щелчком по файлу Photoshp.exe

 

(примечание: вместо значка х в обозначении Photoshop x.0 стоит обозначение соответствующего номера версии).

 

После успешного старта программы на экране отобразится окно его рабочей среды. Окно имеет вообщем-то, стандартный для любого Windows-приложения вид: строку заголовка, строку меню, панели инструментов и плавающие окна, рабочую область (для работы с изображениями) и строку состояния. Мы не будем подробно останавливаться на описании окна, предполагая, что основное назначение элементов рабочей среды Photoshop Вам известно, но если все же нет, то Вы можете узнать об этом более подробно щелкнув здесь.

 

Отображение необходимых управляющих окон (Инструменты, Настройки, Цвет …) производится через пункт меню Окно (Window), щелчком по соответствующему пункту, например: Показать/Скрыть инструменты – вызывает показ/скрытие панели инструментов.

 

Отображенные управляющие окна являются «плавающими», что позволяет перетаскивать их и удобным образом размещать на экране.

 

Приступим к созданию нашего автомобиля

Создание нового растрового изображения выполняется выбором пункта меню Файл (File) > Новый (New)

-         В открывшемся диалоговом окне Имя (Name) в поле Имя (Name) необходимо задать имя создаваемого файла, например: my_first_image (или race_car)

-         В остальных полях задайте следующие параметры:

Ширина (width) = 40 пикселей

Высота (height) = 70 пикселей

Разрешение (resolution) = 72 пиксель/дюйм

Режим (mode) = RGB Color

 

Содержимое (contents) – т.е. цвет фона пустого изображения

·                 Прозрачный (transparent)

 

После этого щелкните по кнопке ОК

 

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

Разместите его примерно в центре экрана. Сделать это можно перетаскивая окно документа за заголовок.

 

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

 

Увеличение отображаемого масштаба изображения необходимо нам, чтобы точнее

рассмотреть детали изображения – при большом увеличении (более 400%) отдельные точки (пиксели) изображения отображаются в виде квадратиков. Это позволяет рисовать детали мелких изображений Итак, чтобы увеличить масштаб изображения (увеличивается только отображение, а первоначальные размеры 40х70 остаются неизменными!) на панели инструментов выберите инструмент лупа (zoom tool) , а затем переместите курсор в окно вашего изображения и щелкайте на нем до тех пор, пока масштаб не достигнет 800%. После этого измените размеры окна так, чтобы оно полностью отображало редактируемое изображение.

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

Примечание: чтобы уменьшить масштаб изображения нужно выбрать инструмент лупа и удерживая нажатой клавишу Alt щелкать по изображению, пока оно не уменьшится до нужного масштаба. Чтобы быстро увеличить изображение до размеров допускаемых рабочим пространством можно при активном инструменте лупа на панели ее свойств нажать кнопку Fit On Screen (подогнать по размерам экрана).

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

Поскольку левая и правая половинки автомобиля симметричны относительно вертикальной оси, то нам достаточно пока нарисовать только одну половинку, например вот так:

Чтобы Вам было удобнее рисовать увеличивайте масштаб изображения, вот так:

Рисовать мы будем черным цветом, поэтому на панели Цвет или Образцы щелкните левой кнопкой по черному цвету. Панель Цвет позволяет сделать это путем синтеза цвета или выбора его в открывающемся диалоговом окне. Панель Образец предоставляет выбор из набора готовых образцов. (Когда Вы находитесь в состоянии выбора цвета курсор мыши приобретает вид пипетки). Чтобы выбрать цвет в режиме диалога надо дважды щелкнуть по квадрату текущего цвета пера или фона см. ниже.

Приступим к непосредственному процессу рисования. Для этого наводим карандаш на нужную точку изображения и нажимаем один раз левую кнопку мыши. Это приводит к появлению точки заданного цвета (черного). Чтобы стереть точку (или целый фрагмент) можно использовать как минимум три способа: стереть ластиком (Eraser Tool), выделить рамкой (Marquee Tool) и очистить клавишей Delete, на вкладке окна History (история действий) выполнить отмену действия щелкнув на одно из предыдущих действий в окне стека действий.

Окно Истории действий сохраняет определенное количество выполненных действий в виде отдельных пунктов. По мере выполнения действий они откладываются в стеке сверху вниз. Выбор предыдущего действия вызывает отмену всех сделанных. Однако большое количество действий (особенно однотипных) может вызвать переполнение стека и тогда стек обнуляется, т.е. становится невозможной отмена. Поэтому, чтобы избежать каких-либо потерь рекомендуется (особенно если Вы еще недостаточно опытны) периодически сохранять промежуточные копии своей работы.

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

Создание второй (левой) симметричной половинки изображения автомобиля выполняется следующим образом:

-         На панели инструментов выберите инструмент прямоугольная область

-         Выделите только нарисованную часть автомобиля без припусков по левому краю (хотя можно и с припусками, т.к. у нас задан прозрачный фон!);

-         Щелкните сначала пункт меню Редактирование (edit) > Копировать (copy);

-         Затем Редактирование > Вставить (paste); Обратите внимание на панель Layer – Вы увидите появление нового слоя! Т.е. новая копия изображения была вставлена на НОВЫЙ слой! Так происходит ВСЕГДА! Поэтому чтобы копировать изображение содержащееся на слое можно и поступить иначе: дублировать слой щелкнув правой кнопкой на данном слое (см. ниже);

-         Перемещайте новый фрагмент в левую половину окна – для этого воспользуйтесь инструментом Move (Перемещение) или удерживая нажатой клавишу CTRL (Control);

-         Чтобы сделать зеркальное отражение выделенного фрагмента выберите пункт меню Редактирование > Трансформация (transformation) > Отразить по горизонтали (Flip Horizontal);

-         Теперь, переместите полученное изображение так, чтобы обе половинки состыковались и получилось цельное изображение.

Центрирование наброска

Если полученный рисунок находится не в центре холста, а как-то смещен, то это нужно исправить -

для этого выберите инструмент прямоугольная область и с нажатой клавишей Ctrl переместите его точно в центр. Для этой же цели можно использовать инструмент Перемещение (Move Tool). Однако Вы заметите, что перемещается только одна половинка автомобиля. Поэтому, когда Вы работаете с более, чем одним слоем НЕ ЗАБЫВАЙТЕ ПРО СЛОИ! Слои позволяют Вам дублировать (или повторять некоторое количество раз) одинаковые элементы, позволяют комбинировать несколько изображений в одном. Но начинающие часто путаются, забывая переключаться на нужный слой и удивляясь тому, что не могут изменить что-либо в своем рисунке. Поэтому НЕ ЗАБЫВАЙТЕ ПРО СЛОИ!

В нашем теперешнем случае Вам надо отменить перемещение половинки автомобиля или переместить ее на прежнее место (чтобы получался цельный вид), а затем, давайте склеим слои объединив их в один слой. Для этого: Layer > Merge Visible – и Ваши слои соединятся в один.

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

 

Для чего это нужно? Если рисунок (и особенно окончательный – оформленный и раскрашенный) не будет в центре, то это плохо по нескольким причинам:

1 – это нарушает гармонию рисунка;

2 – это вызовет технические сложности при программировании компьютерной игры с использованием такого рисунка – он все время будет находится не точно там, где требуются, а со смещением!

 

Сохранение наброска Наконец мы получили то, что нужно. Теперь осталось сохранить нашу первую работу на жесткий диск. Давайте сохраним наше изображение в двух форматах: psd и bmp. Сохранять будем на жесткий диск в предварительно созданную Вами личную папку (например, Мои_диз_работы). Для этого:

-         Выберите пункт меню Файл > Сохранить как (Save As); Если Вы сохраняете изображение в первый раз, то можно выбирать и пункт Save, тогда программа все равно запросит у Вас имя создаваемого файла (если Вы не заполняли поле Name при его создании). Команда Save As полезна также для сохранения файла под другим именем, т.е. тогда, когда Вы периодически сохраняете свою работу находясь на разных промежуточных стадиях.

-         В появившемся диалоговом окне «Сохранить как» выполните следующее:

·           Щелкните по выпадающему списку в поле Папка и выберите диск C:

·                 Щелкните по кнопке Создать новую папку

 

·                 Введите желаемое имя папки и нажмите [Enter]

·                 Откройте только что созданную папку (если она не открыта или не открылась автоматически);

·                 Сохраните Ваш файл в Вашу папку в формате psd – щелкните по кнопке Сохранить.

·                 Сохраните Ваш файл в Вашу папку в формате bmp – для этого проделайте те же действия (Файл > Сохранить как), но в поле Формат (Format) располагающемся в нижней части окна диалога (под полем имя) из выпадающего списка выберите BMP, затем щелкните по кнопке Сохранить.

Таким образом мы получаем на диске в Вашей папке два файла:

my_first_image.PSD

my_first_image.bmp

 

Формат файла psd – это внутренний формат файлов-изображений программы Photoshop. Он не позволяет использовать данное изображение ни в каких других программах (кроме самого Photoshop и некоторых других, например 3DS Max). Однако он удобен тем, хранит в себе целый ряд специфической информации (информацию о слоях, выделениях и т.п.), что позволяет хранить изображения в виде исходников (исходных заготовок для дальнейших изменений или видоизменений). Формат bmp – широкоупотребительный. Изображения в этом формате можно использовать для различных целей: в документах Word, Excel, Web-публикациях, для компьютерных игр и т.д. Кроме того, располагая изображением в формате psd его легко сохранить в любом другом формате. Формат же bmp не сохраняет никакой информации о слоях и т.п. Он применяется лишь для окончательных (готовых) изображений, для использования в других приложениях (web-дизайн, компьютерные игры, издательское дело, реклама и т.д.).

Таким образом, если резюмировать вышесказанное: рабочие или окончательные варианты всегда сохраняйте в «родном» формате PhotoshopPSD, только после этого сохраняйте файл и в каком-нибудь другом (требуемом Вам) общеупотребительном или нужном в конкретной ситуации формате. Формат PSD – это Ваш гарант качества и надежности, своего рода «исходник», который легко можно будет модифицировать (или вспомнить, когда потребуется, КАК ВЫ ЭТО СДЕЛАЛИ). Другие форматы будут нести гораздо меньше рабочей информации или вообще не нести ее, но зато будут более компактны и подходящи для окончательного (целевого) применения.

 

 

 

Понятие слоев. Работа с цветом. Цветовой тон. Полутоновые переходы. Работа с цветом и свето-тенью (Урок № 1 часть 2)

 

Мы научились рисовать лишь набросок (контур) изображения. Теперь нам предстоит научиться наши изображения оживлять – приближать к реальным аналогам, заставлять их быть такими, какие они бывают в реальности. Мы приступим к этому с рассмотрения слоев.

Что такое слои? Многослойные изображения. Слои – это отдельные изображения расположенные строго одно над другим, причем так, что можно регулировать прозрачность (flow) и непрозрачность (opacity) каждого слоя. Для базового 1 слоя (фона) прозрачность равна 0%, т.е. он является абсолютно непрозрачным и регулировка прозрачности к нему не применяется. До сих пор Мы с Вами рисовали изображения на 1 слое (фоне), не задумываясь о том, что поверх этого слоя можно создать другие слои.

Для чего же нам могут понадобиться слои? Что они дают? Слои – это как прозрачные (или полупрозрачные) пленки, на каждой из которых можно располагать свое изображение. Объединение в изображении нескольких слоев дает преимущество в сочетании нескольких изображений в одном без нарушения целостности исходного изображения (так как каждое изображение располагается на отдельном слое). Конечно, если два изображения будут располагаться на абсолютно непрозрачных слоях, загораживая друг друга, то никакого эффекта не будет. Эффект будет только в том случае, если вышележащие слои имеют определенную прозрачность и/или абсолютно прозрачный фон. Тогда, если располагать изображения одно над другим, можно добиться различных эффектов – неосуществимых или трудноосуществимых в тех случаях, когда вся работа сводится к рисованию лишь на одном слое (фоне).

 

1. Открытие созданного ранее документа. Чтобы открыть набросок машины, созданной нами в предыдущей работе выполните выбор пунктов Файл (File) > Открыть (Open) и откройте файл my_first_image.PSD, разместите его на экране удобным образом, увеличьте масштаб.

2. Для быстрого задания масштаба во весь экран:

-         Щелкните инструмент лупа;

-         Щелкните по кнопке По экрану (Fit On Scree) в панели настроек лупы (сразу под строкой меню в верхней части экрана).

-         Если требуется перетащите окно изображения в центр экрана.

3. Итак, Мы настроили наше изображение для удобной работы с ним, теперь давайте посмотрим как изменить режим поддерживаемых в изображении цветов, для этого:

-         Щелкните пункт меню Изображение (Image) > Режим (Mode) и Вы увидите, что напротив пункта RGB цвет (RGB Color) стоит галочка. Соответственно, если переставить галочку в другой пункт, например, Grayscale (Черно-белый или градации серого), то тем самым можно изменить цветовой режим, в котором будет обрабатываться и сохраняться изображение. Изменение режима не проходит бесследно. Оно резко сказывается на качестве и если бы не было возможности отмены изменения режима, то можно было пострадать от потери качества при неверном изменении режима. Так что, прежде чем экспериментировать с изменениями режима сначала сохраните Ваш рисунок под другим именем, а потом уже смело пробуйте!

Мы создавали полноцветное изображение (RGB Color), так что если Вы случайно выбрали иной режим, то перемените его на RGB Color.

4. Дублирование слоя выполняется посредством щелчка правой кнопки мыши в окне Слои на выделенной области с названием слоя (Фон) – см. рисунок. Далее, в появившемся контекстном меню нужно выбрать (теперь уже левой кнопкой мыши) пункт Дублировать Слой … В появившемся диалоговом окне нужно дать новому слою имя (отличное от имени базового слоя – Фон), например, Набросок и нажать ОК. Будет создан новый (полностью идентичный фону) слой над слоем Фон, о чем можно судить по появлению нового слоя в окне Слои.

Чтобы понять какой слой является текущим достаточно обратить внимание на панель слои. Слой, выделенный цветом, и есть текущий. Слева от каждого слоя располагаются два окошка-кнопки: Глаз и Кисть. Глаз позволяет временно скрывать слой. Кисть показывает текущий (используемый для рисования) слой. Кроме того, слои можно связывать друг с другом (link), т.е. добиваться каких-либо совместных действий с ними без их склеивания. Хотя можно и склеивать лишь связанные слои – для этого служит команда Layer > Merge Linked. Для связывания текущего слоя с каким-либо имеющимся достаточно просто щелкнуть в пустом квадратике (где у текущего слоя располагается изображение кисти), тогда в нем появится значок цепочки означающий, что текущий и данный слой являются связанными. Это было небольшое отступление. Связывание слоев нам пока не понадобится.

 

5. Очистка содержимого слоя Фон нам понадобится для выполнения эксперимента с использованием градиентной заливки для корпуса автомобиля. Для этого проделайте следующее:

-         Сделайте текущим слоем Фон;

-         Используя инструмент прямоугольная область выделите все изображение и нажмите клавишу [Delete] или выберите пункт меню Редактирование > Вырезать (Cut);

-         Чтобы удостовериться, что слой Фон очищен щелкните по кнопке Глаз слоя Набросок, если контур автомобиля исчезает, а при повторном нажатии Глаз’а появляется – мы сделали все верно.

После выполнения шагов 4 и 5 мы можем добиться следующего эффекта: так можно разблокировать заблокированный слой (обратите внимание на рисунок на шаге 4 – справа от названия слоя на текущем слое стоит изображение замочка). Это всегда так бывает, когда Вы открываете какое-либо однослойное изображение, например файл BMP. Заблокированный слой не даст Вам возможности пользоваться прозрачным фоном (потому что у файла BMP прозрачный цвет должен быть ОБЯЗАТЕЛЬНО ЗАМЕНЕН НА КАКОЙ-НИБУДЬ ДРУГОЙ, что всегда и делается (автоматически) при сохранении файла в этом формате. Непрозрачный цвет фона не даст Вам возможности пользоваться преимуществами комбинирования изображений на слоях. Вам надо научиться избавляться от закрашенного фона и менять его на прозрачный.

 

6. Замена (удаление) цвета слоя на прозрачный. Мы сделаем так, чтобы белый цвет слоя Набросок стал прозрачным (если это имеет место быть), чтобы иметь возможность заливать слой Фон и получать эффект заливки без нарушения контуров. Для этого:

-         Сделайте текущим слой Набросок (если он был скрыт, сделайте его видимым);

-         Выберите инструмент волшебная палочка (Magic Wand Tool) и задайте параметр Обратная чувствительность (tolerance) = 1. Щелкните по изображению. В изображении должны быть выделены все области, имеющие белый цвет точек. Если этого не происходит, значит в Вашем изображении имеются области имеющие на глаз белый, но на самом деле несколько отличный от белого цвет. Значит Вам нужно увеличить выделяемый разброс (диапазон), т.е. установить параметр Обратная чувствительность равным большему значению (например 10) и снова щелкнуть по изображению.

-         В нашем изображении были выделены области имеющие белый (и близкие к белому) цвет. Чтобы сделать эти области прозрачными вырежьте их (клавишей [Delete] или через Редактирование > Вырезать (Cut).

Чтобы проверить действительно ли данные области стали прозрачны попробуйте временно скрыть слой Фон. «Шахматка» которая обазует пространство вокруг контуров и внутри них и есть прозрачный (представляемый прозрачным) цвет.

 

Мы очищали содержимое слоя «Фон» для того, чтобы получить в распоряжении чистый пустой слой (прозрачный). Это же можно было сделать и по-другому: сначала удалить слой «Фон» - щелкнув по его названию правой кнопкой и выбрав пункт Delete Layer (удалить слой). Затем при помощи кнопки Create a new layer в нижней части панели Layer создать новый слой.

 

7. Градиентная заливка изображения:

-         Сделайте текущим нужный слой (в нашем случае - Фон);

-         Щелкните по инструменту Заливка (Paint bucket)   правой кнопкой и выберите вариант Градиент ;

-         На появившейся панели параметров заливки (под строкой меню) установите требуемые параметры (способ заливки и др.);

-         Поскольку заливка осуществляется путем плавного перехода от цвета пера к цвету фона, то Вам в окне Цвет нужно задать оба эти цвета;

-         Установите цвета, например: Ярко красный и темно красный.

-         В окне изображения нажмите в требуемой точке левую кнопку мыши и протаскивайте, указав тем самым направление и угол градиентной заливки. После отпускания левой кнопки мыши заливка будет произведена. Как видите, градиентная заливка представляет собой плавное перетекание от цвета переднего плана или пера (foreground) к цвету заднего плана или фона (background).

 

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

Как задать цвет?

Для задания текущих цветов переднего и заднего плана есть несколько способов. Самый простой из них: воспользоваться панелью Color.

На панели Color (должна быть открытой и вкладка Color), т.е. вот так:

На рисунке показано задание желтого цвета в цветовой модели (пространстве) HSB. Вы видите, что вокруг верхнего (желтого) квадрата, который как раз и представляет цвет переднего плана, имеется небольшая рамка. Она показывает, что мы можем изменять цвет переднего плана. Если щелкнуть левой кнопкой нижний (белый) квадрат, то можно будет изменять цвет заднего плана. Чтобы изменить цвет достаточно перемещать мышью треугольные движки (H S B). В данном случае это означает, что для задания цвета (и цветового пространства) используется модель HSB. В этой модели (также как и в модели RGB) для формирования цвета используются 3 компонента. Но их назначение (и следовательно способ задания цвета) иное. HHue – тон, т.е. значение цвета на цветовом круге (от 0 до 360 градусов). Значения этих тонов стандартизированы и представляют все цвета (и оттенки) цветов радуги. Второй компонент – SSaturation – насыщенность данного заданного тона – изменяется от 0 до 100%. Насыщенность (или иногда ее еще называют whiteness) представляет обратное насыщение до белого, т.е. если задать нулевое значение S, то при любом положении H и каком-либо положении B будут получаться оттенки серого, а вот если B поставить тоже в 0, то получится АБСОЛЮТНО ЧЕРНЫЙ цвет. Такой цвет представляет максимально возможный вариант черного цвета при отображении на экране. Мы подошли к назначению третьего компонента – B – это brightness (или ее еще называют blackness) – наличие в цвете черного. Также изменяется от 0 до 100. 0 значение при 0 S соответствует, как мы уже видели, черному цвету. Максимальное (100%) значение B при 0 S соответствует максимально отсутствующему черному (и максимально присутствующему белому в S), поэтому получается АБСОЛЮТНО БЕЛЫЙ цвет. При одном из крайних значений S или B (т.е. 0 или 100%) независимо от положения H и перемещая другой свободный движок можно получить множество всех нейтральных цветов (градаций серого).

Изменение используемой для задания цвета цветовой модели

Цветовая модель HSB удобна тем, что позволяет оперировать понятиями, привычными для нашего глаза – вспомните, чем Вы руководствуетесь при задании какого-либо цвета: Какого он будет тона? Насколько он насыщенный ? Насколько он яркий ? Кроме того, эта модель позволяет Вам сравнивать цвета не требуя дополнительных усилий по вычислениям или пересчету. Попробуйте-ка сравнить два цвета в модели RGB не зная соответствующих значений компонентов R-G-B. Теперь поняли?

 

Если у Вас задана иная цветовая модель, например, RGB (включается всегда по-умолчанию после установки программы), Вы можете ее изменить: для этого щелкните левой кнопкой маленькую черную стрелку в окне панели Color (см. рисунок – обведено кружком)

Теперь, можно поставить флажок напротив соответствующего режима цветовой модели: Grayscale, RGB, HSB, CMYK, Web или Lab sliders. Ниже можно выбрать цветовой охват (spectrum) используемой модели. Цветовой охват определяет широту возможных оттенков. Например, охват модели CMYK самый малый, это связано с тем, что модель CMYK представляет модель для задания печатных цветов. Все цветовые модели являются общепринятыми стандартами.

 

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

 

Продолжаем работу по раскрашиванию автомобиля

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

 

Теперь давайте попробуем как-то залить окна автомобиля.

- Создайте новый слой.

- Переместите его так, чтобы он располагался под остальными слоями: для этого достаточно «захватить» слой мышью и перемещать до определенного предела вниз окна панели Layers.

- Задайте какие-либо другие цвета для заливки окон градиентом (например голубой и синий) и выполните заливку данного слоя. Поскольку слой находится ниже всех остальных слоев, то и по глубине его видимость – самый задний план. Чтобы увидеть результаты Вашей заливки можно временно скрыть вышележащий слой (см. шаг 4).

Мы пока еще не добились нужного результата – слой залит, но окна – нет.

-         Перейдите на самый верхний слой (Набросок) и используя инструмент волшебная палочка (с задаваемым путем пробы параметром Обратная чувствительность) выделите все контуры окон автомобиля. Для «приплюсовки» к имеющемуся выделению – щелкайте по другим контурам окон с нажатой клавишей [Shift].

-          Теперь перейдите на нижележащий слой – назовем его ПрорезиОкон и выполните операцию Вырезания (Редактирование > Вырезать) для выделенных областей. Это же можно выполнить клавишей [Delete].

-         Если делать это сразу на слое Набросок, то мы лишимся видимых контуров окон! Но нам они тоже будут больше не нужны, так что после создания прорезей на слое кузова (ПрорезиОкон) удалите их и со слоя Набросок.

В итоге у Вас должно получиться что-то вроде этого (в масштабе 1:1):

Теперь, для придания окончательного реалистичного внешнего вида нашему автомобилю нам потребуется проделать следующие шаги:

a)      Изменить черные контуры автомобиля на более плавно переходящие к фону, поработать со свето-тенью и полутоновыми переходами для создания объемного вида;

b)      Добавить дополнительные детали: фары, колеса;

c)       Для всех остальных цветовых точек (за пределами контура машины) задать единый (фоновый) цвет – который будет служить для эффекта прозрачности при дальнейшем применении изображения (например в компьютерной игре).

d)      Сохранить промежуточный результат работы в разложенной по слоям форме в формате PSD.

А сейчас рассмотрим описанные шаги более детально.

 

 

8. Создание свето-теневых переходов. Придание объема. Нежелательно оставлять черные контуры в изображении. Это будет выглядеть неестественно. Если их скрыть (попробуйте скрыть слой Набросок), то пропадает изображение автомобиля. Давайте исправим эту ситуацию.

 

Как уже говорилось ранее слои имеют свойство полупрозрачности (параметр Opacity) в окне панели Layers. Чтобы сделать контуры автомобиля полупрозрачными, что придаст эффект плавности перехода к фону, перейдите на слой Набросок и изменяйте параметр Opacity для данного слоя.

 

Для придания кузову объема нужно учесть следующие моменты:

·                 предполагаемое направление источника света, откуда наш автомобиль освещается;

·                 приняв это направление за исходное нужно приступить к рисованию объемных контуров, в соответствии с придуманным нами направлением освещения;

·                 то что будет рисоваться более темными тонами будет казаться впадинами, а то что светлыми – выпуклостями.

Основываясь на указанных правилах попробуйте придать Вашей машине объемную форму. ВНИМАНИЕ! РАБОТУ ПО ОСВЕТЛЕНИЮ/ЗАТЕМНЕНИЮ ВЕДИТЕ НА СЛОЕ ПРОРЕЗИ ОКОН. Так как окна автомобиля должны тоже обрабатываться, то свяжите два этих слоя между собой и склейте их (как склеить и связать см. выше). Для осветления/затемнения областей используйте инструменты Осветление (Dodge Tool)   и Затемнение (Burn Tool) .

Чтобы выбрать затемнение нужно щелкнуть правой кнопкой по кнопке используемого в данный момент инструмента и выбрать в открывшейся панели нужный (см. рисунок).

 

Свойства инструментов Осветление/Затемнение

Оба эти инструмента имеют одинаковый набор свойств:

Brush – определяет тип и размер используемой для осветления/затемнения кисти. Для выбора типа или размера нужно щелкнуть по маленькой черной стрелке в поле Brush и выбрать необходимый тип/размер.

Range – определяет получаемый цветовой оттенок при воздействии – попробуйте испытать его опытным путем.

Exposure – сила воздействия, т.е. насколько сильно воздействует эффект на обрабатываемое изображение.

 

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

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

 

Переименуйте слой ПрорезиОкон в Кузов. Перед выполнением каких-то критичных операций, могущих испортить то, что Вам до сих пор нравилось, сохраняйте промежуточные копии вашего изображения в формате PSD под различными именами (my_first_image_conture_tone, my_first_image_volume2, red_car_kuzov и т.д.).

Конечное изображение кузова:

Должно удовлетворять следующим условиям – иметь явно прослеживаемые детали объема (путем игры света и тени), не иметь слишком резких (выпадающих из общего цветового диапазона (тона)) цветовых переходов и пятен.

Понятие прозрачного цвета

При использовании изображений для наложения на другие изображения, например автомобиль поверх какого-то фона – дороги – всегда требуется, чтобы выводился лишь сам автомобиль, а не вся прямоугольная область, которую представляет рисунок. Как сделать прозрачным фон ? Прозрачность фона достигается программным способом при выводе изображения следующим способом: цвет, который задан как используемый под прозрачный просто не выводится. Поэтому если в изображении пожертвовать каким-либо цветом и залить этим цветом фон вокруг автомобиля, то можно будет использовать его затем в качестве прозрачного. Жертвуя всего лишь одним (если Вы помните из примерно 16,7 Млн. цветов) мы, вообщем-то, ничего не теряем. Мы даже не цветом жертвуем, а одним из оттенков. Используя в изображении выбранный прозрачным цвет, можно организовать вывод изображений любой формы и вида, даже с просветами. Достаточно лишь прорисовать эти участки выбранным за прозрачный цветом и они, при выводе изображения, превратятся в «дыры».

Вот окончательный вариант того, что у Вас может получиться:

Масштаб 1:1

Увеличенное изображение (8:1)

 

Секреты дизайнерского мастерства

Как придать изображению нашего автомобиля более эффектный вид?

 

Мы рисовали наш автомобиль первоначально размером 40х70 пикселей. Попробуйте проделать все то же самое, но увеличив эти размеры до 160х280 (т.е. взяв в 4 раза больший размер). Конечно при этом толщину свойства Brush у карандаша не надо тоже увеличивать в 4 раза, т.е. делать равной 4 пикселям. Оставьте толщину равной 1 пикселю. При этом создаваемые Вами линии будут более тонкими и сглаженными. Если Вы повторите все, о чем говорилось ранее и получите законченный вид автомобиля, то можете уменьшить его ровно в 4 раза. Для этого: Image > Image Size и задайте нужный размер (40х70 вместо 160х280). Когда Вы сравните Ваш первый автомобиль и новый, то Вы увидите между ними существенную разницу. Это происходит из-за того, что при масштабировании происходит интерполирование пикселей, что создает более сглаженные, а не резкие переходы. Такого эффекта трудно добиться прямым рисованием, а вот путем масштабирования – довольно легко. Этот небольшой секрет Вы можете взять себе за правило: зная конечные размеры того изображения, которое Вам нужно получить можно увеличить эти размеры на некоторое целое число (в 2,3, 4 раза) – в зависимости от того, как грубо Вы планируете рисовать и какое качество хотите получить. Конечно слишком грубое рисование тоже ни к чему хорошему ни приведет, Вам все же придется постараться и самим! С другой стороны если Вам потребуется создать большое изображение – например, во весь экран, размером, скажем 1024х768 пиксель, то увеличение в 2 и более раз может сильно увеличить размер обрабатываемого файла, что может сказаться и на быстродействии (Photoshop станет «слишком задумчив» при выполнении даже простых операций). Линии которые Вы будете рисовать могут казаться Вам прерывистыми и т.д. В этом случае решением может быть рисование изображения не всего целиком сразу, а по частям – отдельными элементами. Потом уже можно будет собрать все что вы создали в одном изображении скомпоновав в единое целое (путем размещения на разных слоях) и т.д. Могут быть и другие варианты. Дело ограничивается только Вашей фантазией.

 
     
  [к содержанию] [далее]  
     
     
Creating game on fle game engine - Simple game / Создание игры на fle game engine - Simple game

9 - Реализуем корректное попадание в ямы и около ям - определяем границы спрайтов ям и спрайта прыгаюшего шарика



read paper in english

Для того, чтобы фиксировать попадание шарика в яму или нет, нужно определить для неё границы.





Содержание

страница 1 - Спрайты

страница 2 - Объекты

страница 3 - Наложение объектов

страница 4 - Код - Настройка параметров Scene Editor fge и написание кода для вывода спрайта шарика в вашем первом игровом приложении

страница 5 - Отображаем прыгающий шарик

страница 6 - Загрузка игровой сцены

страница 7 - Перемещения игровой сцены

страница 8 - Закрываем часть сцены от пустот при помощи черной текстуры с прорезью, ограничиваем перемещение сцены

страница 9 - Реализуем корректное попадание в ямы и около ям - определяем границы спрайтов ям и спрайта прыгаюшего шарика

страница 10 - Проверка столкновений

страница 11 - Игровой счёт, звуки, музыка

урок #2 страница 1 - Создание новых сцен для игры simple game, расширенная версия simple game extended

13. Скроллинг больших локаций

14. использование переменных в игре на c++ directx 9c

15. Мульти анимация







Давайте подумаем, что нужно знать для определения факта попадания шарика в яму ?

Прыгающий шарик в яме или нет ?

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

Прыгающий шарик в яме или нет ?

Зная границы шарика и границы ямы мы можем определить - целиком ли попадают границы шарика в границы ямы или нет и в соответствии с этим принять решение: отобразить ли переднюю плашку ямы или нет.

Ну и самое главное конечно - это цель нашей игры: отслеживать успешное попадание шарика в яму или нет. Для этого, как видите, тоже будут нужны границы.

Параллельно нам сразу же придется решить проблему -

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

Мы уже знаем как двигать шарик, только теперь он должен двигаться не от перемещений мыши, а сам.

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

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



Для начала нужно реализовать проверку попадания для неподвижного шарика и всего 1 ямы.

Определено попадание шарика в яму

Если шарик попадает в яму - учитываем попадание. В дальнейшем при возникновении данного события будет учитываться игровой счёт и воспроизводиться звук.



Если шарик не попадает в яму - то не выводим плашку ямы.



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

Видим, что шарик свободно перемещается по сцене в отведенных ему границах.

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

Реализован учет и показ очков набранных за успешные попадания шарика в ямы.

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

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

Список треков также можно задавать произвольно через специальный файл.

Как реализовать все показанные особенности мы рассмотрим далее.

Указатель мыши можно скрывать или показывать по нажатию специальной клавиши.

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



Скачать готовую игру simple game версия 1.0.0 4.01.2017 (без исходного кода).

Исходный код и другие полезные материалы и инструменты Вы получаете при оформлении платной подписки !


Размер: 51,8 Mb



новый современный движок для создания игр на платформе Windows Directx 9c - которая поддерживается большинством ПК.

Подробнее об оформлении подписки на fle game engine





Скачать fle game engine (полный исходный код).

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


Размер: 482 Mb



Контрольные суммы для проверки целостности скачанного архива.

CRC32: 9626C289
MD5: 7537172124F59B49431DA3CE0EE70B97
SHA-1: 951A654AFA932AAD706C090B5A37F37DD53E5920

Контрольные суммы можно проверить утилитой HashTab

После скачивания вы получите самораспаковывающийся архив. Запустите его, чтобы распаковать.

Система написана на c++ под directx 9.

Требования - наличие установленных MSVS 2005 (Microsoft Visual Studio) и DirectX SDK Aug 2008.

Для других версий MSVS и DirectX SDK могут потребоваться модификации кода !

Что включает дистрибутив ?

- Редактор сцен Scene Editor;

- пример игры simple game с полным исходным кодом;

- пошаговое описание создания примера игры simple_game - представляет набор html файлов пригодных для открытия и чтения из любого браузера;

- Coords 2D - утилиту отладки анимаций и подбора экранных координат содержит богатую библиотеку готовых примеров игровых спрайтов;

- полный исходный код fle game engine - позволит вам создать свою собственную игру, а также расширить движок необходимыми возможностями в дальнейшем, никаких ограничений на расширение нет;

- fgg_setup.exe Fly snow 3d - визуальные эффекты падающего снега/дождя и др. красивые эффекты с частицами в 2d/3d;

Скачав дистрибутив fle game engine вы можете приступить к созданию своей игры прямо сейчас !

Чтобы иметь возможность самостоятельно создать свою игру на базе примера simple_game с неограниченными возможностями дальнейшего расширения! - оформите подписку на fle game engine -


Стоимость: 600 руб.

Оформив подписку на fle game engine Вы получаете пример игры simple_game с исходным кодом, и сможете не просто прочитать всё, что описано, но и самостоятельно проделать в собственном приложении с возможностью неограниченного расширения. Также Вы получаете

Самую свежую версию Scene Editor fge 1.0.2 (на текущий момент) с поддержкой большего количества возможностей: сетка, настройки, скроллинг и другие. В бесплатной версии эти возможности не поддерживаются. подробнее о составе платной подписки.





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

Creating game on fle game engine - Simple game / Создание игры на fle game engine - Simple game - попадания шарика в ямки новым способом

Предложенный ранее способ оказался не лишенным недостатка: когда в шарик одновременно
попадают два шарика, причем один из них находится не совсем в ямке, то плашка ямки на фоне шарика становится видна и это выглядит неестественно.


Creating game on fle game engine - Simple game / Создание игры на fle game engine - Simple game - Предложенный ранее способ оказался не лишенным недостатка

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

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

Вообщем все это выглядит не очень естественно.

Новый улучшенный способ, сделан без применения плашек.

Creating game on fle game engine - Simple game / Создание игры на fle game engine - Simple game - попадания шарика в ямки новым способом

Поэтому сколько шариков бы не попадало в ямку одновременно они будут выводиться
визуально естественно.

В чем заключается принцип нового способа ?

Суть его предельно проста:

Каждый спрайт имеет такую характеристику как высота - Height.

Эту высоту мы можем изменить в любой момент. Что собственно и делается.

Sprite->Height = m_iBallSpriteHeight;

Как это происходит ?

Пока шарик не в ямке, его спрайт выводится с обычной высотой Height, на которую
рассчитан данный спрайт.

Но как только момент попадания в ямку зафиксирован, высота меняется на меньшее.
значение, чтобы шарик оказался как бы обрезан снизу, почти на 1/3 или даже
наполовнину.

Визуально, когда при этом под ним еще и находится изображение ямки, это и дает
эффект попадания в неё.

Creating game on fle game engine - Simple game / Создание игры на fle game engine - Simple game - попадания шариков в ямки новым способом

[назад] [далее]



megainformatic live chat
Начать беседу
X
 

Оставленные комментарии



fle game engine - движок для создания игр
fle game engine - движок для создания игр


Something: Unexplained 2 captive of desires / Нечто: Необъяснимое 2 в плену желаний
Костя Коробкин Комикс Коллекционное издание - 6 комиксов, 81 страница, 220 mp3 треков
megainformatic Размещение баннерной рекламы у нас
Время загрузки: 0,9610