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


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

Основы работы в Microsoft Visual Studio 2008 и DirectX 9 (DX SDK Aug 2008)
 
подробнее...

Теги создание сайтов, создание игр, дизайн, игры, информатика, уроки photshop, php, c++, музыка, delphi, cms, робосайт
Статьи сайта
Как Создать игру ВЕБ - Веселый Единственный Буквоежка - Программируем сами

megainformatic - Примеры моих работ

megainformatic - Музыкальные темы

megainformatic - Уроки Photoshop - Чудеса

megainformatic - Купить Уроки Photoshop - Чудеса

megainformatic - Онлайн Обучение, Репетитор

megainformatic - Уроки Photoshop - Рисуем и Анимируем

megainformatic - Уроки Photoshop - Рисуем и Анимируем - Урок 1 - Старт

megainformatic - Уроки Photoshop - Рисуем и Анимируем на AllSoft.ru

megainformatic - DirectX 9c - Изучаем пример MultAnimation

megainformatic - megainformatic cms Система Управления Контентом

megainformatic - Темы для WordPress

megainformatic - Что нужно для создания собственного сайта ?

megainformatic - Макет дизайна Вашего сайта

скачать megainformatic cms

megainformatic - Итоги 2010 года

megainformatic - Что нужно для создания собственного сайта ?

megainformatic - как создать инсталлятор для собственной cms

megainformatic - Новости - страница 2

Нововведения в megainformatic cms

Web Администрирование

Уроки Верстки

Система автоматизированной е-майл рассылки

Система автоматизированной е-майл рассылки

megainformatic - Выгрузка файла на сайт

megainformatic - выпадающее меню на html и css

megainformatic - Использование checkbox

Краеугольная особенность работы Web-form на примере смены состояния checkbox

Технологии WEB

Технологии WEB - AJAX-запросы

Часто Задаваемые Вопросы

Продукты

Проблемы с кодировками при отображении страниц

игра Нечто: Необъяснимое Нить Накала - "в плену желаний"

Система Автоматизации Доставки Электронных Заказов megainformatic cms e-pro

megainformatic cms e-pro Автоматизация Обработки Уведомлений о Заказах по партнерским программам

megainformatic cms e-pro Автоматизация Обработки Уведомлений о Заказах по партнерским программам

webinformatic: Музыкальная страничка трэкера

megainformatic - Создание музыки и звука

webinformatic: Создание музыки и звука: урок 2

megainformatic - Создание музыки и звука: урок 3 - настройка Impulse Tracker для работы в WinXP

megainformatic - Создание музыки и звука: урок 4 - Введение в Mod Plug Tracker

megainformatic - Создание музыки и звука: урок 5 - Первая композиция в Mod Plug Tracker

megainformatic - Создание музыки в Impulse Tracker 2.14 - урок 6 - Ввод Нот

megainformatic - Создание музыки в Impulse Tracker 2.14 Первая мелодия

megainformatic - Создание музыки в Impulse Tracker 2.14 Настройка параметров сэмплов

megainformatic - Создание музыки и звука: теория и практика создания трэкерской музыки

megainformatic - Инструкция по оплате услуг средствами WebMoney

Основы работы в Microsoft Visual Studio 2008 и DirectX 9 (DX SDK Aug 2008)

Введение в программирование игр на С++ для платформы DirectX 9 - Первый старт

Введение в программирование игр на С++ для платформы DirectX 9 - Меняем иконку приложения

Введение в программирование игр на С++ для платформы DirectX 9 Добавляем другую модель

Введение в программирование игр на С++ для платформы DirectX 9 Программирование игр в directx. Hello, World!

Введение в программирование игр на С++ для платформы DirectX 9 Разбираем конструкции языка C++ на примере работы в Microsoft Visual Studio 2008

Разбираем конструкции языка C++ на примере работы в Microsoft Visual Studio 2008 - Урок 1 Основные операторы языка C++

Разбираем конструкции языка C++ на примере работы в Microsoft Visual Studio 2008 - Урок 1 Основные операторы языка C++ (часть 2)

подробнее

ria pc game - доска почета



