Часть 0. Термины, рисование на холсте. (черновой вариант)

Страница 1 из 4 1, 2, 3, 4  Следующий

Перейти вниз

Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор raingo в Чт Дек 28, 2017 5:40 pm

Написание кода заняло у меня полминуты. А объяснение, чую, несколько дней. Пока раскину в черновом варианте. Я надеюсь вы подправите и спросите, где что не понятно.

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

В вебе понятие движок разделяют на "библиотека" и "фреймворк".

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

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

Для нас, как для архитекторов важно понимать, что любой код может быть как и библиотекой, так и фреймворком. Это зависит от предпочтений и целей архитектора. Например, нам нужно получить canvas. Мы можем:
1) просто получить canvas в коде.
2) написать легкую функцию, которая ищет нужный канвас и как-то преобразует его (обернуть предыдущий код в функцию). А потом вызвать эту функцию произвольно.
3) написать монструозный скрипт, который анализирует все canvas'ы в мире, сортирует их, упорядочивает по алгоритму, преобразует так, как ему вздумается. Но тогда мы не сможем обращаться в коде ни к одному canvas'у. Т.к. это приведет к сбою скрипта. Т.к. канвасы занят работой нашим монструозным скриптом.

Минус первого варианта в том, что каждый раз в жизни, когда нам понадобится получить какой-то canvas, нам придется писать один и тот же код. Во втором случае мы пишим код один раз, и лишь вызываем функцию, когда это понадобится. Т.е. движок - это универсальный код, который можно использовать для разных проектов. Без движка людям пришлось бы писать один и тот же код каждый раз заново.
Фреймворк идет еще дальше библиотеки. С фреймворком нам даже не надо вызывать функций, никак не преобразовывать canvas, это все сделает скрипт. Но и произвольные canvas'ы мы уже не можем создать, мы должны создавать из следуя правилам фреймворка.

Canvas - это холст, где рисуется вся игра. Вот здесь надо бы рассказать про канвас, но мне поxуй. Я сделаю это позже. В следующем посте перейду сразу к коду.

raingo
Отдел прокрастинации

Сообщения : 560
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор raingo в Чт Дек 28, 2017 6:07 pm

В html мы создаем холст, больше тут ничего не делается. И возможно за весь цикл уроков мы не вернемся к hmtl.
Код:
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Monkey 0</title>
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
 <canvas id="canvas" width="350" height="350"></canvas>

 <!--вставляем внешние js в конце body-->
 <script src="js/monkey.js"></script>
 <script src="js/game.js"></script>
</body>

Весь наш код всегда будет разделяться на два скрипта. На monkey.js - это название движка. И game.js - это скрипты поверх движка с созданием конкретной игры.

Представим, что monkey.js нет. Нам нужно взять канвас и что-то сделать с ним. js кода напишем в game.js:
Код:
var canvas = document.getElementById("canvas"); //получаем канвас
var ctx = canvas.getContext("2d"); //получаем контекст

ctx.fillStyle = "rgb(200,0,0)"; //определяем стиль - красный цвет
ctx.fillRect (10, 10, 55, 50); //заполняем квадрат с указанными координатами

ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; //теперь меняем цвет на красный и заполняем следующий квадрат
ctx.fillRect (30, 30, 55, 50);

Я прошу проделать написанное самому. Для этого не нужно устанавливать никакие локальные сервера. Создаем только index.hmtl файл и папку js со скриптом game.js и пустым пока что monkey.js

Разберем, что к чему:
1-ая строчка кода это стандартный способ получения html-элемента по id (мы его прописали в index.html). Теперь мы можем обращатся к канвасу по ссылке в переменной var canvas.
2-ая строчка рассказывает нам о каком-то контексте. Дело в том, что объект canvas это на самом деле оболочка над контекстом. Оно содержит значения высоты, ширины и другие свойства html-тега. Все рисование происходит в контексте. Это нужно для удобства.

После того, как мы получили контекст холста (в дальнейшем будем называть просто "холст" или "канвас"), мы можем рисовать на нем с помощью доступного ap: https://www.w3schools.com/tags/ref_canvas.asp и https://developer.mozilla.org/ru/docs/Web/API/Canvas_API/Tutorial

Функция fillRect(x,y, w, h) объекта канвас (контекст канваса) рисует квадрат в координатах, переданных аргументами. По умолчанию стоит черный цвет. Мы можем задать цвет функцией fillStyle. Чтобы нарисовать квадрат другого цвета, нужно снова изменить стиль.

Надеюсь тут все ясно. Переходим дальше.


Последний раз редактировалось: raingo (Чт Дек 28, 2017 7:01 pm), всего редактировалось 2 раз(а)

raingo
Отдел прокрастинации

Сообщения : 560
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор raingo в Чт Дек 28, 2017 6:41 pm

