Обучение JS и разработка игры Самолётик. Шаг 2.

В подготовительной части  мы подгружали 2 JS файла:

<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/step1.js"/></script>

Если про 1 я упоминал — это сам 3D фреймфорк, то файл «step1.js», то то что нам предстоит создать.

Преступим.

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

Нам нужно создать соответствующие объекты. three.js содержит «по умолчанию» ряд стандартных графических объектов, такие как шар, куб, цилиндр, пирамида и тд. — подробнее можно глянуть в описании ФВ.

Итак с объектами разобрались — но игра это не только объекты, это и «камера» от лица который мы видим «сцену» , так же это освещение и управление объектами. Для удобства создания и обновления всех объектов создадим «основной» модуль-функцию, пусть называется  «init»:

window.addEventListener('load', init, false);

function init() {
	// тут создаем сцену - камеру
	createScene();

	// тут добавляем свет, а то темно будет
	createLights();

	// тут появляются чать наших объектов, 
        // еще не все что нужно, но уже что-то
        // Сам самолетик / поверхность для полета будет море / облака
	createPlane();
	createSea();
	createSky();

	// здесь в зависимости от "контроллов",
        // мы будем менять положение наших объектов 
	// а так же генерировать изменения ландшавта
	loop();
}

 

Давайте начнем с самого простого и понятного — наших 3D объектов :

Самолетик:

 

Обучение JS и разработка игры Самолётик. Шаг 1.

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

Итак ШАГ 1.

Создаем папку «Самолетик», я это сделал на рабочем столе.

В этой папке создаем файл index.html

Делаем в нем следующий код:

<!DOCTYPE html>
<html lang="en" class="no-js">
 <head>
 <meta charset="UTF-8" />
 <title>Самолетик: Часть 1 </title>
 <link rel="stylesheet" type="text/css" href="css/styles.css" />
 <script type="text/javascript" src="js/three.js"></script>
 <script type="text/javascript" src="js/step1.js"/></script>
 </head>
 <body>
 <div class="world" id="world"></div>
 </body>
</html>

Потом внутри делаем еще 2 папки «css» и «js», и

Идем на сайт http://threejs.org/build/three.min.js и скачиваем последнюю версию самого фреймворка или скачиваем ее ОТ МЕНЯ  (версия скачана 12.07.2016), чтобы точно работало, и кидаем ее в папку «js» (имя должно быть three.js)

В папке «css» создаем файл  styles.css, со след наполнением (ОН ЖЕ,только с заготовкой для 2 части):

.world {
 position: absolute;
 width: 100%;
 height: 100%;
 overflow: hidden;
 background: -webkit-linear-gradient(#e4e0ba, #f7d9aa);
 background: linear-gradient(#e4e0ba, #f7d9aa);
}

Это наш «мир» а именно, фон.

Итак подготовка сделана. Осталось творить — ШАГ 2.

Статья для habrahabr

Решил попробовать стать полноценным жителем habrahabr.ru. Для получения заветного «ключа» нужно представить относительно полезную/интересную статью или ее перевод, или обзор по технологии — в общем что-то связанное с IT и не слишком «замыленное» на Habre.

Так как сейчас начал изучать JavaScript  в виду его активного роста, простоты изучения и увеличения возможностей за счет различный фреймворков, для создания web приложений — ориентир на SPA ( SPA в WiKi )

Кстати для начала разработки SPA сайтов и приложений кроме JS нужно еще знание HTML / HTML5 , CSS, AJAX.

После изучения базовых основ, а для этого мне очень помогла статьи на Habre, направляя на пусть истинный:

Как стать профессиональным веб-разработчиком: практическое руководство

А для «набивания руки» в JS использовал игру codecombat.com , которая вплоне дает понимания как основ программирования , так и использования JS в принципе. PS.  в CodeCombat можно выбрать не только JavaScript, но и например Phyton, для изучения — вперед дерзайте!

PS. Так же у каждого разработчика должна быть под рукой статься с Более 350 бесплатных инструментов для разработчиков так же на Habre.

По совету той же статься после основ, стал искать различные фреймворки и проекты с открытым исходным кодом. И ткак как мне всегда нравились игры нашел статью по созданию игры The Aviator — летающий самолетик который уклоняется от камней и собирает «топливо», в которой есть не только исходники, но и «пошаговое описание» как эту игру сделать:

Делаем игру «Самолетик» используя Three.js

Раз пример будет использовать Three.js, то соответственно наш путь идет на  http://threejs.org/ — где имеется полное описание для данного FW с примерами. Туду нужно заглянуть тем кто заинтересуется как работают «потрошки».

В рамках обучения лучше не просто повторить, то что уже кто-то сделал, а попробовать немного изменить и посмотреть что получиться. Сразу же возникло желание немного её упростить и переделать на «ловить» буквы и составлять из них слова — само собой расчет на аудиторию в 4-6 лет.

Ну как говориться если хочешь чему то научиться, попытайся обучить этому другого)…

Итак ШАГ 1.

 

 

 

Как получить базовые понимания основных элементов в программировании играя в игру?

Если вы хотите получить практическим путем базовое понимание что такое алгоритм в программировании, понимания циклов, а так же понятие инкапсуляции (или модульность), то для этого недавно открыл для себя отличную игру!  С удовольствием в нее поигрался сам, а теперь ее осваивает моя дочка. Называется данная игра LigthBOT. В этой игре требуется путем «написания кода» в виде добавления команд кирпичиков, создать алгоритм-программу для управления роботом.

Ligthbot1

Цель игры сделать «активными», путем их «подсвечивания», все синие квадратики.

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

http://lightbot.com/

Игра отлично подойдет всем начинающим программистам).