значок / badge имя / name статус / status описание / description
ria pc game значок badge Харухи Судзумия БРОНЗОВЫЙ ЮЗЕР Подарки: имя в финальных титрах проекта, благодарность лично от megainformatic и от Риа, специальный доступ в игру, который открывает больше возможностей. Специальное персональное место в игре
ria pc game значок badge Александр Сычев СЕРЕБРЯНЫЙ ЮЗЕР Подарки: имя в финальных титрах проекта, благодарность лично от megainformatic и от Риа, специальный доступ в игру, который открывает больше возможностей. Специальное персональное место в игре (будет доступно в июльской версии игры). Возможность создавать свои собственные игровые проекты на движке fle game engine, возможность расширить движок или даже написать свой собственный используя накопленный в fle game engine опыт и наработки.
ria pc game значок badge Дмитрий Долгов БРОНЗОВЫЙ ЮЗЕР Подарки: имя в финальных титрах проекта, благодарность лично от megainformatic и от Риа, специальный доступ в игру, который открывает больше возможностей. Специальное персональное место в игре (будет доступно в июльской версии игры).


подробнее

Костя Коробкин - В гостях у тёти Светы (kk as) - онлайн комикс - страница 12

Онлайн-комикс Костя Коробкин - В гостях у тёти Светы - интерактивный комикс (kk as).

- Она хлопает капотом ?

