Пиксельный редактор(пока что рисовалка )
- Рисовать на холсте ЛКМ или просто одним пальцем.
- Перемещать холст ПКМ, с тач-экранов никак.
- Масштабировать холст колесиком мыши, с тач-экранов никак.
Горячие клавиши(пока одна):
Все плагины представляют собой .js файлы с классом, унаследованным от Plugin https://github.com/mrybs/bitmapper/blob/master/plugins/plugin.js
В каждом классе плагина должно присутствовать поле meta:
Plugin.meta = {
id: 'author.plugin-id',
name: 'Название плагина',
version: '1.0.0',
author: 'Автор плагина',
require: []
}
Также в плагине должен присутствовать метод load, отвечающий за загрузку плагина.
Собственно вот хелоуворлд плагин:
class MyFirstPlugin extends Plugin{
constructor(){
super()
this.meta = {
id: 'mrybs.my-first-plugin',
name: 'Мой первый плагин',
version: '0.0.1',
author: 'Mr. Ybs',
require: []
}
}
load(){
setTimeout(() => {
alert('Hello, world!')
}, 0)
}
}
Important
Здесь alert Hello, world!
выполняется через setTimeout с задержкой 0 дабы не занимать основой поток. В будущих сборках битмаппера будут ограничения по времени загрузки плагина, поэтому работа плагина может быть нарушена.
Все кисти представляют собой классы, унаследованные от Brush https://github.com/mrybs/bitmapper/blob/master/brush.js
В каждой кисти должно присутствовать поле meta:
Brush.meta = {
id: 'mrybs.my-first-brush-plugin.brush',
name: 'Кисть'
}
В конструктор кисти принимается canvas рабочей области и size размер кисти. От канваса по сути нужен только его метод canvas.setPixel(pos, color), который устанавливает заданный цвет color на координату pos рабочей области.
Рисованием занимается метод кисти draw. Он принимает в качестве аргументов pos позицию рабочей области на которой была использована кисть и color цвет кисти.
Собственно вот пример кисти, которая рисует квадраты заданных размеров size в конструкторе:
class SquaredBrush extends Brush{
constructor(canvas, size){
super(canvas, size)
this.meta = {
id: 'mrybs.squared-brush',
name: 'Квадратная кисть'
}
}
draw(pos, style){
for(let yi = 0; yi < this.size; yi++){
for(let xi = 0; xi < this.size; xi++){
this.canvas.setPixel(
new Vector(pos.x-this.size/2+xi, pos.y-this.size/2+yi).round(),
style
)
}
}
}
}
Note
Кисть должна устанавливаться с помощью плагина
class SquaredBrushPlugin extends Plugin{
constructor(){
super()
this.meta = {
id: 'mrybs.squared-brush-plugin',
name: 'Плагин квадратной кисти',
version: '1.0.0',
author: 'Mr. Ybs',
require: [
'mrybs.core'
]
}
}
load(){
this.loadBrush(SquaredBrush)
}
}
Здесь в require
указан плагин mrybs.core
, без него ничего работать не будет — это основной плагин на котором работает битмаппер
Чтобы открыть инструменты разработчика есть два способа:
- Нажать
]
илиъ
(как обозначено на клавиатуре в начале документа) - В адресной строке в конце ссылки прописать
#dev
и обновить страницу
Инструменты разработчика состоят из 4-ёх секций:
-
В первой секции указаны загруженные плагины в формате
Имя Версия
-
Проблемные плагины указаны в отдельной секции и подсвечены определенным цветом в зависимости от типа проблемы:
- Красный — ошибка при загрузке
- Оранжевый — нет какой-либо зависимости
- Желтый — при загрузке зависимости возникла ошибка
- Фиолетовый — загрузка плагина вышла из лимита по времени
-
Следующая секция показывает координату пикселя рабочей области под курсором. Эта секция появится только при наведении курсора на рабочую область, поэтому на устройствах с тач-экранами ее не будет
-
Последняя секция выводит размер текущей рабочей области в пикселях
Также некоторая информация выводится в консоль(например, статус плагинов, вывод конкретных ошибок):
Если в адресной строке в конце ссылки прописать #benchmark
и обновить страницу, то после создания проекта запустится тестирование частоты кадров отрисовки инструмента выбора цвета и отрисовки рабочей области.
Это также можно использовать с плагинами в каких-то своих целях:
Plugin.benchmark = () => {
new Promise(resolve => setTimeout(resolve, 2500)) // Условная нагрузка
return true // Необходимо для вывода в консоль информации о тестировании. В будущих версиях можно будет также выводить текст из тестирования (результаты тестирования)
}