Ремонт в ванной и туалете. Подготовка.

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

Поэтому ванну и туалет было решено отдать ремонтникам «под ключ», но все равно возникали различные проблемы.

1 ) Самое главное еще ДО того как будет уложена 1 плитка ВСЕ использующиеся материалы должны быть согласованы, расположении плитки (рисунков/декора) должно быть нарисовано на макете. ВСЕ работы должны быть расписаны и утверждены чтобы ни у вас ни у ремонтников не возникло никаких вопросов с последующей приемкой и оплатой. Итого что нужно обговорить перед началом работ и что нужно обязательно включить в договор:

  1. Кто будет закупать черновые и чистовые материалы. Стоит учесть что закупка различных смесей, плитки или крупногабаритной ванны с доставкой достаточно дорогое удовольствие и в случае со смесями при заказе небольшими партиями доставка может легко достигает половины их стоимости, и если покупать Самостоятельно, то только ВСЕ СРАЗУ. Закупку материалов можно доверить и мастерам, т.к. у них часто имеются «прикормленные» поставщики, которые с удовольствием доставят все что нужно, но при закупке материалов строителями стоит сразу уточнить что стоимость материалов не должна быть выше чем, как пример, в Леруа Мерлен  — почти все закупки я делал там и цены на черновые материалы там вполне конкурентные.
  2. Есть ли определенный тип материалов только с которым работают мастера. Вы им привезете пескобетон, а они только с Ceresit  CM16 работают.
  3. Когда будут начаты работы и когда мастера подготовят все сметы — лучше сразу просить 2-х недельную отсрочку начала работ чтобы гарантированно закупить все необходимое.
  4. Будут ли мастера жить на «объекте», и кто должен им обеспечить достаточно комфортные условия проживания: временный туалет/душ, питание, место ночевки.
  5. Кто будет оплачивать «расходные» материалы и входят ли они в стоимость «под ключ».
  6. Если вдруг по вине заказчика будут простои, например не успели вовремя привезти плитку, будут ли они оплачиваться отдельно и как (час/день).
  7. Если вдруг по вине строителей будет сдвиги по срокам, будут ли они снижать стоимость ремонта.
  8. Сроки устранения обнаруженных дефектов (тьфу,тьфу, тьфу — чтоб не было).
  9. При порче материалов обязуется ли мастер полностью компенсировать расходы на покупку новых.

2) Нужно не только расписать все работы но и обговорить детали, ответ «Да» на каждый из вопросов ниже сделает ремонт в чем то лучше или удобнее, но более трудоемким в работе, а значит и дорогим и по умолчанию часть работ в «под ключ» может не подразумеваться и их «забудут» сделать, поэтому каждый из пунктов ниже нужно озвучить перед мастером и получить его комментарий и делать выводы о нужности в каждом конкретном случае:

  1. Разводка труб будет полностью в стенах ( возможно когда она идет частично под ванной или полностью открыто, что должно быть дешевле — т.к. проще)?
  2. Разводка слива будет полностью в стенах?
  3. Разводка труб будет идти параллельно для каждого выхода или последовательно (они же — коллекторная и тройниковая )?
  4. Будет ли установлен бойлер?
  5. Будет ли установлен автоматический блокиратор протечек (Аквостоп или аналог)?
  6. Будут ли установлены фильтры (горячая и холодная вода)?
  7. Будет ли отдельный душевой модуль?
  8. Будет ли установлен теплый пол?
  9. Туалет будет подвесной инсталляцией?
  10. Экран под ванной будет из плитки?
  11. Люки для доступа к коммуникации будут скрытыми?
  12. Будут ли установлены двери в «под ключ»?
  13. Будет ли устроен навесной или натяжной или многоуровневый потолок со сложной подсветкой, 3-х и более независимых источников (основной свет, подсветка зоны зеркала, декоративная цветная подсветка, как пример).
  14. Будет ли произведена звукоизоляция общего стояка?
  15. Частичная или полная разводка медными трубами, но это не просто дорого, а очень дорого, но при этом будет «на века» и почти 100% защита от протечек?

