Рендеринг игр на основе плиток 2d в стиле javascript

Question

Я сделал террарии клонов в прошлом. Я считаю, что они довольно забавные как проект. Но с обновлением 1.2 Terraria я хочу клон, который я могу запустить на любом компьютере в любом месте в любое время. Так что я работаю с HTML5.

Сначала я думал, что это будет просто - как это было в прошлом с другими языками, которые я использовал.

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

Некоторый псевдокод для того, что я попробовал, состоит в следующем:

Установите fillStyle на черный. Переберите ширину и высоту /16 и создайте x количество функций rect(). Заполните все поля. Нарисуйте игрока (либо с изображением, либо с другим прямоугольником другого цвета).

Что отлично работает, я могу сделать все это просто замечательно. Но это занимает намного больше времени, чем мне бы хотелось. Я бы получил около 4FPS, если бы использовал это для рендеринга. Так что мне интересно, как я могу сделать рендеринг 2-мерной карты, основанной на плитке, которая эффективно выходит за пределы области просмотра?

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

РЕДАКТИРОВАТЬ:

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

Answer 1

Если бы вы сделали все это один раз, вы бы получили меньше лагов. Может быть, на всей карте есть сетки размером 16x16, которые можно сохранить, а затем при необходимости отобразить целиком? Вы можете (повторно) визуализировать их, когда они изменены и когда они впервые появляются.

Answer 2

Я просто использую сайтcrat.mit.edu для кодирования. Теперь элемент холста кажется просто неправильным. Просто было вот это:<canvas width="840" height="1244"></canvas>. В нем ничего не было. Но я обнаружил кое-что очень тревожное. Теперь, когда я сказал<canvas>элемент был пуст, я был не совсем прав. Он также имел элемент<iframe>но и он был пуст. Однако у него был источник (src), просматривающий это:

      <iframe src="svg://#7382939238578,9234973905703426598345345.3457178293748298384923.23749824.2374932.773.210597348347239" id="SVG"&gt;&lt;input src="terraria-stamped.html"></iframe>

Так вот, я придумал вот такую ​​террарию. 2D, Дизайнер плеера (может не сработает),TerrariaШрифт (тоже может не работать), а пока карта (X mar-x место). Кроме того, я добавил Crimson (поднял эту идею от Griffpatch), но он появляется под землей. Его радиус появления составляет 184 клетки справа от точки возрождения и 156 клеток слева от точки возрождения. У NPC не может быть там домов. Для просмотра истории.

      <a href="http://www.sites.google.com/ucaes.org/terrariacode/">click here.</a>

Answer 3

Я сделал именно это для аналогичной игры. Одна вещь, которую я заметил, была с очень большими картами, потребовалось много времени, чтобы снова нарисовать весь фон. Вместо этого создайте несколько элементов canvas и нарисуйте фон только один раз. Затем нарисуйте игрока и врагов (и другие нестатические плитки) поверх этого, используя другой холст.