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


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

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

Теги

создание сайтов, создание игр, дизайн, игры, информатика, уроки photshop, php, c++, музыка, delphi, cms, робосайт

Статьи сайта

megainformatic - Приключения Кости Коробкина - В гостях у тёти Светы часть 1 - интерактивный комикс

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

fle game generator - fle генератор игр - fly snow 3d падающий снег - расширяемый генератор визуальных образов, с музыкой mp3, ogg и генерацией игр

fle game generator - fle генератор игр - fly snow 3d падающий снег - расширяемый генератор визуальных образов, с музыкой mp3, ogg и генерацией игр

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

megainformatic Создание и размещение видео баннера mp4

megainformatic Использование баннер-ротатора

megainformatic fle game engine Simple game / Пример простой игры

megainformatic fle game engine Simple game / Пример простой игры - страница 1 - Спрайты

Creating game on fle game engine - Draw Line - This can be helpful/ Создание игры на fle game engine - Рисование линий - Это может пригодиться.

Платная подписка на fle game engine

megainformatic Создание игры на fle game engine - Simple game - страница 2 - Объекты / Пример простой игры

megainformatic Создание игры на fle game engine - Simple game - страница 3 - Объекты / Пример простой игры

Платная подписка на fle game engine

megainformatic Создание игры на fle game engine - Simple game - страница 4 - Код - Настройка параметров Scene Editor fge и написание кода для вывода спрайта шарика в вашем первом игровом приложении / Пример простой игры

megainformatic Создание игры на fle game engine - Simple game - страница 5 - Отображаем прыгающий шарик, узнаем как задается для спрайта его центр и знакомимся с векторной системой координат / Пример простой игры

megainformatic Создание игры на fle game engine - Simple game - страница 6 - Загрузка игровой сцены / Пример простой игры

megainformatic Создание игры на fle game engine - Simple game - страница 7 - Перемещения игровой сцены / Пример простой игры

megainformatic Создание игры на fle game engine - Simple game - страница 8 - Закрываем часть сцены от пустот при помощи черной текстуры с прорезью, ограничиваем перемещение сцены / Пример простой игры

megainformatic Создание игры на fle game engine - Simple game - страница 9 - Реализуем корректное попадание в ямы и около ям - определяем границы спрайтов ям и спрайта прыгаюшего шарика / Пример простой игры

megainformatic Создание игры на fle game engine - Simple game - страница 10 - Проверка столкновений / Пример простой игры

megainformatic Создание игры на fle game engine - Simple game - страница 11 - Игровой счёт, звуки, музыка / Пример простой игры

megainformatic Создание игры на fle game engine - Simple game extended - страница 1 - Создание новой сцены (уровня, комнаты), добавление новых возможностей / Пример простой игры - расширенная версия

Платная подписка на simple game fle game engine версия 1.0.7 от 05.01.2017

Платная подписка на simple game fle game engine версия 1.0.7 от 05.01.2017

Советы копирайтеру - как не обмануть и не быть обманутым

Balls and Holes игра скачать + как создать игру на fle game engine

Balls and Holes игра скачать + как создать игру на fle game engine

Something: Unexplained 2 captive of desires

KKK Коллекционное издание: Веселый Буквоежка Комикс + Костя Коробкин Комикс + Нечто: Необъяснимое в плену желаний 2 начало

KKK Коллекционное издание: Веселый Буквоежка Комикс + Костя Коробкин Комикс + Нечто: Необъяснимое в плену желаний 2 начало

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

megainformatic - Игродельня

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

megainformatic - С днём защитника отечества !

megainformatic fle game engine fle / Пример простой игры fle - Скроллинг больших локаций

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

megainformatic - Шарики и Ямки игра PC

megainformatic - Шарики и Ямки игра PC

megainformatic fle game engine fle / Изучаем основы c++ - переменные на примере реального игрового проекта Balls and Holes

megainformatic - Реферальная ссылка

megainformatic - Изменение постоянных свойств в зависимости от контекста

megainformatic - Костя Коробкин Компания Зергов онлайн комикс читать

megainformatic - Искатели приключений Зеленый Шарик

megainformatic - Без названия

megainformatic - Мульти анимация

Pencil, Paper and the Ball PC game

megainformatic - Костя Коробкин Компания Зергов онлайн комикс читать страница 2

megainformatic - Костя Коробкин Компания Зергов онлайн комикс читать страница 3

megainformatic - fle game engine - создание 3d игры - simple game 3d

Pencil, Paper and the Ball PC game

I Free lancer - tale, story Я фрилансер повесть, история

Шарики и Ямки игра, Эмулятор игры Ну Погоди, Balls and Holes, Веселый Буквоежка Комикс, Костя Коробкин Комикс, Нечто: Необъяснимое в плену желаний 2 начало, simple game, с новым годом

Процесс создания игры в картинках

Сравнение различных игровых движков. Плюсы и минусы

app combainer - комбайнер настольных и веб приложений

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

Сегодня Мы с Вами рассмотрим применение атрибута position

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

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

Особенно когда речь заходит о кроссбраузерности - т. е. одинаковом результате в разных браузерах.

Сначала приведу пример использования -



Красный блок - это DIV, описанный таким кодом -

<div style="float: left; width: 400px; height: 180px; background: #cc0011;">
</div>


Т. е. float: left - привязывание блока к левому краю контейнера (блока, его содержащего) - в нашем примере таким контейнером является внешний DIV, в котором находится данная статья.