Костя Коробкин - В гостях у тёти Светы часть 2 Живые машины (- интерактивный комикс (kk as) - онлайн комикс - страница 12

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

[страница 1][страница 2] [страница 3] [страница 4] [страница 5] [страница 6] [страница 7] [страница 8] [страница 9] [страница 10] [страница 11]  [страница 12] [страница 13] 

подробнее

megainformatic.ru Синицин А. С. Шарики на лифте - Как создать игру - Анимация прыжков шарика

 

 

20.09.2016

 

 

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



Скачать Coords2D -


Размер sfx-архива: 36 Mb. Также содержит много примеров спрайтов и других
изображений из проекта fle, bol и др.

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

Как работать с утилитой Coords2D описано в приложенном файле readme.txt, который Вы найдете в папке после распаковки. Другим примером, возможно более наглядным, является статья Как анимировать паука ?

 

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

Анимация прыжков шарика

 

Итак, давайте посмотрим на рисунки.

Шарики на лифте - Как создать игру - Анимация прыжков шарика gif на белом фоне

Шарики на лифте - Как создать игру - Анимация прыжков шарика gif на черном фоне

Шарики на лифте - Как создать игру - Анимация прыжков шарика gif на белом фоне, вариант 2

 

 

 

Шарик прыгает. Это происходит благодаря gif анимации. Если открыть gif файл из Photoshop, то увидим там последовательность слоёв, каждый из которых представляет 1 кадр анимации.

 

 

 

Шарики на лифте - Как создать игру - gif файл открыт из Photoshop

 

 

 

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

 

 

Я показал анимацию на белом и черном фоне, чтобы Вы представляли как добиться в игре наличия у спрайта прозрачного фона. В играх, gif-анимация не применяется. Вместо неё используются самые разные форматы, но для directx 9c используется формат tga, а сам спрайт представляет чаще всего квадрат, с расположенными на нём кадрами анимации.

Шарики на лифте - Как создать игру - Спрайт прыгающего шарика

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

 

 

 

При создании спрайтов (а также если Вы будете читать статью - Создаем анимацию хотьбы волка в Photoshop), Вы познакомитесь с таким понятием как альфа-маска. Что это ? Детально это описано в статье - Создаем анимацию хотьбы волка в Photoshop - про альфа-маску

 

Шарики на лифте - Как создать игру - Спрайт прыгающего шарика с альфа-маской

 

 

На рисунке выше, альфа-маска показана красным цветом. Грубо говоря - это отдельный слой (реально - отдельный цветовой 8-битный канал), и всё что показано красным будет выводиться прозрачным. Альфа-маска представляет изображения в оттенках серого, где максимальная яркость (белый) соответствует полностью непрозрачным пикселям (на рисунке они не красные), и минимальная яркость (черный) - полностью прозрачным пикселям (на рисунке они красные). Все оттенки серого представляют различные градации полупрозрачности - те которые будут ближе к белому будут менее прозрачными, к черному - более прозрачными.

 

 

 

 

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

 

 

 

Итак, создадим новое изображение 512х512 пиксель, 72 dpi (точек на дюйм). Файл > Создать

Итак, создадим новое изображение 512х512 пиксель, 72 dpi (точек на дюйм). Файл > Создать

 

 

 

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

 

 

 

 

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

 

 

 

Поскольку каждая ячейка сетки у нас должна быть размером 1/4 от 512 т. е. 128, то заданим для неё такие параметры -

 

 

Поскольку каждая ячейка сетки у нас должна быть размером 1/4 от 512 т. е. 128, то заданим для неё такие параметры

 

 

 

Нажав комбинацию клавиш [Ctrl] + ["] увидим сетку, отображаемую поверх созданного пустого изображения. Теперь очень удобно размещать по сетке кадры спрайта, чтобы не выйти за их границы. Итак, как я уже говорил, поместим первое изображение шарика в блок 1 слева вверху, это будет наш 0 кадр - начальный кадр всей анимационной цепочки. Обратите внимание, что я уменьшил шарик до необходимых размеров ячейки - не более 128 пикселей по ширине и разместил тень (черный эллипс) на отдельном нижележащем слое. Также удобно каждый кадр анимации хранить в виде отдельной группы слоёв - frame_0. Тогда frame_1 и т. д. можно просто дублировать и создавать новые кадры анимации, смещая изображения в нужные границы кадра.

 

поместим первое изображение шарика в блок 1 слева вверху, это будет наш 0 кадр - начальный кадр всей анимационной цепочки. Обратите внимание, что я уменьшил шарик до необходимых размеров ячейки - не более 128 пикселей по ширине и разместил тень (черный эллипс) на отдельном нижележащем слое. Также удобно каждый кадр анимации хранить в виде отдельной группы слоёв - frame_0. Тогда frame_1 и т. д. можно просто дублировать и создавать новые кадры анимации, смещая изображения в нужные границы кадра.

 

 

 

Далее я дублирую группу frame_0 и даю ей имя frame_1

 

Далее я дублирую группу frame_0 и даю ей имя frame_1

Далее я дублирую группу frame_0 и даю ей имя frame_1

 

 

 

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

 

Далее я дублирую группу frame_0 и даю ей имя frame_1

 

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

 

Далее я дублирую группу frame_0 и даю ей имя frame_1

 

 

 

 

Как сделать остальные кадры видно из приведенного ниже рисунка.

 

Как сделать остальные кадры

 

 

 

 

Финальный шаг: создаем альфа-маску. Для этого выделяем все группы, дублируем их и объединяем в один слой.

 

Финальный шаг: создаем альфа-маску.

 

 

 

 

При помощи пункта меню Изображение > Коррекция > Цветовой тон/Насыщенность - делаем изображение на слое максимально ярким - превращая в белый. (Как вы помните, всё что будет белым - будет полностью непрозрачным).

 

Финальный шаг: создаем альфа-маску.

 

 

 

 

Теперь осталось создать отдельный слой, залить его черным, объединить со слоем ставших белыми элементов и вставить полученное в альфа-канал. ОБРАТИТЕ ВНИМАНИЕ !!! Когда Вы копируете содержимое исходного слоя с будущей альфа-маской Вам нужно во вкладке Каналы иметь выделенным канал RGB - иначе вы копируете не весь слой, а только его цветовую составляющую для выбранного канала. Когда же вставляете скопированное в альфа-канал, то он и должен быть выбран во вкладке Каналы. Копирование и вставку можно выполнять через меню Редактирование > Скопировать / Вставить. Либо используя горячие клавиши [Ctrl] + [C] и [Ctrl] + [V] при выделенном слое (отображается рамка в виде пунктира). Выделить весь слой можно по [Ctrl] + [A].

 

Финальный шаг: создаем альфа-маску.

 

 

 

 

На заключительном шаге сохраняем наш спрайт в формате tga и переходим к его тестированию утилитой Coords2D



Скачать Coords2D -


Размер sfx-архива: 36 Mb. Также содержит много примеров спрайтов и других
изображений из проекта fle, bol и др.

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

 

На заключительном шаге сохраняем наш спрайт в формате tga

 

 

 

 

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

 

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

 

 

 

 

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

 

тестируем спрайт: прыгающий шарик утилитой Coords2D

 

 

 

 

Всё что для этого нужно, это открыть папку с утилитой, предположим она называется у Вас Coords2D, далее открыть папку Coords2D\Media\textures\ball и вставить туда файл вашего анимированного шарика. После этого любым текстовым редактором понимающим формат txt, открыть файл Coords2D\Media\textures\tex_list.txt и убрав всё что там есть добавить только одну строчку - (предполагаю что файл с прыгающим шариком вы назвали anim_ball.tga)

ball\anim_ball.tga; 0.0f; 0.1f; 0.8f; 0.52f; 0.52f; 128; 256; 0; 0; 4; 8.0f; 0.5f;

 

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

Далее в утилите Coords2D выбираем пункт меню File > Reload

 

тестируем спрайт: прыгающий шарик утилитой Coords2D

 

 

 

И наблюдаем результат - как Ваш шарик прыгает.

 

 

Поясню, что означают параметры в строке -

 

 

ball\anim_ball.tga; 0.0f; 0.1f; 0.8f; 0.52f; 0.52f; 128; 256; 0; 0; 4; 8.0f; 0.5f;

Кстати о них можно прочитать подробнее в readme.txt приложенном к утилите Coords2D.

ball\anim_ball.tga; 0.0f; 0.1f; 0.8f; 0.52f; 0.52f; 128; 256; 0; 0; 4; 8.0f; 0.5f;
filename; X; Y; Z; xScale; yScale; Width; Height; TexOffsetX; TexOffsetY; FramesPerLine; fMaxFrame; Delay;

По-порядку: filename - 1 параметр означает имя файла спрайта;

X, Y, Z - соответственно его векторные координаты на экране;

xScale, yScale - масштабные коэффициенты;

Width, Height - ширина и высота кадра спрайта в пикселях;

TexOffsetX, TexOffsetY - смещение по осям X и Y, в пикселях, соответственно (если спрайт изображен со смещением, обычно применяется для мультиспрайтов - т. е. изображение включает несколько спрайтов);

FramesPerLine - количество кадров в одной горизонтальной линии на текстуре спрайта;

fMaxFrame - Номер последнего кадра считая с 1;

Delay - временная задержка, между показом кадров, определяет скорость показа анимации. Значения больше 1.0f отображают спрайт с увеличением скорости по мере роста значения; Значения ниже 1.0f, но выше 0.0f - т. е. 0.9f, 0.1f и т. п. отображают спрайт с большим замедлением по мере уменьшения значения.

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

 

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

 

В следующем уроке мы займемся рисованием подвижных фонов для игры.

 

 

 

к содержанию

подробнее

Creating game on fle game engine - Simple game / Создание игры на fle game engine - Simple game

1. Спрайты



read paper in english

В данном уроке мы проведем своего рода быстрый старт - это введение в создание игр в среде fle game engine.





Содержание

страница 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. Мульти анимация







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

Мы будем делать первую нашу игру, используя систему fle game engine.

Игра называется Веселый Шарик.



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



Понятие игровой сцены



Понятие игровой сцены

Любая 2d или 3d игра всегда включает игровую сцену и размещенные на ней игровые объекты.

На рисунке вы можете видеть игровой объект Шарик, размещенный в игровой сцене.

Игровая сцена плоская, 2d.



Спрайты



Спрайты

Вы видите на рисунке спрайты. Они могут быть статичными или анимированными.

Спрайт - это элемент графического динамического изображения.

Графического - потому что это элемент графики. Динамического - потому что изображение может содержать внутри себя несколько кадров.

На экране, в каждый момент времени, виден всегда лишь 1 кадр. Если спрайт состоит всего из 1 кадра - то это статичный спрайт.

Спрайты бывают квадратные и прямоугольные.

Основные характеристики спрайта - это его размеры, размер кадра, количество кадров и скорость их воспроизведения.

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

У нас с Вами будет всего 3 спрайта: прыгающий шарик и песчаный блок с ямой.

прыгающий шарик

прыгающий шарик

песчаный блок

песчаный блок с ямой

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

Ну а с песчаным блоком думаю всё понятно.

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

песчаный блок с ямой - передняя часть

песчаный блок с ямой - задняя часть

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

Это всё нужно для того, чтобы имитировать вот такой эффект -

прыгающий шарик

Посмотреть на спрайт своими глазами можно скачав пример Coords2D Simple game (307 Kb) -

Скачать пример Coords2D Simple game





Установить, запустить Coords2D.exe и выбрать пункт меню File > Reload.

Итак, спрайты подготовлены, теперь используя редактор Scene Editor, нужно подготовить игровую сцену - т. е. расставить игровые объекты по своим местам.

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

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



Пожалуйста войдите на сайт - Вход

или пройдите процедуру регистрации - Регистрация

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

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



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


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