3) Перед укладкой плитки необходимо произвести расчеты по уклонам стен и заранее согласовать каким способом они будут исправляться и выравниваться. И из этого сделать расчет по количеству клея для плитки, рекомендую использовать для оценки слой клея в 10мм при практически идеальных стен и 20мм при «слегка под уклоном».

Советы по покупке материалов:

  1. Если товар со скидкой ОБЯЗАТЕЛЬНО уточняйте будут ли еще закупки у поставщиков или это распродажа остатков разорившегося производителя. Если вам не хватит пары плиток и их негде будет купить — то это Эпик Фейл!
  2. Еще в магазине проверяйте комплектацию для «мебели». Иногда крепежные элементы или основания, ножки для ванны, подсветка для зеркала, ручки и др элементы фурнитуры могут идти отдельно от основного товара и их нужно докупать. Очень обидно это узнать дома при приемке товара или распаковке и потом бегать по магазинам в поисках недостающих частей, а если проблема соединяется с 1 пунктом ,то будет в тройне весело!).
  3. При покупке экрана, особенно если его не видим в живую, для ванны учитывайте, что левая/правая может быть именно левый или правый экран, а не расположения для ванны. У акриловых ванн такое часто бывает и передние экраны у них могут называются фронтальными.
  4. Проверьте пяток плиток точной рулеткой, если есть расхождения больше 1мм по любой плоскости — лучше не брать. Аналогично и на «погнутость».

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

Ускоряем выполнение VBA кода, а так же убираем ненужные уведомления (всплывающие окна).

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

Excel.Application.ScreenUpdating = False    ‘убирает обновление экрана. Можно использовать почти всегда — лишняя нагрузка на процессор.

Excel.Application.DisplayAlerts = False     ‘убирает всплывающие окна. Совсем. Использовать аккуратно.

Excel.Application.EnablEevents = False     ‘убирает обработку событий в Excel. События необходимо отключать для исключения зацикливания или выполнения незапланированных действий. Например при внесении одним макросом значения на лист и лишнего (не нужного) выполнения другого макроса по обработки события добавления значения на лист — который, как вариант, рассчитан на ручной ввод. Использовать только при необходимости.

Excel.Application.Calculation = xlCalculationManual     ‘убирает автопересчет формул и зависимых от них объектов. Можно и нужно использовать почти всегда — лишняя нагрузка на процессор, особенно если формулы использующие массивы или поиск.

Не забываем ОБЯЗАТЕЛЬНО все вернуть обратно, чтобы пользователи не ругались = ) :

Excel.Application.ScreenUpdating = True
Excel.Application.DisplayAlerts = True
Excel.Application.EnableEvents = True
Excel.Application.Calculation = xlCalculationAutomatic

 

«Горячие» клавиши, которые сделают вашу работу в Excel эффективнее.

Заставьте себя выучить все сочетания клавиш описанные ниже, и ваша работа в Excel станет на порядок эффективнее — очень существенно увеличится скорость работы, особенно это касается при работе с большими объемами данных.

Конечно это не все возможные сочетания, но на мой взгляд самые полезные — Вот они, распечатай и наклей на монитор.

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