Далее думаю понятно: width: 400px - ширина блока 400 пикселей
height: 180px - высота - 180, сразу дам совет если ваш блок планируется "резиновым" по высоте, тогда не указывайте атрибут height.

Соответственно цвет фона для блока - красный - background: #cc0011

Внутри красного блока DIV как видим расположен грязно-желтого цвета блок DIV.

Чтобы он остоял от левого края своего контейнера на 140 пикселей и от верхнего края на 50 пикселей зададим такой код -

<div style="position: relative; top: 50px; left: 140px; z-index: 1000; width: 200px; height: 80px; background: #aacc00;">
</div>


С шириной и высотой, а также цветом фона думаю Вам всё понятно, а вот новые атрибуты требуют пояснения

position: relative - задает расположение блока DIV "относительным" - т. е. смещения указанные у left и top задают относительное смещение внутри "родительского" контейнера - т. е. контейнера в котором расположен наш желый блок - по отношению в внешнему - красному блоку.

И вот тут таится главная ошибка всех НАЧИНАЮЩИХ ВЕРСТАЛЬЩИКОВ -

ИСПОЛЬЗОВАНИЕ position ТАМ, ГДЕ ЭТО СОВСЕМ НЕ НУЖНО.

!!! ПРАВИЛЬНО РЕШЕНИЕ ТАКОВО - используйте position там, где можно обойтись обычным float + margin. !!!

Т. е. блоки нужно выравнивать друг относительно друга с помощью атрибута margin - тот же самый пример более правильно записать так -



<div style="float: left; width: 400px; height: 180px; background: #cc0011;">

<div style="float: left; margin: 50px 0 0 140px; width: 200px; height: 80px; background: #aacc00;">
</div>

</div>


Внешне как видите никакой разницы. Но если использовать несколько блоков DIV внутри одного и того же контейнера, то разница будет ОЧЕНЬ ОЩУТИМА.

Посмотрим пример -



<div style="float: left; width: 400px; height: 180px; background: #cc0011;">

<div style="float: left; margin: 50px 0 0 40px; width: 60px; height: 60px; background: #22cc00;">
</div>

<div style="float: right; margin: 50px 0 0 40px; width: 60px; height: 120px; background: #220000;">
</div>

</div>


Пока всё просто :))))

А что если бы было вот так ?









<div style="float: left; width: 400px; height: 180px; background: #cc0011;">

<div style="float: left; margin: 50px 0 0 40px; width: 260px; height: 60px; background: #22cc00;">
</div>

<div style="float: left; margin: 50px 0 0 40px; width: 60px; height: 120px; background: #220000;">
</div>

<div style="float: left; margin: 50px 0 0 40px; width: 50px; height: 30px; background: #774100;">
</div>

</div>


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

Использование position позволяет избежать такого поведения -









<div style="float: left; width: 400px; height: 180px; background: #cc0011;">

<div style="position: relative; top: 50px; left: 40px; z-index: 1000; width: 260px; height: 60px; background: #22cc00;">
</div>

<div style="position: relative; top: 50px; left: 40px; z-index: 1000; width: 60px; height: 120px; background: #220000;">
</div>

<div style="position: relative; top: 50px; left: 40px; z-index: 1000; width: 50px; height: 30px; background: #774100;">
</div>

</div>


Но как видите приводит к тому, что места теперь уже хватило лишь 1 блоку.

Остальные блоки оказались совсем не там, где ожидалось.

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

МЫ ПОДОШЛИ К ГЛАВНОМУ - вы наверное уже заметили использование нового атрибута - z-index





<div style="float: left; width: 400px; height: 180px; background: #cc0011;">

<div style="position: relative; top: 0; left: 0; z-index: 1000; width: 260px; height: 60px; background: #22cc00;">
</div>

<div style="position: relative; top: -20px; left: 10px; z-index: 1001; width: 60px; height: 120px; background: #220000;">
</div>

<div style="position: relative; top: -40px; left: 10px; z-index: 1002; width: 50px; height: 30px; background: #774100;">
</div>

</div>






<div style="float: left; width: 400px; height: 180px; background: #cc0011; position: relative; top: 0; left: 0; z-index: 900;">

<div style="position: absolute; top: 0; left: 0; z-index: 1000; width: 260px; height: 60px; background: #22cc00;">
</div>

<div style="position: absolute; top: -20px; left: 10px; z-index: 1001; width: 60px; height: 120px; background: #220000;">
</div>

<div style="position: absolute; top: -40px; left: 10px; z-index: 1002; width: 50px; height: 30px; background: #774100;">
</div>

</div>


z-index всегда применяется совместно с position, поскольку без него просто не работает,
а используется он для позиционирования блоков по оси z - т. е. блоки с меньшими z располагаются на заднем плане, а блоки с большим z - поверх них.

Именно для такого позиционирования и правильно применять атрибут position, а во всех остальных ситуациях старайтесь обходиться простыми float + margin как было показано выше или вообще сверстать нужную часть страницы не блоками DIV, а при помощи TABLE (таблицы).

Считать, что "ДИВНАЯ" верстка более современна, а "ТАБЛИЧНАЯ" якобы устарела - в корне неправильно !

Почему ?

Да потому что бывают такие ситуации в верстке, когда обойтись без таблиц просто невозможно, особенно в плане поддержки очень старых браузеров, таких как IE 6, IE 5.5 или ниже.

Простой пример - красивое оформление форм - с позиционированием элементов по левому, правому краю. (см. например ФОРМУ ВХОДА нашего сайта или ФОРМУ для отправки комментариев).

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

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

Удачи !

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

 

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



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


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