как запустить скрипт javascript
Как запустить JavaScript с помощью Node.js
Если вы только сели за изучение JavaScript, то у вас очень быстро возникнет вопрос: а как запустить код?
Простой скрипт можно запустить прямо в браузере. Большинство из них сегодня позволяют сделать это в пару кликов. Но возможностей браузера не хватит, если задача — разработка сложного приложения, работающего с базами данных и файлами. Здесь на помощь приходит Node.js.
Node.js — среда выполнения JavaScript-кода. Она создана на базе движка V8, который крутится в сердце браузера Chrome. Эта среда позволяет запускать JavaScript-сценарии в окружении операционной системы, а не браузера.
Кроме стандартных возможностей JavaScript, Node.js даёт инструменты для работы с сетью, вводом и выводом, файловой системой и не только. В придачу к среде идёт и пакетный менеджер npm, который позволяет разработчикам ставить сторонние пакеты в одну строку.
Разобраться с базовыми функциями будет просто, если вы уже знаете JavaScript или другой скриптовый язык.
Давайте попробуем
Сначала установим среду с сайта разработчиков и проверим в консоли, что всё прошло нормально.
Введём простую команду:
Результат, который мы получили:
Рассмотрим пару простых примеров. По традиции выведем Hello world! :
Hello world!
Попробуем пример сложнее, например, цикл выводов. Как консоль отреагирует на него?
Цикл выводов.
Node.js отлично справляется и с более сложными конструкциями, даже самостоятельно выстраивая лесенку. В случае обнаружения ошибки, он тут же сообщит об этом, остановив скрипт.
Например, случайно пропустим букву в команде:
Упс, ошибка.
Ну вот, всё необходимое для написания простых и компактных приложений есть. Но писать большое приложение на десятки строк кода в консоли будет не слишком-то удобно. Да и такой подход не сработает, если приложение разбито на несколько скриптов, лежащих в разных файлах.
Усложняем задачу
Попробуем перейти к чуть более продвинутому использованию среды.
Создайте на жёстком диске папку для проекта и положите туда ваш готовый скрипт. Назовите его index.js — так принято. Если под рукой скрипта нет, то возьмите цикл с выводом простого значения, с которого мы начали.
Второй способ — самостоятельно создать текстовый файл, назвать его package.json и заполнить все необходимые поля. Файл будет представлением приложения, в котором содержится его имя, версия, авторы и зависимости. На данном этапе может выглядеть так:
Но вводить команду постоянно — не слишком рациональное расходование времени. Давайте упростим себе жизнь.
Скопируйте в файл следующий код:
Подробнее про команды можно прочитать здесь.
Что мы сделали
Теперь при вводе команды npm start будет запускаться наш сервер, который будет обрабатывать всё содержимое нашего приложения.
Внешние скрипты, порядок исполнения
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/script-async-defer.
Если JavaScript-кода много – его выносят в отдельный файл, который подключается в HTML:
Здесь /path/to/script.js – это абсолютный путь к файлу, содержащему скрипт (из корня сайта).
Браузер сам скачает скрипт и выполнит.
Можно указать и полный URL, например:
Вы также можете использовать путь относительно текущей страницы. Например, src=»https://learn.javascript.ru/lodash.js» обозначает файл из текущей директории.
Чтобы подключить несколько скриптов, используйте несколько тегов:
Как правило, в HTML пишут только самые простые скрипты, а сложные выносят в отдельный файл.
Браузер скачает его только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего кеша.
Благодаря этому один и тот же большой скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера.
В одном теге SCRIPT нельзя одновременно подключить внешний скрипт и указать код.
Вот так не сработает:
Асинхронные скрипты: defer/async
Браузер загружает и отображает HTML постепенно. Особенно это заметно при медленном интернет-соединении: браузер не ждёт, пока страница загрузится целиком, а показывает ту часть, которую успел загрузить.
Инструкция по запуску Java-скриптов в браузерах Firefox, Chrome, IE, Opera, Safari и других
На нашем сайте опубликовано уже множество различных Java-скриптов для социальных сетей. И в описании каждого скрипта описывать подробные инструкции по их запуску… Это ни к чему. Мы решили написать полноценный мануал с описанием установки скриптов на все браузеры, а также учесть наличие нескольких способов установки на один конкретный браузер и описать их все.
Запуск Java-скриптов через консоль браузера
Сейчас, как известно, запуск скриптов через консоль является наиболее популярным и простым, а главное рабочим способом их использования. Следовательно, с этого мы и начнём – со способов попасть в консоль для каждого браузера.
Консоль в Mozilla Firefox
Проще всего попасть в веб-консоль в браузере Mozilla Firefox можно при помощи сочетания клавиш Ctrl + Shift + K. Нажмите и консоль отобразится.
Консоль в Google Chrome и других браузерах, основанных на Chromium
В Google Chrome, Opera 15+, Амиго, Orbitum и других браузерах, основанных на Chromium, также имеется способ запуска веб-консоли при помощи горячих клавиш. Для этого нужно одновременно нажать Ctrl + Shift + J.
Консоль в Opera 12
Чтобы запустить веб-консоль в браузере Opera старого поколения (не старше 12-ой версии), нужно использовать сочетание клавиш Ctrl + Shift + I. Это позволит запустить Opera Dragonfly – панель с инструментами для разработчика. После её открытия перейдите на вкладку Консоль.
Консоль в Internet Explorer
Чтобы открыть консоль в веб-браузере Internet Explorer, необходимо сначала нажать на кнопку F12, а затем нажать сочетание Ctrl + 2 (двойка на центральной панели, а не в секции Num).
Консоль в Safari
В Safari, перед открытием консоли, обязательно нужно войти в настройки браузера (шестерёнка в правом верхнем углу » Настройки… » Дополнения) и подключить опцию Показывать меню «Разработка» в строке меню. После этого, консоль можно будет вызывать сочетанием клавиш Ctrl + Alt + C.
Все скрипты вводятся в консоли в специально отведённое поле рядом с иконкой-стрелочкой (см. скриншоты, зоны для ввода скриптов выделены красной рамкой). Запуск скриптов осуществляется нажатием кнопки Enter. После ввода и запуска любого скрипта вы будете видеть все комментарии или ошибки в ходе их выполнения.
Запуск Java-скриптов из адресной строки браузера
Метод запуска скриптов из адресной строки браузера является более старым методом, а скорее даже традиционным. Изначально, все скрипты запускались именно таким образом. Но тенденции меняются, мир развивается. В большинстве браузеров после вставки кода скрипта в адресную строку нужно дописывать код вручную, чтобы запустить, а в некоторых браузерах адресная строка вообще не обрабатывает java-скрипты.
Адресная строка в Mozilla Firefox
Печально, но ни одна из самых последних версий браузера Mozilla Firefox не поддерживает обработку скриптов через адресную строку. Хоть и в более ранних версиях подобная опция присутствовала, в современном Firefox разработчики решили от этого отказаться.
Адресная строка в Google Chrome и других браузерах, основанных на Chromium
В браузере Google Chrome и любом другом браузере, построенном на его исходных кодах, таких, например, как Opera 15+, Amigo, Orbitum и других, можно запускать скрипты в адресной строке. Но! После вставки скрипта, перед ним обязательно нужно дописывать слово javascript: (вместе с двоеточием), иначе (благодаря такому явлению, как omnibox) вместо запуска скрипта будет происходить перенаправление на поисковую систему.
Адресная строка в Opera 12
В браузере Opera 12 всё обстоит намного лучше. Для запуска скрипта достаточно вставить его в адресную строку и запустить. Никаких проблем при этом возникать не должно.
Адресная строка в Internet Explorer
В данном браузере, как и в Google Chrome и ему подобных, после вставки скрипта в адресную строку, в самом начале нужно дописать javascript: (вместе с двоеточием), иначе скрипт не заработает.
Адресная строка в Safari
Ну а в Safari дела обстоят так же хорошо, как и в Opera 12. Просто вставьте имеющийся скрипт в адресную строку и запустите.
Использование браузерных плагинов для хранения и запуска скриптов
Если скрипты нужно использовать постоянно, то необходимо возиться с ними, копировать с сайта или текстового файла, вставлять в адресную строку или консоль каждый раз. Согласитесь, – это не удобно. Именно поэтому были придуманы специальные расширения (плагины) для браузеров, предназначенные для хранения и запуска скриптов. Речь пойдёт о двух плагинах: Greasemonkey для Mozilla Firefox и Tampermonkey для Google Chrome.
Плагин Greasemonkey для Mozilla Firefox
Плагин Greasemonkey для Mozilla Firefox позволяет создавать, сохранять и запускать скрипты, добавленные пользователями. Будьте внимательны! При использовании скриптов для удаления или изменения чего-либо, сразу после их добавления в плагин они будут запущены автоматически. Настоятельно не рекомендуем добавлять в плагин скрипты, к примеру, для удаления записей со стены ВКонтакте при открытой странице ВКонтакте (мало ли что).
Плагин Tampermonkey для Google Chrome
Плагин Tampermonkey является аналогом плагина Greasemonkey для Firefox и точно также позволяет создавать, сохранять и запускать пользовательские скрипты. Будьте внимательны! При использовании скриптов для удаления или изменения чего-либо, сразу после их добавления в плагин они будут запущены автоматически. Настоятельно не рекомендуем добавлять в плагин скрипты, к примеру, для удаления записей со стены ВКонтакте при открытой странице ВКонтакте (мало ли что).
Вот так работают плагины Greasemonkey и Tampermonkey. Всё быстро и просто. Добавленные скрипты никуда не пропадают, их также можно включать и выключать в любое удобное время.
Заключение
Все описанные способы запуска Javascript описаны для самых последних версий популярных веб-браузеров. Если вы используете другой браузер или более устаревшую версию браузера, и способы запуска скриптов в нём отличаются от описанных в данной статье, просьба сообщить об этом в комментариях.
Руководство по JavaScript, часть 1: первая программа, особенности языка, стандарты
Недавно мы провели опрос, посвящённый целесообразности перевода этого руководства по JavaScript. Как оказалось, около 90% проголосовавших отнеслись к данной идее положительно. Поэтому сегодня публикуем первую часть перевода.
Это руководство, по замыслу автора, рассчитано на тех, кто уже немного знаком JavaScript и хочет привести свои знания в порядок а также узнать о языке что-то новое. Мы решили немного расширить аудиторию этого материала, включить в неё тех, кто совершенно ничего не знает о JS, и начать его с написания нескольких вариантов «Hello, world!».
Hello, world!
Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.
JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы.
Этот текст можно ввести с клавиатуры, можно скопировать и вставить его в консоль. Результат будет одним и тем же, но, если вы учитесь программировать, рекомендуется вводить тексты программ самостоятельно, а не копировать их.
Первая программа в консоли браузера — вывод сообщения в консоль
Ещё один вариант браузерного «Hello, world!» заключается в выводе окна с сообщением. Делается это так:
Вот результат выполнения этой программы.
Вывод сообщения в окне
Обратите внимание на то, что панель инструментов разработчика расположена теперь в нижней части экрана. Менять её расположение можно, воспользовавшись меню с тремя точками в её заголовке и выбирая соответствующую пиктограмму. Там же можно найти и кнопку для закрытия этой панели.
Инструменты разработчика, и, в том числе, консоль, имеются и в других браузерах. Консоль хороша тем, что она, когда вы пользуетесь браузером, всегда под рукой.
Пособие по запуску JavaScript: консоль, букмарклеты и прочее с примерами
Запускать JavaScript (или JS) код в браузере — обычный навык.
Если когда-то хотели апробировать свой первый JS-код, но боялись, этот пост для вас.
Цель поста для читателей — мочь самостоятельно запускать нужный код.
Цель моя — написать пособие, чтобы на будущее давать на него ссылку + давать готовый код, когда друзьям нужно установить какой букмарклет или мини-форму для какой небольшой автоматизации.
Друзья, которые читают. Если вы это видите, вероятно, вы только что получили код и конкретный пункт из этого пособия. Перечитайте пункт и установите скрипт по аналогии самостоятельно!
ПОМНИТЕ: не устанавливайте JS-код из сомнительных источников и когда не понимаете, что код делает!
§ I. ГДЕ запускать JavaScript код?
I.1. Через консоль браузера.
Чтобы открыть консоль нужно нажать ctrl+shfit+K или ctrl+shift+L.
Вставляете код, нажимаете enter, он сработает.
I.2. Через адресную строку браузера.
Это строка, где написан адрес сайта.
Стираете адрес сайта, вместо вставляете код, нажимаете enter, он сработает.
I.3. Через bookmarklet, или букмарклет, или «закладурку».
Это закладка браузера, в которой вместо сайта стоит JS-код.
Создаёте любую новую закладку. Затем находите закладку и исправляете её: вместо адреса сайта, который должен открываться, вставьте JS-код и сохраните.
Нажимаете на эту вкладку, срабатывает JS-код.
ПРИМЕЧАНИЕ: это один из удобнейших «многоразовых» способов запускать JS-код, в том числе в браузере смартфона!
I.4. Через обычный блокнот, сохранённый как HTML.
Открываете новый блокнот (notepad).
Вставляете туда нужный HTML с JS.
Нажимаете «Сохранить как», откроется меню. Тип файла — меняете «Текстовые документы (*.txt)» на «Все файлы (*.*)». Имя файла — мойкод.html. Его и открывать в браузере.
ПРИМЕЧАНИЕ: удобный «многоразовый» способ запускать JS-код на компьютере (без Интернета).
СПРАВОЧНО: HTML — это язык гипертекстовой разметки.
Любая открытая web-страница в браузере в общем случае — HTML.
I.5. Через блокнот в браузере (внося изменения в web-страницу).
Преимущества (многоразовое использование и не требуется Интернет), а также подход похожи на [I.4].
Открываете блокнот в браузере в качестве новой вкладки:
Затем в консоли находите элементы (HTML-код): открываете консоль (ctrl+shift+K или ctrl+shift+L), переходите в Elements.
Изменяете HTML-код, вставляя туда нужный HTML с JS.
Сохраняете страницу, закрываете её.
После сохранения её и открывать в браузере.
ПРИМЕЧАНИЕ: кстати, сам упомянутый браузерный блокнот удобен для своих заметок, которые можно потом сохранять в специальной папке (ctrl+s).
I.6. Через онлайн компилятор/интерпретатор.
Вставляете HTML и JavaScript в соответствующие поля, нажимаете «Save» для сохранения страницы с уникальным адресом (или «Run» для предпросмотра).
Для демонстрации сохранённого можно вставить в конец адреса «/show», будет видна просто страница:
ПРИМЕЧАНИЕ: удобнейший «многоразовый» способ запускать JS-код (когда есть Интернет).
I.7. Через специально установленные расширения (addon) браузера.
Вставляете код, сохраняйте. На соответствующих страницах должно работать.
ПРИМЕЧАНИЕ: удобно автоматически запускать JS-код сразу после загрузки (например, на конкретных сайтах с помощью @match).
§ II. ОСНОВНЫЕ ВИДЫ запуска JavaScrpt-кода?
Здесь речь будет идти о простейшем коде, запускающем окошко с текстом.
В будущем вместо него вам может быть нужно запускать какой-то другой код (но подход, описанный ниже, останется).
Применение: [I.1] консоль.
II.2. Протокол: немедленно вызываемая функция (или IIFE) объявляется и запускается.
Применение: [I.2] адресная строка браузера;
II.3. Userscript для Tampermonkey / Greasemonkey.
Применение: [I.7] специальные аддоны Tampermonkey / Greasemonkey.
II.5. Протокол: немедленно вызываемая функция, добавляющая на страницу код и кнопку, с помощью которой его можно запускать.
II.5.1. Протокол: немедленно вызываемая функция, добавляющая на страницу код и кнопку, с помощью которой его можно запускать: код на странице.
var scr1 = document.createElement(‘script’);
scr1.setAttribute(‘type’,’text/javascript’);
scr1.textContent=»var func1=function()
document.documentElement.getElementsByTagName(‘*’)[0].appendChild(scr1);
var btnDiv1 = document.createElement(‘div’);
btnDiv1.id = ‘btnDivId1’;
btnDiv1.style.position = ‘relative’;
btnDiv1.style.zIndex = 99999;
var btn1 = document.createElement(‘button’);
btn1.innerHTML = ‘Click’;
btn1.id = ‘btnId1’;
btn1.setAttribute(«onclick», «javascript:func1();»);
II.5.2. Протокол: немедленно вызываемая функция, добавляющая на страницу код и кнопку, с помощью которой его можно запускать: код по ссылке.
var scr1 = document.createElement(‘script’);
scr1.setAttribute(‘type’,’text/javascript’);
scr1.setAttribute(‘src’,’http://codepad.org/2NJ2YB3V/raw.txt’);
document.documentElement.getElementsByTagName(‘*’)[0].appendChild(scr1);
var btnDiv1 = document.createElement(‘div’);
btnDiv1.id = ‘btnDivId1’;
btnDiv1.style.position = ‘relative’;
btnDiv1.style.zIndex = 99999;
var btn1 = document.createElement(‘button’);
btn1.innerHTML = ‘Click’;
btn1.id = ‘btnId1’;
btn1.setAttribute(«onclick», «javascript:func1();»);
§ III. ОСНОВНЫЕ ТИПЫ запускаемых Javascript-кодов?
Разумеется, типов множество, но некоторые мы разобрали.
а) запускаемый сразу;
б) запускаемый после загрузки страницы;
в) запускаемый по кнопке;
г) запускаемый каждые N секунд — изучите самостоятельно!
Первые три вы знаете и видели.
Четвёртый нужно изучить самостоятельно, сделав по аналогии. И, если не выходит, пользуясь поиском в google. Или задавая вопросы на профильных сайтах, например, на stackoverflow или в соответствующих чатах.
Задание-1: чтобы закрепить знания, совет — проверить, «пощупать» каждый кусок кода, который приведён выше и удостовериться, что он работает.
Задание-2: измените КАЖДЫЙ приведённый выше кусок кода и удостоверьтесь, что он работает так, чтобы код запускался каждые 3 секунды.
Если обобщить, то измените в каждом куске
Как вы поняли, [II.1] уже сделан. Попробуйте сделать остальные.
Если у вас не получилась практика / иные причины, возможно, «маякните» в комментариях на предмет того, нужны ли «спойлеры» / ответы (хотя это несложно).
[Доп.советы, чуть более углублённые мелочи]
IV.1. О том, где может храниться JavaScript.
Он может быть как внутри самого файла HTML, так и быть внешним (ссылкой на код).
Во втором случае, то есть для хранения внешних, использовался сайт codepad.org, хотя есть и аналоги [но некоторые аналоги могут на уровне не давать возможность его подгружать в браузер, давая ошибку «CORS»; сейчас неважно, но просто учтите].
Там вставлялся код, выбирался «Plain Text», нажимался «Submit». После сохранения правой кнопкой мыши копировался адрес ссылки «Raw Code». Он-то и является ссылкой (использовалась в [II.4.2], [II.4.4], [II.5.2]).
На этом достаточно исчерпывающее пособие по запуску JavaScript подходит к концу.
Лицензия на текст, код и скрины: CC0.
UPD: ВНИМАНИЕ: В связи с закрытием сайта codepad.org просьба учитывать изменения, описанные в комментарии #comment_199553464
Найдены дубликаты
В связи с тем, что сайт codepad.org более не работает, соответствующие изменения:
В коде ссылку » http://codepad.org/AXduOuGF/raw.txt » заменить (считать заменённой) на
В коде ссылку » http://codepad.org/2NJ2YB3V/raw.txt » заменить (считать заменённой) на
В коде ссылку » http://codepad.org/2NJ2YB3V/raw.txt » заменить (считать заменённой) на
Фразу «использовался сайт codepad.org » заменить (считать заменённой) на
«но некоторые аналоги могут на уровне не давать возможность» —
удалить слова «на уровне «.
Весь абзац «Там вставлялся код, выбирался «Plain Text», нажимался «Submit». После сохранения правой кнопкой мыши копировался адрес ссылки «Raw Code». Он-то и является ссылкой (использовалась в [II.4.2], [II.4.4], [II.5.2]).» заменить (считать заменённым) на
«Там вставлялся код, выбирался «Text», нажимался «Run». После сохранения правой кнопкой мыши копировался адрес ссылки «Скачать». Он-то и является ссылкой (использовалась в [II.4.2], [II.4.4], [II.5.2]).»
Заменить (считать заменённой) на новую (прилагается).
Заменить (считать заменённой) на новую (прилагается).
В связи с настоящим форс-мажором — месяц назад закрылся сайт codepad.org (и вновь не открылся, кто бы мог подумать, он работал с 2008 года!) — часть предлагаемого типового кода, зависящая от сайта, перестала работать.
В связи с этим большая просьба, если это только возможно, внести небольшие коррективы, описанные в комментарии выше: #comment_199553464.
Код теперь дважды «зарезервирован», так что другие исправления в будущем, если внести изменения, не понадобятся. Ну не новый же пост создавать.
Но, наверное, было бы замечательно, если бы возможно было произвести коррекцию пунктов. Кнопки самостоятельного «редактировать» нет. А так пост будет максимально актуален и почти вечен.
Было желание опубликовать пост в Лига программистов, но там ограничение по карме, хотя там ему, мне кажется, самое место.
Возможно / разумно ли как-то попросить перенести?
С чего начать делать игру? Твои первые шаги!
Это статья для тех, кто хочет сделать игру, но не знает с чего начать.
Я постараюсь, по шагам, объяснить весь процесс от желания до релиза. Погнали!
Меня зовут Александр Дударев. Я гейм-дизайнер с 10-летним стажем. Работал в многих компаниях, например в Playgendary. Делал разное: и казуалки для мобилок, и танковый шутер для PC.
Теперь я инди-разработчик. Живу за счёт продажи своих игр. Выпустили 4 игры для PC и Консолей. Сейчас разрабатываю игру They Are Here: Alien Abduction Horror — хоррор от 1-го лица, про похищение пришельцами.
Шаг 1. Запасись энтузиазмом
Энтузиазм — это топливо, которое ты сжигаешь при разработке. Оно позволит тебе делать игру после работы, когда устал, когда хочется отдохнуть.
Как пополнять запас энтузиазма? Смотри документалки, читай истории успеха разработчиков. Это мотивирует!
Например, вот классная документалка о инди-играх Indie Game: The Movie
Смотри по сторонам: на другие игры, фильмы, кино, на новые технологии. Желание изучить что-то новое или сделать что-то похожее — это то, что нужно.
Шаг 2. Собери команду или сделай всё сам!
Одному — проще. Проще придумать идею и принимать решения. Не надо спорить и описывать задачи. Сделать игру одному — возможно. Я например сделал 4 игры один.
С командой — лучше. Лучше получается качество. Твои решения критикуются, и результат улучшается. Можно распределить обязанности и сделать игру быстрее. Последнюю игру я делаю в команде со своей женой. Она отвечает за историю, критикует мои решения, помогает с артом, ищет стримеров.
Шаг 3. Сформулируй цель разработки
Очень важно понять — для чего тебе всё это?
1. Трудоустройство в геймдев компанию.
Вопросы: На какую должность хотим устроиться? В какую компанию(и)? Какими играми занимается компания(и)? Чему нужно научиться?
2. Научиться делать игры, освоить навык.
Продукт — опытный образец. Приоритет- новые знания.
Вопросы: Какой навык освоить? Как сделать какую-то конкретную штуку?
3. Рассказать о чём то важном.
Вопросы: Поймут ли мою идею? Как сделать продукт более массовым?
4. Сделать игру о которой мечтал.
Продукт — мечта. Приоритет — воплотить своё видение.
Вопросы: Что я хочу видеть? Чем можно пренебречь? Как закончить проект?
5. Построить свой бизнес.
Вопросы: Какие игры лучше продаются? Сколько времени займет разработка? Как сократить это время?
Цель может быть не одна. Цели могут меняться от игры к игре.
Шаг 4. Вспомни, что ты умеешь или любишь
Например, я и моя жена — фанаты фильмов ужасов про пришельцев. Типа «Знаки», «Мрачные небеса», «Секретные материалы». Поэтому нам проще работать над идеями и сценарием для They Are Here
А может, ты на досуге рисуешь анимешных девочек. А твой друг изучает программирование искусственного интеллекта. Значит вам будет проще сделать игру про девушек, которые будут чатиться с игроком, словно живые
Шаг 5. Выбери платформу
Если просто, то есть 2 пути: Мобилки или ПК + Консоли.
Исходя из целей и умений нужно будет выбрать что-то одно. Это разные платформы, с разными играми, аудиторией и монетизацией.
— Массовая аудитория. Дети, пенсионеры, скучающие продавщицы. Это не геймеры. Всё должно быть очень понятно и просто.
— Играют по 1 — 5 минут. В перерывах, в очередях, на работе. Чтобы «убить время».
— Ценится простая яркая графика.
— Упор на простой, но залипательный кор-геймплей.
— Некоторые жанры (головоломки, аркады) — наиболее просты в разработке. Можно сделать небольшой прототип (1-5 уровней) и показать его работодателю, например.
— Не требуется красивая или сложная графика. Главное — чтобы было понятно.
— Простой геймплей и гейм-дизайн.
— Будет плюсом, если сам привык к мобильным девайсам и играм.
— Очень. Высокая. Конкуренция. Игр миллионы и почти все они — бесплатные. Игроки приходят только с рекламы. Нет рекламы — нет игроков. Нет денег.
— Монетизация. Нужно встраивать рекламу или внутри-игровые покупки в игру. Знать куда и как. Тестировать чтобы всё это работало.
— Аналитика. Нужно понимать что такое LTV. Почему он должен быть > чем CPI. Встраивать аналитику в игру.
— Будь готов делать по 20 прототипов или улучшать продукт, пока LTV не станет > CPI.
— Заработать денег небольшой команде, можно только с издателем. Я лично не знаю других путей.
Если решишься, узнай подробнее про:
— Гипер-казуальные игры (всё по теме гейм-дизайна и производства).
— Как найти издателя гипер-казуальных игр.
— Казуальные игроки (сложность казуальных игр и туториалы).
— Аналитика мобильных игр (CPI, LTV, Retention).
— Монетизация мобильных игр.
— Оптимизация мобильных игр.
— Google Play и App Store. Регистрация аккаунта разработчика. Правила и рекомендации. SEO.
— Рекламные медиаторы и сети (Iron Source, AdMob и т.п.).
— Сервисы рыночной аналитики мобильных игр (Sensor Tower, App Annie).
Путь 2. ПК + Консоли
— Играют по несколько часов. Дома. Чтобы погрузиться в игру.
— Ценится реалистичная или стильная графика.
— Упор на интересную историю или глубокий геймплей.
— Меньше конкуренция, чем на мобилках. Особенно на консолях.
— Легче получить игроков и отзывы.
— Можно хорошо заработать портировав игру на консоли, с помощью издателя.
— Не надо возится с аналитикой и монетизацией.
— С детства понятная платформа (ПК / Консоль) и аудитория (Геймеры).
— Аудитория любит авторские, творческие, интересные игры.
— Будет плюсом, если сам играешь на компе или приставке.
— Плохо заходят простенькие игры (головоломки, аркады). Геймеры хотят получить опыт, вжиться в роль. Залипнуть надолго. Игра не должна выглядеть как что-то на пару минут.
— Игры дольше в производстве. Но можно хитрить — делать маленькие игры, которые выглядят как большие, а также использовать готовые ассеты.
— Нужно поработать над интересной идеей. Найти отличительные черты (USP), которые выделят проект.
— Нужно продумать интересную историю или геймплей.
— Более сложный геймдизайн.
— Большая требовательность к качеству графики.
Если решишься, узнай подробнее про:
— Геймдизайн компьютерных игр.
— Что такое вертикальный срез.
— Steam. Регистрация аккаунта разработчика. Оформление страницы. Тэги. Правила и рекомендации.
— Маркетинг и продвижение инди-игр на Steam (рекомендую http://howtomarketagame.com/ ) Как сделать крутой постер, трейлер, скриншоты, ГИФки.
— Портирование игр на консоли.
— Издатели игр на консолях.
— Конкурсы и фестивали инди-игр.
— Работа с инфлюенсерами (ютуберами, стримерами).
— Сервисы аналитики тэгов и жанров (SteamDB, Steamspy, SteamCharts, Game Data Crunch).
— Сервисы рассылки ключей (Keymailer, Woovit)
Шаг 6. Узнай про производство игр в целом
Не важно какую платформу ты выберешь. Интересуйся тем Как Делают Игры
Рекомендую погуглить про:
— Игровые механики, жанры и сеттинги.
— Геймдизайн. Есть книга Джесси Шелла, она хорошая, но большая. Можешь гуглить про конкретный жанр.
— Кор-геймплей и Мета-геймплей.
— Левел-дизайн. Лучше гуглить про отдельный жанр.
— Пользовательский интерфейс (UI) в играх.
— Ассеты и маркетплейсы.
Шаг 7. Выбери движок и глянь уроки
Движок — это программа, в которой собирается игра. Это большой кухонный комбайн, в котором есть всё. Там программируется логика, собираются уровни, выставляется освещение, настраивается анимация, создаются материалы, вставляются звуки и т.п.
Про выбор движка написано много статей — погугли.
Если ты один, и не знаешь языков программирования, рекомендую Unreal Engine 4. Почему?
Во-первых, «Blueprints» — это визуальное программирование на блоках. Это проще понять, чем классический «код».
Во-вторых, куча плюсов:
— Красивая графика «из коробки».
— Есть большой маркетплейс с гововыми ассетами
— Это популярный коммерчесский движок, на котором сделано очень много игр.
— Можно сделать игру под все платформы. Можно встроить рекламу, инапы, аналитику.
— Много уровков. Рекомендую канал «Unreal Engine Rus»
— Куча встроенных функций.
— Бесплатный до ляма баксов дохода.
Перед началом работы над игрой, сделай пару очень простых подделок «в стол».
Сделай змейку, пинг-понг и т.п. Пофиг на качество, пофиг на геймдизайн. Главное — попрактиковаться «на кошках», пощупать функции движка.
В движке будет работать вся команда — поэтому каждый должен изучить его, хотя-бы поверхностно. Вы должны понимать друг друга, а еще помогать программисту собирать игру.
Жанр — это твоя ниша. Жанр — это очень важно. Есть жанры, в которые никто не играет. А для некоторых нужно изучить много дополнительного материала.
Лучше выбрать жанр который:
— Популярен на платформе. Игры этого жанра часто покупают или скачивают. Используй сайты для аналитики жанров. Например, для Steam: «steamdb.info», «gamedatacrunch.com», «steamspy.com».
— Не слишком сложен в производстве. MMORPG — не твой выбор!
— Нравится тебе или команде. Ты разбираешься в нём или много играл в детстве.
Как только ты определилися с жанром — гугли всё по производству игр в этом жанре. Геймдизайн, графика, уровни, звуки. На что сделать акцент? Поиграй в лучшие игры в этом жанре. Посмотри видео об этом жанре.
Шаг 9. Придумай идею, концепцию, USP
Идея — ядро твоей игры. Зерно, из которого вырастет проект.
Какая идея хорошая?
— Понятная. Должна быть понятна каждому. Например, твоей маме.
Интересная. Уже хочется поиграть в это! Люди любят риск и новый опыт, который хотят, но не могут пережить в реальной жизни. Например GTA — это симулятор крутого парня, которым все хотят быть, но не могут.
— Популярная. Это не артхаус, не что-то странное или специфичное. Идея обращается к понятным образам из жизни или массовой культуры.
— Выделяющаяся. Такого раньше не было. Или было, но давно. Или в другом жанре. Или в другом стиле. Или плохо сделано.
Что поможет тебе в выборе идеи?
— Каталог игр на твоей платформе. Смотри что популярно. Думай как это изменить, подать под другим углом. Хмм…игра про постройку железной дороги в топе. А что если, мы играем за машиниста?
— Сайты-сервисы с аналитикой тэгов и жанров на платформе. Можно отследить популярность жанра, количество игр в нем. Можно скрестить отдельные тэги между собой.
— Массовая культура. Фильмы, книги, комиксы, короткометражки, гифки, картинки из интернета.
Скорее всего у тебя будет рождаться много идей. Записывай их. Дай полежать. А потом выбери ту, что не даёт тебе покоя и кажется лучшей.
Идея может казаться масштабной. Но она должна умещаться в Питч, чтобы быть понятной игрокам, прессе и твоей маме.
Питч — короткое предложение, описывающее идею. Например, They Are Here — ужастик про похищение пришельцами. Почитай подробнее про то «Как питчить игры».
На основе Питча, описываем концепт игры. Более развернутое описание игры на одну страничку. За кого мы играем? В чем цель? Что можно делать? Какие эмоции вызываем?
Продумай отличительные черты — USP, которые будут наглядно «продавать» твой проект.
USP вытекают из твоей идеи. Например, идея Панка — издевательство над культурой. USP Панка: вызывающее поведение, агрессивная музыка и странные прически.
Показывай свои USP везде — в трейлере, скриншотах, постере, описании игры. Говори про них общении с прессой и издателями.Тычь ими в лицо!
Например, у They Are Here — это пришельцы, кукурузные поля и огни в небе.
Шаг 10. Составь список ассетов и задач
Ассеты — это кирпичики, из которых состоят игры.
Составь список того, что нужно сделать. Хотя-бы крупными мазками. Сделать уровнь, найти музыку, вставить персонажа. А еще надо 20 видов мечей.
Оцени время, а потом умножь его на 2. Даже если тебе кажется это глупым. Умножь его в 2 раза!
Если видишь, что проект большой — отрезай всё ненужное. Ненужное — всё, что не показывает идею. Или редко появляется на экране.
Например, если идея игры — ультра-насилие, то можно не делать 20 видов мечей, а лучше проработать физику расчленения тела.
Прикинь, что для мобильных гипер-казуалок нужно сделать минимум 30 минут геймплея. А для ПК и Консолей, лучше сделать игру на 2 часа. Если можешь больше — круто!
Покупай и используй готовые ассеты. Это лучший способ сократить время производства и не потерять качество. Это не стыдно, это нормально. Это вообще огонь!
Шаг 11. Организуй процесс
Записывай, всё что надо сделать. Каждую мелочь. Иначе — забудешь.
Ставь задачи. Себе и команде. Рекомендую Trello (проще) или Asana (функциональнее).
Cобирай инфу по проекту в одном месте. Можно юзать доски типа “Miro” или вики типа Notion.
Если ты один, или у вас небольшая команда, не парься над большой и красивой документацией. Лучше покажи пример, начерти схему, объясни на пальцах ЧЁ НАДО сделать.
Референс — лучшее описание задачи для художника! Например, я сказал жене — хочу обложку как у Слендера, но с пришельцем. Этого — достаточно!
Собирай и храни нужную инфу. Ссылки на классные статьи. Контакты возможных партнёров. Скриншоты багов. И т.п.
Шаг 12. Сделай демку
Демо-версия / Вертикальный срез / MVP — очень близкие по смыслу понятия. Это маленький кусочек игры финального качества.
Демо-версия решает множество задач:
— Поможет записать видео, скриншоты, гифки
— Покажет окупаемость мобильной игры
— Поможет устроиться на работу
— Ускорит набор вишлсистов в Steam
— Получит отзывы от игроков и стримеров
— Можно участвовать в фестивалях и конкурсах
-Только с ней можно найти издателя.
Шаг 13. Не ленись! Работай!
Пара советов, как дожить до релиза:
— Не меняй идею на ходу. Сильно. По чуть-чуть можно.
— Не начинай другие проекты. Не распыляйся. Делай, что запланировал.
— Составь график работы. Работай над игрой постоянно. Хотя бы по 3 дня в неделю, по 2 часа в день. Больше — быстрее!
— Надоела разработка? Поиграй в похожие игры. Посмотри похожие фильмы. Найди, что было бы круто сделать.
— Всё равно надоела? Мечтай о релизе. Представь как это будет здорово и вечно!
— Показывай свою работу — пиши посты, пости гифки, давай поиграть стримерам. Твоя цель — получить позитивную обратную связь. Ну или отрицательную.
— Узнавай что-то новое про производство игр. Слушай подкасты, смотри доклады. Это мотивирует, помогает в производстве.
Спасибо, что дочитал!
Яндекс погода
Никогда особо не парился по поводу памяти в телефоне, но тут решил посмотреть список приложений с фильтрацией по размеру.
Секрет тяжести молота Тора:
Отзыв на Гитхаб
Чего ожидать от поста: очень личное мнение с точки зрения интервьюера топ IT-компании о том, что не так с быстрыми IT-курсами и о пробелах в знаниях их выпускников; советы в общих чертах, как же всё-таки войти в это самое АйТи. Пост ограничен профессией разработчика ПО ввиду жизненного опыта автора.
Что значит «войти в АйТи»?
Чего работодатели ждут от кандидатов?
Для осознания минимального необходимого набора навыков давайте посмотрим, что ожидается от кандидата на стажировку (оплачиваемую, и временами весьма неплохо):
* Умение более-менее свободно общаться на английском;
* Понимание организации сетей, сетевых протоколов;
* Понимание параллелльного программирования и многопоточности;
* Принципы трансляции программного кода в исполняемый код;
* Понимание концепций и синтаксиса какого-нибудь популярного языка программирования и умение применять их для решения учебной задачи;
* Владение терминами информатики и адекватное их применение в процессе решения задачи;
* Понимание принципов тестирования и их разумное применение к поставленной задаче;
* Знание принципов объектно-ориентированного программирования;
* Умение внятно превращать мысли в слова.
От стажёров не требуется опыт работы по специальности, но желательно иметь несколько небольших проектов: учебные проекты и курсовые, pet-projects, участие в опен-сорсе.
Junior-разработчик, помимо означенных выше качеств, должен также:
* Иметь опыт разработки на стажировке в крупной компании и/или в качестве разработчика в небольшой или не широко известной компании;
* Быть способным реализовать поставленную хорошо очерченную задачу без постоянного надсмотра со стороны более старших разработчиков (часто при наличии готового плана реализации, разработанного старшими товарищами);
* Уметь разбить небольшую систему на компоненты, спроектировать интерфесы между ними, облегчая тестирование, поддержку кода, расширение системы.
Отметим также, что это список на «общее программирование». Нишевые области, такие как геймдев, машинное обучение, мобильная разработка и т.д. добавят своих требований в общую кучу.
Учат ли этому «вайтишные» курсы?
После прочтения списка сверху в вас уже должны были зародиться сомнения в правдивости рекламы, обещающей освоение профессии за несколько месяцев, смотря лекции пару часов в неделю и тратя ещё пару часов на домашние задания.
Так что как бы ни хотелось поверить молодым-активным-хипстеровато-выглядящим парням, завлекающих рассказами об очередях хэдхантеров к выпускникам их контор, увы, это такой же нонсенс, как и заявление, что к работе хирурга в элитной клинике можно подготовиться, зарезав пару кур в деревне.
Что же там тогда происходит?
Я посмотрела один широко рекламируемый курс по Java и попыталась систематизировать увиденное. Систематизировать оказалось немного. Плакала только горько, вина бутылку выпила.
И вот что я там увидела:
2. Сложно о простом. Чтобы объяснить условные операторы, совсем не нужно заводить программу на 100 строк, которая не влезает на экран и где сам лектор путается в логике. Зачем? Или это ещё один приём, чтобы вызвать у ученика ощущение себя как бесполезной воши, неспособной ничего достичь без богоподобного лектора курса?
3. Отсутствие внятных практических заданий. В задании обычно даётся готовый код, где нужно поменять пару строк. Ученику не даются задания, которые действительно заставят его думать и осознанно применять новые концепции, чтобы решить задачу с нуля.
4. Даются разрозненные, бессистемные знания синтаксиса языка, но никаких объяснений принятых практик программирования, организации мысли, разбиения задачи на подзадачи, хорошего тона для определения границ классов и методов. Грубо говоря, научили, как писать буквы, а про грамматику, пунктуацию, и орфографию забыли, не говоря уже об изложении мысли и структурированию текстов.
5. Лектор читает уставшим, скучающим тоном. Всем своим видом он показывает, как низко он опускается, передавая светоч знаний всяким идиотам. Я не знаю, даёт ли этот курс возможность общаться с преподавателями, но лично мне было бы крайне стрёмно задавать вопросы из страха вызвать своей никчёмной глупостью пренебрежительное закатывание глаз или смешки. Фактически, новичка отталкивают от идеи общаться о программировании с коллегами и просить помощи у более опытных товарищах, что является самым важным навыком любого программиста, особенно новичков!
К чему это приводит?
Вы скажете: «Да рядовому программисту это всё не нужно! За мои over 9000 лет в разработке мне никогда не приходилось писать сортировку самому!» Это может быть правдой.
Во-первых, без этих знаний в настоящее время новичок банально не пройдёт собеседование в более-менее приличной конторе, так что какая разница, что вам там приходилось или не приходилось.
Наконец, если человек не обладает банальной профессиональной грамотностью, мы не можем ожидать, что он будет эффективен, когда нужно будет вынуть мозг через ухо и решить что-то нестандартное, что не вкладывается в типовые трафареты очередного фреймворка-однодневки.
Если не курсы, тогда что?
Моё профессиональное мнение состоит в том, что нацеленную программу образования превзойти практически невозможно. Адекватный факультет/кафедра пройдутся ровно по списку навыков, обозначенному выше, но мякотка даже не в этом, а в том что у топ-факультетов имеются связи в хороших компаниях, благодаря чему они могут рекомендовать вас на стажировки (которые, кстати, обычно тоже предлагаются только студентам, а не любым новичкам).
Значит ли это, что тёплого местечка в Гугле вам не видать, не просидев предварительно 4-6 лет за партой в пыльном универе? Отнюдь нет.
Индустрия жадна до (высококлассных) специалистов, и никому нет дела, каким образом навык был достигнут. Но навык при этом должен быть. Самостоятельно достичь его можно, но, интуитивно, это будет сложнее, дольше, и потребует гораздо большей дисциплины и самоотдачи, чем обучение на кафедре.
И это не говоря уже о том, что при самообучении у вас не будет доступа к опытным специалистам, которым можно задавать разные дурацкие вопросы, а так же к связям кафедры, так что придётся позиции искать самостоятельно и без рекомендательных писем, что на практике часто означает, что рекрутер просто выбросит ваше резюме, если в нём нет строчки об обучении по специальности в адекватном вузе.
Как промежуточный вариант между самообразованием и полноценной вышкой существуют «школы курсов». Они не дают официальных дипломов об образовании, но они полностью бесплатны, преподают в них (да, снова связи. ) лучшие преподаватели вузов (знаю некоторых лично, потому что они и в СПбГУ преподают) и инженеры приличных компаний (Яндекс, JetBrains), а часть обучения составляют обязательные практические проекты.
В чём подвох? Чтобы поступить, нужно сдать экзамен на математику уровня примерно второго курса столичного вуза.
Я в курсе двух таких школ, которые к тому же сотрудничают между собой: Школа Анализа Данных (упор на машинное обучение) и Computer Science Center (более широкий спектр предметов). Готовьтесь потратить 2-3 года на обучение в любой из них (сравните с 4 годами полноценного бакалавриата, которые включают в себя также и математику, требуемую обеими школами на входе).
Можно! Вместить в один пост всю информацию о том, как освоить профессию, да ещё и требующую глубоких теоретических и приладных знаний, заведомо невозможно. Если вам пришлась по душе эта статья, вас могут заинтересовать следующие темы:
* Разделы математики, полезные разработчику ПО (со списком литературы);
* Темы информатики, с которыми должен быть знаком любой программист (со списком литературы);
* Список алгоритмов и структур данных, наиболее полезных на интервью и в разработке;
* Как выглядит типичный процесс собеседования на программиста в топ западные компании;
* Составляем резюме грамотно;
* Один день из жизни разработчика ПО, или что вы не знали о профессии программиста.