Ctrl + Перемещать ячейки за «крестик»
Если попытаться переместить ячейки с зажатым Ctrl, то ячейки не только перенесутся, а копируются. Аналогично можно копировать не только ячейки, но и строки и столбцы.
Shift + Перемещать ячейки за «крестик»
Если попытаться переместить ячейки/столбцы/строки с зажатым Shift, то вы заметите, что перемещаемые ячейки не заменят ячейки на которые мы перемещаем, а «раздвинут» данные или по горизонтали или по вертикали.
Ctrl + «+»
Добавление ячеек / строк / столбцов, в зависимости от выделения — если выделена строка или столбец, то добавит соответственно строку или столбец, а если выделен диапазон, то предложит добавить через меню
Ctrl + «-»
Удаление ячеек / строк / столбцов, аналогично с «+».
Ctrl + «*»
Выделение всех смежных ячеек. Смежные, это Все ячейки которые имеют заполненными хотя бы 1 соседнюю ячейку. Выделяется прямоугольник.
Ctrl + стрелка
Перемещение курсора в конец / начало сплошного диапазона (до первой пустой ячейки или границы листа)
Ctrl + Shift + стрелка
Выделение диапазона до первой пустой ячейки. После выделения можно переместить курсор на другую ячейку и через Shift продолжать их выделять!
Ctrl + End
Правый нижний угол использованного диапазона ячеек. Не последней заполненной ячейки, а именно «Использованного» диапазона, если у вас в какой-то ячейки были значения и вы их потом удалили кнопкой Del, то курсор переместиться на «пустую» ячейку.
Ctrl + Home
Левый верхний угол использованного диапазона ячеек
Ctrl + 1
Свойства ячеек
Ctrl + PageUp
Перейти на предыдущий лист
Ctrl + PageDown
Перейти на следующий лист
Ctrl + F
Поиск значений
Ctrl + H
Замена значений
Ctrl + C
Скопировать значение / объект
Ctrl + X
Вырезать значение / объект
Ctrl + V
Вставить значение / объект

Обучение — где и как. Мои пройденные курсы с отзывами.

«Куда пойти учиться?» — это вопрос задают себе те, кто хочет быть всегда  в тонусе и  быть востребованным на рынке услуг.

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

«Бесплатно, то бишь даром« :

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

cyberforum.ru — огромный форум с большим объемом информации по программированию администрированию и всему IT сопутствующему. Если вы используете какой то более менее популярный стек технологий, то все грабли на которые можно наступить участники этого форума уже наступили — крайне рекомендую использовать чужой опыт).

intuit.ru — начинал как сборник курсов для самоподготовки, а сейчас полноценный интернет университет. При желании можно получить как простой внутренний сертификат «о прослушивании/прохождении», так и бумажки посерьезнее, вроде диплома о переподготовки и повышении квалификации, так и полноценное высшее образование — за которое соответственно придется заплатить, но пройденные бесплатно курсы будут учтены. Все курсы которые входят в «платные» программы, доступные и в бесплатном варианте. Информации много, но требуется внимательно смотреть на старость курса и его отзывы . Так если для менеджмента или психологии, «фундаментальных» знаний в объеме расширенной школьной программе разница в пару лет не так страшна, то по современным ИТ технологиям ИМХО тут можно найти только основы.

«Бесплатный сыр только в мышеловке»?: если я плачу деньги за образование, то их стоит отдавать только за те знания и  итоговые «бумажки» которые ценятся работодателями, я предпочитаю specialist.ru  в нем проходил несколько курсов — организация и подача знаний мне в целом понравились. Не скажу что там мне открылись новые горизонты, но разнообразить ваше «портфолио» знаний вполне сгодиться, особенно тем кто не в силах себя заставить обучиться самостоятельно.

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

Мои курсы

тут будет список…

[свернуть]

 

 

 

Трудности при разработке игр.

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

«Оставь надежду всяк сюда входящий» — создание игры чаще всего, это не «круто» или «весело», а это работа или даже «ТРУД», к которому надо себя заставлять:

  1. Учиться — а куда же без этого. Если вы рассчитываете все делать самостоятельно, то придется мнооого учиться. Даже если вас в команде 3-4 человека, то все равно придется совмещать те же 3-4 роли).
  2. Выделять время — за 2-3 часа в неделю на что-то типа тетриса вам потребуется года полтора, если опыта мало, или полгода если он уже есть (имеется ввиду создание не «работающего прототипа», а полный цикл).
  3. Искать команду — если и тетрис можно сделать самому, то для всего остального нужно разделение труда. Как только мы видим что новый проект своими силами мы реализуем за 6-7+ месяцев нужно искать команду, обычно проекты забрасываются на этом сроке из-за «усталости».

