Суббота, 20 Апреля 2024, 08:09

Приветствую Вас Гость

Меню сайта
Категории каталога
Создание игр [355]
Статьи об общих понятиях связанных с созданием игр.
Программирование [82]
Гайды по программированию на разных ЯП.
Движки и Гейммейкеры [145]
Статьи о программах для создания игр, уроки и описания.
Софт [43]
Различные программы, в том числе в помощь игроделам.
2D-графика [14]
Уроки по рисованию, растр, пиксель-арт, создание спрайтов и пр.
3D-графика [16]
Уроки по моделированию, ландшафт, модели, текстурирование и пр.
Моддинг игр [5]
Модификация компьютерных игр, создание дополнений, перевод, хакинг.
Игры [161]
Статьи об играх, в том числе и сделанных на гейммейкерах.
Разное [129]
Статьи, которые не вошли в определённые разделы.
Наш опрос
Какую графическую систему API вы используете?
Всего ответов: 10241
Главная » Статьи » Программирование

Песочницы для вопросов по кодингу игр на TypeScript
Эта мини-статья для начинающих программистов игр на TypeScript, которые имеют много вопросов во время изучения TypeScript и игровых веб фреймворков/движков, и вынуждены искать песочницы, где бы они могли продемонстрировать свою проблему. Тот кто пытается помочь может открыть демонстрацию проблемы в песочнице, сделать копию одним нажатием на кнопку "Fork", начать сразу экспериментировать, сохранить решение и показать работающий пример.

Вы можете использовать песочницу JSFiddle для TypeScript, но, на мой взгляд, крайне неудобно, что JSFiddle не умеет хранить несколько файлов. Намного удобнее, если в песочнице можно разбить пример на отдельные файлы, где в каждом файле бы находился свой маленький класс. Повышая читабельность кода мы повышаем вероятность более быстрого ответа. А с другой стороны - отвечающий на вопрос может помочь сгруппировать пример по файлам и классам, сделав его более читабельным, и более простым для восприятия.

