Skip to content

mrybs/bitmapper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

44 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Bitmapper

Пиксельный редактор(пока что рисовалка :bowtie:)

mrybs.github.io/bitmapper

GitHub Actions Workflow Status

GitHub Repo stars GitHub watchers GitHub forks

License GitHub top language GitHub language count GitHub contributors

GitHub last commit GitHub commit activity GitHub commit activity wakatime GitHub Created At

GitHub code size in bytes GitHub repo size GitHub repo file or directory count

Сам редактор

Использование

Управление

  • Рисовать на холсте ЛКМ или просто одним пальцем.
  • Перемещать холст ПКМ, с тач-экранов никак.
  • Масштабировать холст колесиком мыши, с тач-экранов никак.

Горячие клавиши(пока одна):

Горячие клавиши

Модификация

Все плагины представляют собой .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 и обновить страницу
Инструменты разработчика 1 Инструменты разработчика 2

Инструменты разработчика состоят из 4-ёх секций:

  • В первой секции указаны загруженные плагины в формате Имя Версия

  • Проблемные плагины указаны в отдельной секции и подсвечены определенным цветом в зависимости от типа проблемы:

    • Красный — ошибка при загрузке
    • Оранжевый — нет какой-либо зависимости
    • Желтый — при загрузке зависимости возникла ошибка
    • Фиолетовый — загрузка плагина вышла из лимита по времени
  • Следующая секция показывает координату пикселя рабочей области под курсором. Эта секция появится только при наведении курсора на рабочую область, поэтому на устройствах с тач-экранами ее не будет

  • Последняя секция выводит размер текущей рабочей области в пикселях

Также некоторая информация выводится в консоль(например, статус плагинов, вывод конкретных ошибок):

Консоль

Если в адресной строке в конце ссылки прописать #benchmark и обновить страницу, то после создания проекта запустится тестирование частоты кадров отрисовки инструмента выбора цвета и отрисовки рабочей области. Это также можно использовать с плагинами в каких-то своих целях:

Plugin.benchmark = () => {
    new Promise(resolve => setTimeout(resolve, 2500))  // Условная нагрузка
    return true  // Необходимо для вывода в консоль информации о тестировании. В будущих версиях можно будет также выводить текст из тестирования (результаты тестирования)
}

About

Пиксельный редактор

Topics

Resources

License

Stars

Watchers

Forks

Contributors 2

  •  
  •