Проект разработки можно разделить на несколько этапов — они могут и будут чаще всего идти частично параллельно, но обычно следующий этап нельзя начинать пока не наберется «критическая масса» с предыдущего и крайне не рекомендуется держать активными больше 2-х этапов — если 3, то это уже увеличение объема работ, ну а 4 — уже не «процесс», а «каша» которой и управлять нельзя и результат будет непонятный:

  1. Идея — да все банально, без создания воздушного замка в голове все последующие действия будут напоминать подергивание под музыку — «вроде и не месте стоим, но и танцем это не назвать». Под идеей, нет не так под ИДЕЕЙ, понимается не мысли «сделать новый варик», или «сейчас по быстрому забацаю КС». Под идей понимается вполне конкретное ТЗ, в любом виде, но оно должно быть! с описанием игры, мира, игрового процесса, фич, дизайна игры, дизайна локаций, используемых технологий, ГДЕ и КТО как вы ожидаете в эту игру будет играть — это из обязательного.
  2. Создание элементов — сначала идет кропотливая работа по созданию различных объектов, физики, скриптов, рисуются текстуры и фоны.
  3. Создание прототипа из элементов — как только элементов хватает чтобы собрать 1 демо уровень, сразу это делаем и проверяем концепцию игры, геймплей и др составляющие, на этом этапе еще как то можно повлиять на результат без сильных задержек в сроках. Но стоит помнить что это самый затратный и сложный этап — как только он выходит на финишную прямую что-то поменять будет сложно без существенных дополнительных ресурсов.
  4. Тиражирование — тут начинаем творить, у нас уже есть необходимые объекты (персонажи, элементы локаций, элементы интерфейса и тд) со всеми его возможными действиями, есть большая часть объектов, текстуры уже «натянуты» на объекты, по большей части, начинаем все ЭТО компоновать в «Сцены» ну или уровни.
  5. Тестирование — перед выходом «в люди», нужно протестировать ВСЕ что только можно, любая мелочь, которую «добавили в последний момент» может сделать игру «непроходимой» или «проходимой слишком просто», как показывает практика — попытка «выстрелить» есть только 1 — НЕЛЬЗЯ выпускать сырой продукт для общего использования!
  6. Сопровождение — а куда без него). Получаем фидбак и делаем исправления.
  7. Модернизация — Тестировать больше нечего, ключевые ошибки выловили и подчистии — проект взлетел? Если да, то отлично — самое время для реализации всего что «хотелось, но не моглось», а именно , повторяем 4-5 этапы и делаем новый контент (DLS). Добавляем новые фички и логику.  Главное на этом этапе вовремя понять что «хватит доить золотую корову»), и приступать к новым свершениям. Ну а если проект не взлетел, то порадоваться полученному опыту и с новыми силами браться за новые проекты.

Сейчас наверное многие начнут кричать про различные «гибкие» подходы, Agile или Scrum — НЕ рекомендую, если вы читаете эту статью и она вам кажется полезной, то вы в самом начале пути, а гибкий подход подразумевает достаточный опыт чтобы избегать наиболее критических его недостатков, вроде «отсутствие понимания итогового продукта» или «крупные изменения по ходу проекта». Поэтому «бейте себя по рукам» когда вам захочеться вентуться

В следующей части переходим к пункту 1 — Учиться), а именно обзор того что нужно знать, хотя бы на базовом уровне!

Excel POWER! — 1 Статья

Начинаю серию примеров по возможному использованию Excel саааавсем не так, как вы привыкли.

VBA дает Excel-ю кучу возможностей по оптимизации своего рабочего времени.

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

Итак сегодня у меня возникла следующая задача:

Есть одна ИС в которую пользователи добавляют файлы, она недавно стартовала, и теперь пользователям нужно в нее добавить МнОгО файлов. И тут обнаружился один неприятный факт — в ИС нельзя добавлять файлы, в имени которых есть больше 1 точки (для типа файла).

Мотивация: Переименовать 1 файл в ручную, например такой «2015.05.19 План раз. СМ Y16-17 (сн.) v2.1», займет примерно 10-15 сек. Вот только таких файлов около 2000, а это уже 15*2000/60 = больше 8 часов.

Вот что я сделал на Excel, используя возможности VBA — мои трудозатраты с «вспоминанием» как бы это можно сделать — около 4 часов.

Через VBA есть возможность подключить выполнение скриптового языка File System Object (FSO). Про него я наверное напишу отдельную статейку, уж больно много у него возможностей.

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

Что в итоге — написав 1 раз инструмент под конкретную задачу использовать его можно сколько угодно раз + мы получили экономию во времени СРАЗУ, получив в плюсе больше 4 часов.

Работайте продуктивно).

А вот и сам файл:

ReName_v1

ПС. ах да), все что выкладываю, предназначено для ОЗНАКОМЛЕНИЯ!, и используется на ваш страх и риск, я никакой ответственности за ваши действия нести не буду!