Создание камеры на чистом JavaScript, ViewPort в игре на JavaScript

Автор Pavel Shevchuk
Создание камеры на чистом JavaScript, ViewPort в игре на JavaScript

всем.

Привет народ. Меня зовут сканер и сегодня мы с вами будем делать камеру. Да — это действительно так будем сегодня рассматривать создания на чистом джаваскрипте.

Это для начала посмотрим на кот который у меня здесь уже имеется, что здесь у нас есть я создал для функций функция клетки функция rect собственная функция Clear canvas rect нас рисует какой нибудь прямоугольник координатам X Y и размер у него будет WH CSS Color — это цвет прямоугольника.

Давайте в цикле всё — это дело сейчас вызывать я вызову просто цикл Set interval функция у которой будет у нас выполняться например 1000 / 60 раз вот и всё здесь первым делом. Вызови Clear очистим наш canvas и затем — это рисуем прямоугольник адресуемым его например где-нибудь в координатах 2020 по X и Y и размером 50 на 70 такой прямоугольник. Свет я ему задам. Ну например вот такой и посмотрим как там дела у нас будет выглядеть. Ну вот всё нас рисовался наш прямоугольник всё у него вроде бы как нормально хорошо давайте начнём ещё один прямоугольник отставить вот так вот например справа там на 100 пикселей и вниз на 60 у него будет размер на такой будет 70 на 30 и. Соответственно ответ тоже возьмём ему другое например какой-нибудь такой вот немного кислоты хорошо неплохо. Всё нормально. Теперь давайте дерзайте прямоуголь. Будем двигать и так созданы здесь переменной X который будет на сравняться в начальной координате сотню пиксели и здесь теперь вместо сотни я напишу. Икс плюс то есть вот таким вот образом наш прямоугольник полетел. Ну грубо говоря справа всё только давайте не будем указывать nextplus напиши плюс равно 02 чтобы он не увеличивался у нас так быстро. Ну всё теперь. Помедленней всё — это дело у нас хорошо наш прямоугольник 1 красный. Будем двигать y.ua. Итак Y у нас будет равняться 20 и здесь писать y3 4202 всё замечательно теперь не раздвигаются таком вот в порядке. Мы же с вами будем делать камеру то есть мы будем например влево вправо вверх вниз туда куда нам угодно для этого здесь определим ещё одну переменную которую я назову например когда переводят объект-объект у него есть две переменные два свойства X равно нулю игрек равно нулю и 1 функция — это функция всё, что она — это принимать два аргумента X Y и увеличивать текущий x1x текущее Y на Y вот и всё. То есть если здесь теперь я вызову функцию камера мол. Она нас будет сбегать только вот эти две переменные то есть имеете в виду. Хорошо давайте сделаем двигать камеру мы будем справа поэтому тут я пишу камера мох по рисунку двигать вправо поэтому пишу здесь например 05 поиграйка будем забегать на ноль то есть вообще не будем забегать и если я сейчас у нас ничего не поменялось то есть наш прямоугольнике продолжая двигаться также как двигались до того как я написал здесь функцию движения камеры хорошо теперь один такой интересный момент наши наши прямоугольники в данный момент имеют свои собственные координаты. У этого координата 20 по иксу и перемена у этого прямоугольника переменная X и Y q60. То есть у нас есть две переменные они влияют только на координаты срисовки имеете в виду на координаты самих объектов при движении камеры объекты двигать нам нельзя то есть их позиция должна быть всегда одно и то же говорят стоит. Вас например на столе стакан вот вас пустой стол на столе стоит стакан. Ваши глаза — это камера. Если вы идете например вправо или влево то относительно ваших глаз относительно какой-нибудь точки на ваших глазах стакан будет естественно двигаться влево вправо если бы подпрыгнуть — это вниз он двигается в противоположную сторону относительно вашего движения, но при этом фактически координаты этого стакана на столе не меняются также и здесь при движении ко мне должны затрагивать координаты объектов они всегда должны быть неизменными всё, что нам нужно изменять. Это только позицию отрисовки этих объектов то есть наши переменные здесь мы не трогаем нашей прямоугольнике всегда будут рисоваться в одних и тех же координатах. Ну грубо говоря давайте я даже уберу здесь увеличения то есть оставлю просто Y. А здесь просто X и — это сейчас ни на, что не повлияет потому, что движение мы как бы отключили, но там где мы отрисовывает наш прямоугольник. Нам необходимо сделать следующее мы к нашей координате X должны прибавить отрицательное координат камера то есть минус Camera x + x сделаю тоже самое минус камера игрек плюс игрек. Таким образом мы с вами отрисовывает проекцию наших прямоугольников на камеру той позиции которую она двигается за сами же координаты самих прямоугольников у нас не меняются и. Теперь попробуем наша камера двигается вправо. Как вы можете видеть наши прямоугольнике уезжают влево то есть если я буду двигать камеру в обратном направлении в отрицательной картинка кто наши прямоугольнике соответственно будут двигаться в другую сторону, но имейте в виду с вами прямоугольнике сейчас не двигаются они по-прежнему рисуется вот этих координатах всегда теперь здесь возвращаем плюс плюс плюс плюс. Да я не писал басни и так как вы можете видеть у нас началось движение и наш красный прямоугольник он сдвигается. Ну вот немного не так то есть как бы теперь он двигается вниз вниз. Я немножко вправо. Но на самом деле сам прямоугольник двигается просто вниз помните об этом так по камере, что ещё сказать если допустим 0 штук камера будет двигаться у нас вниз и влево то есть всё в порядке то есть. Таким образом мы можем двигаться на камеру куда угодно. Если вы будете добавлять какие-то функции отрисовки. Не забывайте учитывать тот момент, что к ним нужно добавлять отрицательные координаты. Ну либо же вы можете. Вот эту координату отнять допустим вот координаты. То есть — это ни на, что не повлияет. Ну я привык к тому, что писать просто.

0 комментариев
0

Читайте также