Рубрика «javascript» - 265

в 20:23, , рубрики: canvas, Gamedev, html, javascript, phaser, phaser.js, TypeScript, WebGL, разработка игр

Phaser

Оглавление

0. Подготовка к работе
1. Введение [Вы тут]
2. (wip) Загрузка ресурсов
3. (wip) Создание игрового мира
4. (wip) Группы
5. (wip) Мир физики
6. (wip) Управление
7. (wip) Добавление целей
8. (wip) Последние штрихи

Добро пожаловать в наш первый урок по созданию игр на Phaser. Здесь я расскажу вам, как создать небольшую игру — платформер, которая познакомит вас с основными функциями данного фремворка и работу с ним в нынешних реалиях (ES6 / TypeScript + WebPack).

Что такое Phaser?

Phaser — это HTML5 (JavaScript / TypeScript) игровой фреймворк, который призван помочь разработчикам создавать крутые, кросс-браузерные HTML5 игры в короткие сроки и, в отличии от других фреймворков, phaser изначально затачивался под мобильные устройства. Единственное требование выдвигаемое данным фреймворком — поддержка тега <canvas />. Он также много чего унаследовал от Flixel.

Читать полностью »

в 20:17, , рубрики: canvas, Gamedev, html, javascript, phaser, phaser.js, TypeScript, WebGL, разработка игр

Phaser

Оглавление

0. Подготовка к работе [Вы тут]
1. Введение
2. (wip) Загрузка ресурсов
3. (wip) Создание игрового мира
4. (wip) Группы
5. (wip) Мир физики
6. (wip) Управление
7. (wip) Добавление целей
8. (wip) Последние штрихи

Эта серия статей научит вас основам и "хорошему тону" игрового фремворка Phaser. За данный курс, я постараюсь объяснить вам основные идеи и возможности фреймворка, а также покажу как его грамотно использовать в связке с TypeScript и Webpack.

Читать полностью »

в 19:39, , рубрики: angular, css, ES6, html, html5, javascript, JS, React, vue, Блог компании Zfort Group, браузеры, дайджест, Разработка веб-сайтов, ссылки, фронтенд

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №255 (20 — 26 марта 2017) - 1

Читать полностью »

в 17:45, , рубрики: chrome, Extensions, Google Chrome, javascript, yandex browser, хром, метки:

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

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

Веселый JS

primer = {};
primer["svoistvo1"] = "reddis";
primer["svoistvo2"] = primer;
primer["svoistvo2"]["svoistvo2"]["svoistvo2"]["svoistvo2"]["svoistvo1"] = "dadada";
console.log(primer);

Пример создания одного chrome extension - 1

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

В это статье я покажу, как можно создать chrome extension.
Читать полностью »

в 18:33, , рубрики: align, Bootstrap, css, html, javascript, vertical-align

При работе с фреймворком Bootstrap обычно сталкиваются с тремя основными проблемами:

  1. Как поместить контент внизу колонки?
  2. Как создать многорядную галерею колонок одинаковой высоты в одном .row?
  3. Как центрировать горизонтально несколько колонок, если их суммарная ширина меньше 12 единиц и оставшаяся ширина нечетна?

Для решения первых двух проблем, необходимо скачать небольшой плагин https://github.com/codekipple/conformity

Решение третьей проблемы подсмотрено здесь http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns

Общий код

<style>
    [class*=col-] {position: relative}
    .row-conformity .to-bottom {position:absolute; bottom:0; left:0; right:0}
    .row-centered {text-align:center}   
    .row-centered [class*=col-] {display:inline-block; float:none; text-align:left; margin-right:-4px; vertical-align:top} 
</style>

<script src="assets/conformity/conformity.js"></script>
<script>
    $(document).ready(function () {
        $('.row-conformity > [class*=col-]').conformity();
        $(window).on('resize', function() {
            $('.row-conformity > [class*=col-]').conformity();
        });
    });
</script>

Читать полностью »

в 16:15, , рубрики: android, glsl, javascript, shaders, WebGL, Разработка под android

Идея

Новый стандарт WebGL 2 стал недавно доступен в последних версиях Firefox и Chrome, так что возникло желание опробовать некоторые новые возможности. Одна из наиболее полезных и востребованных функций WebGL 2 (и OpenGL ES 3.0, на котором он основан) это дублирование геометрии (англ. instanced rendering). Эта фича позволяет уменьшить количество вызовов отрисовки (draw calls) путем многократной отрисовки одной и той же геометрии с измененными параметрами. Эта функция присутствовала и в некоторых реализациях WebGL 1, но требовала наличия определенного расширения. Наиболее часто эта функция применяется для создания систем частиц и растительности, но также довольно часто она используется для симуляции меха.

Шейдер меха на WebGL 2 - 1

Читать полностью »

в 13:31, , рубрики: AR, browsers, ECMAScript, javascript, js победит, virtual reality, VR, WebVR, Блог компании Туту.ру, ничоси, Разработка под AR и VR

VR-AR в браузере. Как быстро влиться и сделать свое первое приложение, используя WebVR API - 1

Виртуальная и дополненные реальности активно развиваются и начинают предъявлять права на захват мира. Причем применение этих технологий разнообразно и не ограничивается только играми. А с появлением инструментов для работы с VR/AR технологиями в браузере интерес возрос еще больше. Уже сейчас можно экспериментировать и создавать MVP(Minimum Viable Product) веб-проекты с помощью JavaScript API, которое так и называется — WebVR. Давайте разбираться, что это и как с этим работать. И можно ли обойтись без этого самого WebVR API?
Читать полностью »

в 7:44, , рубрики: error reporting, javascript, Yandex Metrika

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

в 7:08, , рубрики: holyjs, javascript, offline web applications, Блог компании JUG.ru Group, видео, Программирование

Прошло три месяца после JavaScript-конференции HolyJS 2016 Moscow, и это значит, что сейчас самое время выложить видеозаписи докладов и составить рейтинг лучших. Напомню, что рейтинг составляется не «экспертным жюри», а участниками в форме обратной связи – более 400 человек ответили на наши вопросы и поставили оценки докладам, которые они слушали.

В этот раз топ подобрался интересный, разнообразный и почти полностью англоязычный. Вы найдете видео о (dev)tools и ServiceWorker'ах, о минимизации кода и роли UX в обойме навыков frontend-разработчика и о многом другом, включая WebVR.

Лучшие доклады HolyJS 2016 Moscow: Доступ открыт - 1

Разнообразие зоопарка инструментов в мире JS не обошло стороной и HolyJS — почти каждый доклад в той или иной степени посвящен какому-либо фреймворку или инструменту, — но обзор для каждого из них дан глубокий и исчерпывающий, не заскучаете.

Читать полностью »

в 20:18, , рубрики: Google Chrome, indexeddb, javascript, асинхронность, разработка сайтов

Привет! В последнем релизе Chrome обнаружил очень необычное поведение браузера. Это поведение вызывало новые необычные ошибки в моём веб-скрипте. И я решил поделиться, как оптимизируют производительность Chrome, и про то, с какими необычными последствиями можно столкнуться.

Непредсказуемые последствия оптимизации производительности Chrome - 1

Поехали.

Читать полностью »

1...1020...264265266...270280...577
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js