Теперь нам нужно облечь код в функции. Функции в библиотеку.

Изменим monkey.js на следующее
Код:
var _canvas;
var _ctx;

function monkey(canvasId) {
 _canvas = document.getElementById("canvas");
 _ctx = canvas.getContext("2d");
}

function fillRect(x, y, w, h, color){
 _ctx.fillStyle = color;
 _ctx.fillRect (x, y, w, h);
}
_canvas и _ctx - обычные переменные. Нижнее подчеркивание это условных знак для веб-программистов не трогать данные объекты. Когда программист хочет дать понять, что вот эта переменная используется для внутренней работы и извне не должна вызываться, он пишет её с подчеркиванием (есть другие способы сделать переменную локальной, но эта тема другой статьи).

Функция monkey инициализирует движок. Без её вызова все остальные функции скорее всего не будут работать (_ctx используется в теле других функций).
Теперь нам не нужно каждый раз писать код заново. Мы можем один раз подключить движок monkey.js к страничке html и потом обращаться к библиотеке, чтобы она все сделала за нас.

Давайте изменим game.js
Код:
monkey("canvas"); //инициализируем движок
fillRect(30, 30, 50, 50, "rgb(200,0,0)"); //вызываем функцию движка

Не правда ли все стало проще?

P.S.
Есть такое правило: первыми задаются обязательные параметры, последними - необязательные. так как у квадрата есть цвет по умолчанию - черный, то color должен стоять последним аргументом:
function fillRect(x, y, w, h, color)


Последний раз редактировалось: raingo (Чт Дек 28, 2017 9:08 pm), всего редактировалось 4 раз(а)

raingo
Отдел прокрастинации

Сообщения : 560
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор raingo в Чт Дек 28, 2017 6:43 pm

kosyakmakc пишет:в конце поправь: fillRect(x,y, w, h)
Dessan пишет:напиши, что для тех, кто хочет увидеть canvas могут задать ему стиль, например
<canvas id="canvas" width="800" height="450" style="border: 1px solid;"></canvas>
И можно меньше терминов и больше простых слов

Постоянно отвлекаюсь. Вот сейчас закончил и можно писать. Ваши ответы удалю для последовательности. Благодарю за замечание. Про канвас отдельный сказ надо написать!

Что значит меньше терминов? Какие термины непонятны?

raingo
Отдел прокрастинации

Сообщения : 560
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор raingo в Чт Дек 28, 2017 6:59 pm

Почему движок называется "обезьяна.js"?
Это еще с предыдущего проекта: "страна обезьян". У меня куча скриптов осталось оттуда.


raingo
Отдел прокрастинации

Сообщения : 560
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор kosyakmakc в Чт Дек 28, 2017 7:14 pm

Насчет локальных переменных: их можно прятать в замыканиях у функций, как в обычных функция, так и в функциях конструкторах

kosyakmakc

Сообщения : 9
Дата регистрации : 2017-12-28

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор Dessan в Чт Дек 28, 2017 7:19 pm

kosyakmakc пишет:Насчет локальных переменных: их можно прятать в замыканиях у функций, как в обычных функция, так и в функциях конструкторах

давай сразу пример кода

Dessan
Юный падаван

Сообщения : 279
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор raingo в Чт Дек 28, 2017 7:22 pm

А вот, я с вашей обоюдной помощью понял, что инфа про локальные переменные и es5 тут вообще была лишней!

Удалил строчку. Благодарю, что заметили.

raingo
Отдел прокрастинации

Сообщения : 560
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор Dessan в Чт Дек 28, 2017 7:35 pm

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

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

Dessan
Юный падаван

Сообщения : 279
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор Pyro338 в Чт Дек 28, 2017 7:35 pm

ну и есть такое правило: первыми задаются обязательные параметры, последними - необязательные. так как у квадрата есть цвет по умолчанию - черный и, как я подозреваю коорданаты по умолчанию - 0 0, то я бы написал

Код:
function fillRect(w, h, x, y, color)
avatar
Pyro338
Админ

Сообщения : 465
Дата регистрации : 2017-12-25
Возраст : 32
Откуда : Ставрополь

Посмотреть профиль http://pyro338.ru/

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор Dessan в Чт Дек 28, 2017 7:40 pm

Pyro338 пишет:ну и есть такое правило: первыми задаются обязательные параметры, последними - необязательные. так как у квадрата есть цвет по умолчанию - черный и, как я подозреваю коорданаты по умолчанию - 0 0, то я бы написал

Код:
function fillRect(w, h, x, y, color)

В твоём pdf файле со всеми известным автором идёт x,y,w,h, color и все привыкли x,y,w,h, color

Dessan
Юный падаван

Сообщения : 279
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор Pyro338 в Чт Дек 28, 2017 7:47 pm