Я пробовал многие песочницы и особенно хороши оказались эти две:

  • https://next.plnkr.co
  • https://codesandbox.io

    Допустим, вы изучаете игровой движок Babylon.js, который, кстати, был переписан с нуля на TypeScript и наиболее дружелюбен к этому языку. Конечно, можно писать и на JavaScript, используя Babylon.js, но TypeScript лучше подходит для игр. У данного игрового движка есть своя песочница для примеров на TypeScript и JavaScript: https://playground.babylonjs.com

    Но в этой песочнице нельзя создавать несколько файлов. Намного проще написать пример локально, разбив его на несколько файлов и скопировать содержимое файлов в песочницу, не тратя время на изменения. Вы можете располагать свои примеры из нескольких файлов на TypeScript в песочнице Plunker, сделав просто Fork моего примера на игровом движке Babylon.js: https://plnkr.co/edit/YMWU5JxZ4R5b7NOSy2o4?p=preview Сделав Fork, вы можете использовать этот пример, создавая свои примеры на его основе. Каждый новый Fork - это новый пример и новая ссылка, в которой вы можете демонстрировать свои игровые примеры, либо проблемы связанные с неправильным пониманием работы игровых движков и фреймворков.

    Рассмотрим песочницу CodeSandbox и Plunker в применении с другими движками и фрейворками. Графический движок Pixi.js можно использовать c TypeScript. Этот движок очень популярен для разработки мобильных браузерных игр, так как оптимизирован именно под мобильные. Данный движок используется в качестве графического движка для игрового фреймворка Phaser. Вы можете сделать Fork моего примера и далее делать Fork со своего примера и писать любые свои игровые примеры с вопросами или демонстрациями:

  • Plunker: https://next.plnkr.co/edit/0FmksaR02yCUs63T?preview
  • CodeSandbox: https://codesandbox.io/s/03-sprite-from-image-the-learn-pixijs-book-typescript-ld3o0

    Пример в песочнице Plunker на Phaser 3 и TypeScript: https://next.plnkr.co/edit/61zD3u1nINJSvq7x?preview Вы можете сделать Fork, а ещё вы можете перенести этот пример в песочницу CodeSandox, используя по аналогу пример с Pixi.js выше. Это хороший способ потренироваться.

    Если вы тренируетесь писать простые игры без движков, на чистом WebGL и на TypeScript, либо вы пишите свои игровые движки на WebGL, то представляю вашему вниманию пример в двух песочницах, которые загружают текстуру из DropBox:

  • Plunker: https://next.plnkr.co/edit/4pnm93F1eWQuvpYg?preview
  • CodeSandbox: https://codesandbox.io/s/textured-rectangle-with-transforms-typescript-s7gfb

    Пример демонстрирует, как создать прямую ссылку на текстуру, которая лежит на DropBox. По виду ссылки на текстуру в примере вы сможете понять, как отредактировать обычную ссылку на расшаренный файл. Например, вы расшарили непрямую ссылку вида: https://www.dropbox.com/s/uhfx6694y4gd4ol/megatron.png?dl=0 Вам нужно преобразовать её к виду: https://dl.dropboxusercontent.com/s/uhfx6694y4gd4ol/megatron.png

    К слову сказать, поделюсь полезной информацией, что DropBox имеет лимиты на количество обращений к вашим игровым ресурсам (текстуры, спрайты, звуковые файлы), поэтому, если ожидается, что пример будет популярен и будет очень много просмотров, то расположите этот файл на GitHub. Перейдите к вашему файлу на GitHub и нажимаете кнопку "Download" и вы получаете ссылку, например, такого вида: https://raw.githubusercontent.com/8Observer8/8observer8.github.io/master/Assets/LearnPixiJS/Images/cat.png

    На данный момент, лимит обращений к файлам по прямой ссылке на DropBox составляет 10 ГБайт в день. Вы можете посчитать, учитывая размер вашего файла, сколько раз к нему могут обратиться за 24 часа.

  • Категория: Программирование | Добавил: 8Observer8 (27 Ноября 2019) | Автор: Игродел
    Просмотров: 2101 | Комментарии: 3 | Рейтинг: 5.0/5 |
    Теги: Форк, Plunker, кодинг, Кодинг игр, TypeScript, мнение, Мобильные браузерные игры, Пример, опыт, Fork, Фреймворки, сервисы, песочницы, программирование, Для вопросов, тестирование, Phaser 3, javascript, JSFiddle, Babylon.js, Pixi.js, Движки, код, ЯП
    Дополнительные опции:
    Также если вы считаете, что данный материал мог быть интересен и полезен кому-то из ваших друзей, то вы бы могли посоветовать его, отправив сообщение на e-mail друга:

    Игровые объявления и предложения:
    Если вас заинтересовал материал «Песочницы для вопросов по кодингу игр на TypeScript», и вы бы хотели прочесть что-то на эту же тему, то вы можете воспользоваться списком схожих материалов ниже. Данный список сформирован автоматически по тематическим меткам раздела. Предлагаются такие схожие материалы: Если вы ведёте свой блог, микроблог, либо участвуете в какой-то популярной социальной сети, то вы можете быстро поделиться данной заметкой со своими друзьями и посетителями.

    Всего комментариев: 3
    +1-
    1 Linka   (30 Ноября 2019 18:41) [Материал]
    LinkaTypeScript - это язык программирования, который появился в 2012 году, как сообщает Википедия, но я о нём слышу впервые в этой статье. Столько ЯП появилось в последние годы. Какие из них выживут и будут актуальными?

    +1-
    2 8Observer8   (30 Ноября 2019 22:35) [Материал]
    8Observer8Возможно вы слышали про языки: Turbo Pascal, Delphi и C#. Автор этих языков - Андерс Хейлсберг ( https://ru.wikipedia.org/wiki/Хейлсберг,_Андерс ). Он же является автором языка TypeScript. Может быть вы так же слышали про платформу [url=https://ru.wikipedia.org/wiki/Angular_(фреймворк)]Angular[/url] от компании Google, которая написана на TypeScript и использует его для программирования. Среда VSCode тоже написана на TypeScript. Может быть слышали про движок Babylon.js, который написана на TypeScript и использует TypeScript для программирования. TypeScript - это надстройка на JavaScript, которая делает его типизированным, компилируемым (в JS любой версии), добавляет разные полезные штуки знакомые программистам на C# и на других языках, такие фишки как: интерфейсы, дженерики, enum и многое другое. TypeScript поддерживают все более или менее актуальные библиотеки на JavaScript.

    +1-
    3 8Observer8   (30 Ноября 2019 23:01) [Материал]
    8Observer8Одно можно точно сказать, что TypeScript актуален и бурно развивается. Любой кто изучает программирование браузерных 2D/3D игр на чистом WebGL/GLSL (то есть свои движки) или с использованием готовых движков и фреймворков типа: Pixi.js, Phaser, Babylon.js, Three.js и т.д., знает, по крайней мере, о существовании языка. Он крайне популярен сейчас на этих движках. Достаточно регулярно читать один из официальных форумов программистов игр на этих движках. Всё больше и больше игровые сервера для браузерных игр переписываются на TypeScript, то есть те которые используют Node.js и socket.io/websockets. Очень много туториалов по разным движкам для браузерных игр и серверам на TypeScript. Гораздо больше этих туториалов выходит именно на TypeScript, а не на JavaScript.

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Поиск по сайту
    10 случ. движков
  • LinCity
  • Bladecoder Adventure Engine
  • HiAsm
  • RGM
  • PrBoom-plus
  • BlitzPlus
  • Sandy3D
  • Doom 3
  • VCMI
  • Away3D
  • Друзья сайта
    Игровой форум GFAQ.ru Перевод консольных игр
    Все права сохранены. GcUp.ru © 2008-2024 Рейтинг