Песочницы для вопросов по кодингу игр на TypeScript
Эта мини-статья для начинающих программистов игр на TypeScript, которые имеют много вопросов во время изучения TypeScript и игровых веб фреймворков/движков, и вынуждены искать песочницы, где бы они могли продемонстрировать свою проблему. Тот кто пытается помочь может открыть демонстрацию проблемы в песочнице, сделать копию одним нажатием на кнопку “Fork”, начать сразу экспериментировать, сохранить решение и показать работающий пример.
Вы можете использовать песочницу JSFiddle для TypeScript, но, на мой взгляд, крайне неудобно, что JSFiddle не умеет хранить несколько файлов. Намного удобнее, если в песочнице можно разбить пример на отдельные файлы, где в каждом файле бы находился свой маленький класс. Повышая читабельность кода мы повышаем вероятность более быстрого ответа. А с другой стороны - отвечающий на вопрос может помочь сгруппировать пример по файлам и классам, сделав его более читабельным, и более простым для восприятия.
Я пробовал многие песочницы и особенно хороши оказались эти две:
Допустим, вы изучаете игровой движок 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
Пример демонстрирует, как создать прямую ссылку на текcтуру, которая лежит на 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 часа.