в моём пдф файле? не знал, что у меня есть пдф файл. или забыл.

ну в любом случае цвет должен идти последним как необязательный параметр.
avatar
Pyro338
Админ

Сообщения : 465
Дата регистрации : 2017-12-25
Возраст : 32
Откуда : Ставрополь

Посмотреть профиль http://pyro338.ru/

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор Dessan в Чт Дек 28, 2017 7:54 pm

У тебя всё есть)Да, цвет должен идти последним, но координаты всегда первыми. И дай пример библиотеки и фреймворка, а то так сложно понять разницу.

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

Dessan
Юный падаван

Сообщения : 279
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор Dessan в Чт Дек 28, 2017 7:55 pm

Загрузили Илью

Dessan
Юный падаван

Сообщения : 279
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор S30N1k в Чт Дек 28, 2017 8:01 pm

Это все конечно хорошо, но в текстовом варианте ты кучу времени потратишь все расписывать)
Да и текстовый вариант не так воспринимается как видео.

В видео формате будет лучше, но и куча времени нужна на подготовку того же текста, грамотное произношение (без бе, ме, эмм) и тп.

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

Да и видосами все же можно привлечь гораздо большую аудиторию.

Тоже подумываю со своей командой начать снимать ролики, но по фейзеру.
avatar
S30N1k

Сообщения : 79
Дата регистрации : 2017-12-27

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор Dessan в Чт Дек 28, 2017 8:06 pm

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

А что ещё за фейзер такой?

Dessan
Юный падаван

Сообщения : 279
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор Pyro338 в Чт Дек 28, 2017 8:12 pm

А canvas я бы сказал, что это не "холст"



я лично для захвата видео использую Movavi Video Suite
avatar
Pyro338
Админ

Сообщения : 465
Дата регистрации : 2017-12-25
Возраст : 32
Откуда : Ставрополь

Посмотреть профиль http://pyro338.ru/

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор S30N1k в Чт Дек 28, 2017 8:13 pm

Фейзер - игровой движок http://phaser.io/

Бандикам, например, не плохая программа для записи видео с экрана =)
avatar
S30N1k

Сообщения : 79
Дата регистрации : 2017-12-27

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор Dessan в Чт Дек 28, 2017 8:26 pm

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

Dessan
Юный падаван

Сообщения : 279
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор Dessan в Чт Дек 28, 2017 8:30 pm

какой интересный этот phaser. Спасибо, буду знать

Dessan
Юный падаван

Сообщения : 279
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор S30N1k в Чт Дек 28, 2017 8:34 pm

Dessan пишет:какой интересный этот phaser. Спасибо, буду знать
Там еще интересные примитивные примеры есть, глянь http://phaser.io/examples
А еще у него нет проблем с физикой и может рендерится в вебгл, т.е работает горааздо шустрее поинта к примеру)
avatar
S30N1k

Сообщения : 79
Дата регистрации : 2017-12-27

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор raingo в Чт Дек 28, 2017 8:39 pm

ну и есть такое правило: первыми задаются обязательные параметры, последними - необязательные. так как у квадрата есть цвет по умолчанию - черный и, как я подозреваю коорданаты по умолчанию - 0 0, то я бы написал
Оxуительный комментарий, я считаю.

raingo
Отдел прокрастинации

Сообщения : 560
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор Pyro338 в Чт Дек 28, 2017 8:41 pm

Оxуительный комментарий, я считаю.

сарказм?

Тоже подумываю со своей командой начать снимать ролики, но по фейзеру

подумай. я бы с интересом посмотрел
avatar
Pyro338
Админ

Сообщения : 465
Дата регистрации : 2017-12-25
Возраст : 32
Откуда : Ставрополь

Посмотреть профиль http://pyro338.ru/

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор Dessan в Чт Дек 28, 2017 8:42 pm

S30N1k пишет:
Dessan пишет:какой интересный этот phaser. Спасибо, буду знать
Там еще интересные примитивные примеры есть, глянь http://phaser.io/examples
А еще у него нет проблем с физикой и может рендерится в вебгл, т.е работает горааздо шустрее поинта к примеру)

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

Dessan
Юный падаван

Сообщения : 279
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

Сообщение автор S30N1k в Чт Дек 28, 2017 8:48 pm

Pyro338 пишет:подумай. я бы с интересом посмотрел
Буду иметь ввиду, что первый потенциальный зритель у меня уже есть cheers
avatar
S30N1k

Сообщения : 79
Дата регистрации : 2017-12-27

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Часть 0. Термины, рисование на холсте. (черновой вариант)

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


Спонсируемый контент


Вернуться к началу Перейти вниз

Страница 1 из 4 1, 2, 3, 4  Следующий

Вернуться к началу

- Похожие темы

 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения