ФорумЧасть 0. Термины, рисование на холсте. (черновой вариант)
+2
kosyakmakc
raingo
Участников: 6
Страница 1 из 4
Страница 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уй. Я сделаю это позже. В следующем посте перейду сразу к коду.
Движок - термин, чаще всего упоминающийся в рамках геймдева. Некоторая часть кода, которая берет на себя низкоуровневые функции отрисовки и физики, которую можно использовать универсально для разных проектов. Из-за универсальности движок создают таким образом, что программисту все равно требуется писать код для каждого отдельного случая поверх него. Дополнять движок своими функциями, подходящими только в этой конкретной ситуации.
В вебе понятие движок разделяют на "библиотека" и "фреймворк".
Библиотека - набор написанных кем-то функций. Вы можете подключить сотни разных библиотек в одном скрипте. И они не будут вам мешать. Т.е. программист один раз написал функции в одном месте, а потом вызывает код уже в любом произвольном.
Фреймворк - это скрипт, который сразу при подключении что-то начинает делать. Без вызова функций сторонним кодером. Т.е. код начинает работать сразу, и как правило, он уже не отменяется. Фреймворк ограничивает возможности программиста, т.к. ему приходится оглядываться на работающий код фреймворка. Несколько разных фреймворков могут конфликтовать собой и вызвать сбой программы. Т.к. они затрагивают одни и те же внутренние процессы для своей работы, но с разной целью.
Для нас, как для архитекторов важно понимать, что любой код может быть как и библиотекой, так и фреймворком. Это зависит от предпочтений и целей архитектора. Например, нам нужно получить canvas. Мы можем:
1) просто получить canvas в коде.
2) написать легкую функцию, которая ищет нужный канвас и как-то преобразует его (обернуть предыдущий код в функцию). А потом вызвать эту функцию произвольно.
3) написать монструозный скрипт, который анализирует все canvas'ы в мире, сортирует их, упорядочивает по алгоритму, преобразует так, как ему вздумается. Но тогда мы не сможем обращаться в коде ни к одному canvas'у. Т.к. это приведет к сбою скрипта. Т.к. канвасы занят работой нашим монструозным скриптом.
Минус первого варианта в том, что каждый раз в жизни, когда нам понадобится получить какой-то canvas, нам придется писать один и тот же код. Во втором случае мы пишим код один раз, и лишь вызываем функцию, когда это понадобится. Т.е. движок - это универсальный код, который можно использовать для разных проектов. Без движка людям пришлось бы писать один и тот же код каждый раз заново.
Фреймворк идет еще дальше библиотеки. С фреймворком нам даже не надо вызывать функций, никак не преобразовывать canvas, это все сделает скрипт. Но и произвольные canvas'ы мы уже не можем создать, мы должны создавать из следуя правилам фреймворка.
Canvas - это холст, где рисуется вся игра. Вот здесь надо бы рассказать про канвас, но мне поxуй. Я сделаю это позже. В следующем посте перейду сразу к коду.
raingo- Отдел прокрастинации
- Сообщения : 756
Дата регистрации : 2017-12-25
Re: Часть 0. Термины, рисование на холсте. (черновой вариант)
автор raingo Чт Дек 28, 2017 6:07 pm
В html мы создаем холст, больше тут ничего не делается. И возможно за весь цикл уроков мы не вернемся к hmtl.
Весь наш код всегда будет разделяться на два скрипта. На monkey.js - это название движка. И game.js - это скрипты поверх движка с созданием конкретной игры.
Представим, что monkey.js нет. Нам нужно взять канвас и что-то сделать с ним. js кода напишем в game.js:
Я прошу проделать написанное самому. Для этого не нужно устанавливать никакие локальные сервера. Создаем только 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. Чтобы нарисовать квадрат другого цвета, нужно снова изменить стиль.
Надеюсь тут все ясно. Переходим дальше.
- Код:
<!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- Отдел прокрастинации
- Сообщения : 756
Дата регистрации : 2017-12-25
Re: Часть 0. Термины, рисование на холсте. (черновой вариант)
автор raingo Чт Дек 28, 2017 6:41 pm
Теперь нам нужно облечь код в функции. Функции в библиотеку.
Изменим monkey.js на следующее
Функция monkey инициализирует движок. Без её вызова все остальные функции скорее всего не будут работать (_ctx используется в теле других функций).
Теперь нам не нужно каждый раз писать код заново. Мы можем один раз подключить движок monkey.js к страничке html и потом обращаться к библиотеке, чтобы она все сделала за нас.
Давайте изменим game.js
Не правда ли все стало проще?
P.S.
Есть такое правило: первыми задаются обязательные параметры, последними - необязательные. так как у квадрата есть цвет по умолчанию - черный, то color должен стоять последним аргументом:
function fillRect(x, y, w, h, color)
Изменим 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);
}
Функция 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- Отдел прокрастинации
- Сообщения : 756
Дата регистрации : 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- Отдел прокрастинации
- Сообщения : 756
Дата регистрации : 2017-12-25
Re: Часть 0. Термины, рисование на холсте. (черновой вариант)
автор raingo Чт Дек 28, 2017 6:59 pm
Почему движок называется "обезьяна.js"?
Это еще с предыдущего проекта: "страна обезьян". У меня куча скриптов осталось оттуда.
Это еще с предыдущего проекта: "страна обезьян". У меня куча скриптов осталось оттуда.
raingo- Отдел прокрастинации
- Сообщения : 756
Дата регистрации : 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- Юный падаван
- Сообщения : 426
Дата регистрации : 2017-12-25
Re: Часть 0. Термины, рисование на холсте. (черновой вариант)
автор raingo Чт Дек 28, 2017 7:22 pm
А вот, я с вашей обоюдной помощью понял, что инфа про локальные переменные и es5 тут вообще была лишней!
Удалил строчку. Благодарю, что заметили.
Удалил строчку. Благодарю, что заметили.
raingo- Отдел прокрастинации
- Сообщения : 756
Дата регистрации : 2017-12-25
Re: Часть 0. Термины, рисование на холсте. (черновой вариант)
автор Dessan Чт Дек 28, 2017 7:35 pm
"Движок - термин, чаще всего упоминающийся в рамках геймдева. Некоторая часть кода, которая берет на себя низкоуровневые функции отрисовки и физики, которую можно использовать универсально для разных проектов." Такими фразами подготовленный студент защищает дипломный проект перед комиссией.
"Движок - это универсальный код, который можно использовать для разных программ. Без движка людям пришлось бы писать один и тот же код каждый раз заново." - вот что должен услышать неопытный пользователь. Не надо писать о твоём отношении к движку и о тяжелой жизни программиста.
"Движок - это универсальный код, который можно использовать для разных программ. Без движка людям пришлось бы писать один и тот же код каждый раз заново." - вот что должен услышать неопытный пользователь. Не надо писать о твоём отношении к движку и о тяжелой жизни программиста.
Dessan- Юный падаван
- Сообщения : 426
Дата регистрации : 2017-12-25
Re: Часть 0. Термины, рисование на холсте. (черновой вариант)
автор Pyro338 Чт Дек 28, 2017 7:35 pm
ну и есть такое правило: первыми задаются обязательные параметры, последними - необязательные. так как у квадрата есть цвет по умолчанию - черный и, как я подозреваю коорданаты по умолчанию - 0 0, то я бы написал
- Код:
function fillRect(w, h, x, y, color)
Pyro338- Админ
- Сообщения : 587
Дата регистрации : 2017-12-25
Возраст : 38
Откуда : Ставрополь -
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- Юный падаван
- Сообщения : 426
Дата регистрации : 2017-12-25
Re: Часть 0. Термины, рисование на холсте. (черновой вариант)
автор Pyro338 Чт Дек 28, 2017 7:47 pm
в моём пдф файле? не знал, что у меня есть пдф файл. или забыл.
ну в любом случае цвет должен идти последним как необязательный параметр.
ну в любом случае цвет должен идти последним как необязательный параметр.
Pyro338- Админ
- Сообщения : 587
Дата регистрации : 2017-12-25
Возраст : 38
Откуда : Ставрополь -
Re: Часть 0. Термины, рисование на холсте. (черновой вариант)
автор Dessan Чт Дек 28, 2017 7:54 pm
У тебя всё есть)Да, цвет должен идти последним, но координаты всегда первыми. И дай пример библиотеки и фреймворка, а то так сложно понять разницу.
А canvas я бы сказал, что это не "холст" где рисуется игра, а область в которой выполняется код.
А canvas я бы сказал, что это не "холст" где рисуется игра, а область в которой выполняется код.
Dessan- Юный падаван
- Сообщения : 426
Дата регистрации : 2017-12-25
Re: Часть 0. Термины, рисование на холсте. (черновой вариант)
автор Dessan Чт Дек 28, 2017 7:55 pm
Загрузили Илью
Dessan- Юный падаван
- Сообщения : 426
Дата регистрации : 2017-12-25
Re: Часть 0. Термины, рисование на холсте. (черновой вариант)
автор S30N1k Чт Дек 28, 2017 8:01 pm
Это все конечно хорошо, но в текстовом варианте ты кучу времени потратишь все расписывать)
Да и текстовый вариант не так воспринимается как видео.
В видео формате будет лучше, но и куча времени нужна на подготовку того же текста, грамотное произношение (без бе, ме, эмм) и тп.
Но во втором случае, в будущем, возможно и какая никакая прибыль с ютуба.
Да и видосами все же можно привлечь гораздо большую аудиторию.
Тоже подумываю со своей командой начать снимать ролики, но по фейзеру.
Да и текстовый вариант не так воспринимается как видео.
В видео формате будет лучше, но и куча времени нужна на подготовку того же текста, грамотное произношение (без бе, ме, эмм) и тп.
Но во втором случае, в будущем, возможно и какая никакая прибыль с ютуба.
Да и видосами все же можно привлечь гораздо большую аудиторию.
Тоже подумываю со своей командой начать снимать ролики, но по фейзеру.
S30N1k- Сообщения : 97
Дата регистрации : 2017-12-27
Re: Часть 0. Термины, рисование на холсте. (черновой вариант)
автор Dessan Чт Дек 28, 2017 8:06 pm
Илья сказал, что пока три человека ему не скажут, чтоб создавал канал и не подскажут какой прогой захватывать экран для записи видео и какой микрофон использовать - не создаст канал.
А что ещё за фейзер такой?
А что ещё за фейзер такой?
Dessan- Юный падаван
- Сообщения : 426
Дата регистрации : 2017-12-25
Re: Часть 0. Термины, рисование на холсте. (черновой вариант)
автор Pyro338 Чт Дек 28, 2017 8:12 pm
А canvas я бы сказал, что это не "холст"
я лично для захвата видео использую Movavi Video Suite
Pyro338- Админ
- Сообщения : 587
Дата регистрации : 2017-12-25
Возраст : 38
Откуда : Ставрополь -
Re: Часть 0. Термины, рисование на холсте. (черновой вариант)
автор S30N1k Чт Дек 28, 2017 8:13 pm
Фейзер - игровой движок http://phaser.io/
Бандикам, например, не плохая программа для записи видео с экрана =)
Бандикам, например, не плохая программа для записи видео с экрана =)
S30N1k- Сообщения : 97
Дата регистрации : 2017-12-27
Re: Часть 0. Термины, рисование на холсте. (черновой вариант)
автор Dessan Чт Дек 28, 2017 8:26 pm
О как "предназначенный для создания растрового двухмерного изображения при помощи скриптов" а я думал он не только для графики нужен. Ну, ок, тогда холст, в котором рисуется вся игра.
Dessan- Юный падаван
- Сообщения : 426
Дата регистрации : 2017-12-25
Re: Часть 0. Термины, рисование на холсте. (черновой вариант)
автор Dessan Чт Дек 28, 2017 8:30 pm
какой интересный этот phaser. Спасибо, буду знать
Dessan- Юный падаван
- Сообщения : 426
Дата регистрации : 2017-12-25
Re: Часть 0. Термины, рисование на холсте. (черновой вариант)
автор S30N1k Чт Дек 28, 2017 8:34 pm
Там еще интересные примитивные примеры есть, глянь http://phaser.io/examplesDessan пишет:какой интересный этот phaser. Спасибо, буду знать
А еще у него нет проблем с физикой и может рендерится в вебгл, т.е работает горааздо шустрее поинта к примеру)
S30N1k- Сообщения : 97
Дата регистрации : 2017-12-27
Re: Часть 0. Термины, рисование на холсте. (черновой вариант)
автор raingo Чт Дек 28, 2017 8:39 pm
Оxуительный комментарий, я считаю.ну и есть такое правило: первыми задаются обязательные параметры, последними - необязательные. так как у квадрата есть цвет по умолчанию - черный и, как я подозреваю коорданаты по умолчанию - 0 0, то я бы написал
raingo- Отдел прокрастинации
- Сообщения : 756
Дата регистрации : 2017-12-25
Re: Часть 0. Термины, рисование на холсте. (черновой вариант)
автор Pyro338 Чт Дек 28, 2017 8:41 pm
Оxуительный комментарий, я считаю.
сарказм?
Тоже подумываю со своей командой начать снимать ролики, но по фейзеру
подумай. я бы с интересом посмотрел
Pyro338- Админ
- Сообщения : 587
Дата регистрации : 2017-12-25
Возраст : 38
Откуда : Ставрополь -
Re: Часть 0. Термины, рисование на холсте. (черновой вариант)
автор Dessan Чт Дек 28, 2017 8:42 pm
S30N1k пишет:Там еще интересные примитивные примеры есть, глянь http://phaser.io/examplesDessan пишет:какой интересный этот phaser. Спасибо, буду знать
А еще у него нет проблем с физикой и может рендерится в вебгл, т.е работает горааздо шустрее поинта к примеру)
да, я уже посмотрел и примеры и почитал описание на том сайте. Всё это здорово но мне нужно научиться создавать функции.
Dessan- Юный падаван
- Сообщения : 426
Дата регистрации : 2017-12-25
Re: Часть 0. Термины, рисование на холсте. (черновой вариант)
автор S30N1k Чт Дек 28, 2017 8:48 pm
Буду иметь ввиду, что первый потенциальный зритель у меня уже естьPyro338 пишет:подумай. я бы с интересом посмотрел
S30N1k- Сообщения : 97
Дата регистрации : 2017-12-27
Страница 1 из 4 • 1, 2, 3, 4
Страница 1 из 4
Права доступа к этому форуму:
Вы не можете отвечать на сообщения|
|
|