Pixel arts: Pixel Art Tutorials

Содержание

‎App Store: Pixel Art — рисовать точками

Описание

Если вам нравится Pixel Art с этим приложением, вы можете создать чертежи, которые вы хотите очень легко!

Давайте сделаем простое приложение для рисования пиксельных искусств!
Это приложение является новым чувством приложения Pixel Arts Painting.

Мощный пиксельный редактор. Позволяет рисовать изображения на пиксельном уровне.

Как использовать:

— Выберите размер холста (пикселей), которые вы хотите или выберите свой пользовательский размер.
— Краска с пальцем пикселей, которые вы хотите.
— Вы можете стереть, отменить, изменять размер и цвет границ …
— Выберите доступный цвет или пользовательский цвет.
— Сохраните свой рисунок в своей галерее и ваше приложение.
— Вы можете сохранить свою ничье и закончить позже.
— Поделитесь своим рисунком с друзьями.

В настоящее время поддержка:
— карандаш, ластик, отмена, удалить, сохранить, поделиться .

..
— Инструмент для выбора цвета из используемых
— Различные размеры сетки, 8×8, 16×16, 32×32 и 64×64. И, конечно же, пользовательские размеры (максимум 128).

Легко поделиться работой.
Вам можно легко поделиться своими социальными сетями или приложениями в чате.

27 авг. 2021 г.

Версия 1.4

Новая функциональность:
— Инструмент для выбора цвета от тех, которые используются на нашем рисунке.

Ошибки исправлены:
— Ошибка сохранения чертежей для редактирования позже исправлено
— Ошибка при входе на пользовательский размер пикселя

Оценки и отзывы

Оценок: 20

Нужно доработать

Игра мне понравилась, но не хватает некоторых деталей:
1. Сделайте кнопку «отмена действия»;
2. Возможность приближать рисунок, а то на размере 64х64 трудно рисовать без приближения;
3. После того как рисунок готов, сделайте возможность убрать контуры квадратиков и чтобы можно было бы (по желанию) изменить их цвет и толщину;
4. Не знаю как у других, но у меня зависает игра, когда я хочу поделится рисунком. Приходится выходить из игры;
5. Добавьте больше размеров холста;
В принципе на этом все минусы. Ставлю пока 4 ☺️

Привет!
В новом обновлении мы добавили возможность масштабирования, чтобы лучше рисовать, и исправили проблему совместного использования изображения. Вы также можете создать рисунок нужного вам размера в пикселях. В дополнение к новым функциям, таким как кнопка отмены или возможность сохранить рисунок, чтобы закончить его позже.
Также можно убрать границы рисунка.
Спасибо!

Идея хорошая-исполнение не очень

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

Привет! В новом обновлении мы добавили возможность масштабирования, чтобы лучше рисовать, и исправили проблему совместного использования изображения. Вы также можете создать рисунок нужного вам размера в пикселях. В дополнение к новым функциям, таким как кнопка отмены или возможность сохранить рисунок, чтобы закончить его позже. Также можно убрать границы рисунка. Спасибо!

Разработчик Mireia Lluch Ortola указал, что в соответствии с политикой конфиденциальности приложения данные могут обрабатываться так, как описано ниже. Подробные сведения доступны в политике конфиденциальности разработчика.

Данные, используемые для отслеживания информации

Следующие данные могут использоваться для отслеживания информации о пользователе в приложениях и на сайтах, принадлежащих другим компаниям:

Не связанные с пользователем данные

Может вестись сбор следующих данных, которые не связаны с личностью пользователя:

Конфиденциальные данные могут использоваться по-разному в зависимости от вашего возраста, задействованных функций или других факторов. Подробнее

Информация

Провайдер: Mireia Lluch Ortola
Размер: 13,4 МБ
Категория: Развлечения
Возраст: 4+
Copyright: © Creations Apps
Цена: Бесплатно

Сайт разработчика
Поддержка приложения
Политика конфиденциальности

Другие приложения этого разработчика

Пишем Pixel Art Maker на JavaScript / Хабр

Доброго времени суток, друзья!

Предисловие

Однажды веб серфинг привел меня к этому.

Позже обнаружил статью про то, как это работает.

Казалось бы, ничего особенного — Пикачу, нарисованный средствами CSS. Данная техника называется Pixel Art (пиксельное искусство?). Что меня поразило, так это трудоемкость процесса. Каждая клеточка раскрашивается вручную (ну, почти; благо существуют препроцессоры; Sass в данном случае). Конечно, красота требует жертв. Однако разработчик — существо ленивое. Посему я задумался об автоматизации. Так появилось то, что я назвал Pixel Art Maker.

Условия

Что мы хотим получить?

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

Вот парочка примеров из сети:

пример 1
пример 2

Дополнительные функции:

форма клеточек — квадрат или круг
ширина клеточек в пикселях
количество клеточек
цвет фона
цвет для раскрашивания
функция создания холста
функция отображения номеров клеточек
функция сохранения/удаления изображения
функция очистки холста
функция удаления холста

Более мелкие детали обсудим в процессе кодинга.

Итак, поехали.

Разметка

Для реализации необходимого функционала наш HTML должен выглядеть примерно так:

<!-- создаем контейнер для инструментов -->
<div>
    <!-- создаем контейнер для формы фигур (клеточек) -->
    <div>
        <p>Shape Form</p>
        <select>
            <!-- квадрат -->
            <option value="squares">Square</option>
            <!-- круг -->
            <option value="circles">Circle</option>
        </select>
    </div>
    <!-- создаем контейнер для ширины и количества клеточек -->
    <div>
        <!-- ширина -->
        <div>
            <!-- устанавливаем диапазон от 10 до 50 (объяснение ниже) -->
            <p>Shape Width <br> <span>(from 10 to 50)</span></p>
            <input type="number" value="20">
        </div>
        <!-- количество -->
        <div>
            <!-- устанавливаем аналогичный диапазон -->
            <p>Shape Number <br> <span>(from 10 to 50)</span></p>
            <input type="number" value="30">
        </div>
    </div>
    <!-- создаем контейнер для цветов -->
    <div>
        <!-- цвет фона -->
        <div>
            <p>Background Color</p>
            <input type="color" value="#ffff00" required>
        </div>
        <!-- цвет фигуры (для раскрашивания) -->
        <div>
            <p>Shape Color</p>
            <input type="color" value="#0000ff">
        </div>
    </div>
    <!-- создаем контейнер для кнопок -->
    <div>
        <!-- кнопка для создания холста -->
        <input type="button" value="Generate Canvas">
        <!-- кнопка для показа/скрытия номеров клеточек (фигур) -->
        <input type="button" value="Show/Hide Numbers">
        <!-- кнопка сохранения/удаления изображения (результата) -->
        <input type="button" value="Save/Delete Image">
        <!-- кнопка для очистки холста с сохранением ширины и количества фигур -->
        <input type="button" value="Clear Canvas">
        <!-- кнопка для полного удаления холста -->
        <input type="button" value="Delete Canvas">
    </div>
</div>
<!-- холст -->
<canvas></canvas>

Диапазон (лимит) значений для ширины и количества клеточек определялся опытным путем. Эксперименты показали, что меньшие/большие значения нецелесообразны по причинам чрезмерной детализации (для значений < 10 для ширины), снижения производительности (для значений > 50 для количества) и т.д.

Стили

В стилях у нас ничего особенного.

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: flex-start;
}
h2 {
    width: 100%;
    text-align: center;
    font-size: 2.4em;
    color: #222;
}
.tools {
    height: 100%;
    display: inherit;
    flex-direction: column;
    margin: 0;
    font-size: 1.1em;
}
.buttons {
    display: inherit;
    flex-direction: column;
    align-items: center;
}
div {
    margin: .25em;
    text-align: center;
}
p {
    margin: .25em 0;
    user-select: none;
}
select {
    padding: .  25em .5em;
    font-size: .8em;
}
input,
select {
    outline: none;
    cursor: pointer;
}
input[type="number"] {
    width: 30%;
    padding: .25em 0;
    text-align: center;
    font-size: .8em;
}
input[type="color"] {
    width: 30px;
    height: 30px;
}
.buttons input {
    width: 80%;
    padding: .5em;
    margin-bottom: .5em;
    font-size: .8em;
}
.examples {
    position: absolute;
    top: 0;
    right: 0;
}
a {
    display: block;
}
span {
    font-size: .8em;
}
canvas {
    display: none;
    margin: 1em;
    cursor: pointer;
    box-shadow: 0 0 1px #222;
}

JavaScript

Определяем холст и его контекст (2D контекст рисования):

let c = document.querySelector('canvas'),
    $ = c.getContext('2d')

Находим кнопку для создания холста и «вешаем» на нее обработчик события «клик»:

document.querySelector('.generate').onclick = generateCanvas

Весь дальнейший код будет находиться в функции «generateCanvas»:

function generateCanvas(){
    . ..
}

Определяем форму, ширину, количество по горизонтали и общее количество (холст представляет собой одинаковое количество клеточек по горизонтали и вертикали), а также цвет фона:

// форма
let shapeForm = document.querySelector('select').value
// ширина (только целые числа)
let shapeWidth = parseInt(document.querySelector('.shapeWidth').value)
// количество по горизонтали (только целые числа)
let shapeNumber = parseInt(document.querySelector('.shapeNumber').value)
// общее количество (удваиваем количество по горизонтали)
let shapeAmount = Math.pow(shapeNumber, 2)
// цвет фона
let backColor = document.querySelector('.backColor').value

Определяем размер холста и устанавливаем ему соответствующие атрибуты (помним, что правильный размер холста устанавливается через атрибуты):

// ширина = высота = ширина клеточки * количество клеточек по горизонтали
let W = H = shapeWidth * shapeNumber
c. setAttribute('width', W)
c.setAttribute('height', H)

Некоторые дополнительные настройки:

// ширина границ
let border = 1
// цвет границ
let borderColor = 'rgba(0,0,0,.4)'
// по умолчанию номера фигур не отображаются
let isShown = false
// проверяем соблюдение диапазона значений
// и числового формата данных
// отображаем холст
// и в зависимости от формы фигуры запускаем соответствующую функцию
if (shapeWidth < 10 || shapeWidth > 50 || shapeNumber < 10 || shapeNumber > 50 || isNaN(shapeWidth) || isNaN(shapeNumber)) {
    throw new Error(alert('wrong number'))
} else if (shapeForm == 'squares') {
    c.style.display = 'block'
    squares()
} else {
    c.style.display = 'block'
    circles()
}

Вот как выглядит функция «squares»:

function squares() {
    // определяем начальные координаты
    let x = y = 0
    // массив фигур
    let squares = []
    // ширина и высота фигуры (квадрата)
    let w = h = shapeWidth
    // формируем необходимое количество фигур
    addSquares()
    // функция-конструктор
    function Square(x, y) {
        // координата х 
        this. x = x
        // координата y 
        this.y = y
        // цвет фигуры = цвет фона
        this.color = backColor
        // по умолчанию фигура не выбрана
        this.isSelected = false
    }
    // функция добавления фигур
    function addSquares() {
        // цикл по общему количеству фигур
        for (let i = 0; i < shapeAmount; i++) {
            // используем конструктор
            let square = new Square(x, y)
            // определяем координаты каждой фигуры
            // для этого к значению х прибавляем ширину фигуры
            x += w
            // когда значение х становится равным ширине холста
            // увеличиваем значение y на высоту фигуры
            // так осуществляется переход к следующей строке
            // сбрасываем значение х
            if (x == W) {
                y += h
                x = 0
            }
            // добавляем фигуру в массив
            squares.push(square)
        }
        // рисуем фигуры на холсте
        drawSquares()
    }
    // функция рисования фигур
    function drawSquares() {
        // очищаем холст
        $. clearRect(0, 0, W, H)
        // цикл по количеству фигур
        for (let i = 0; i < squares.length; i++) {
            // берем фигуру из массива
            let square = squares[i]
            // начинаем рисовать
            $.beginPath()
            // рисуем квадрат, используя координаты фигуры
            $.rect(square.x, square.y, w, h)
            // цвет фигуры
            $.fillStyle = square.color
            // ширина границ
            $.lineWidth = border
            // цвет границ
            $.strokeStyle = borderColor
            // заливаем фигуру
            $.fill()
            // обводим фигуру
            $.stroke()
            // если нажата кнопка для отображения номеров фигур
            if (isShown) {
                $.beginPath()
                // параметры шрифта
                $.font = '8pt Calibri'
                // цвет текста
                $.fillStyle = 'rgba(0,0,0,.6)'
                // рисуем номер, опираясь на его координаты
                $. fillText(i + 1, square.x, (square.y + 8))
            }
        }
    }
    // вешаем на холст обработчик события "клик"
    c.onclick = select
    // функция обработки клика
    function select(e) {
        // определяем координаты курсора
        let clickX = e.pageX - c.offsetLeft,
            clickY = e.pageY - c.offsetTop
        // цикл по количеству фигур
        for (let i = 0; i < squares.length; i++) {
            let square = squares[i]
            // определяем фигуру, по которой кликнули
            // пришлось повозиться
            // возможно, существует более изящное решение
            if (clickX > square.x && clickX < (square.x + w) && clickY > square.y && clickY < (square.y + h)) {
                // раскрашиваем фигуру, по которой кликнули, заданным цветом
                // при повторном клике возвращаем фигуре первоначальный цвет (цвет фона)
                if (square.isSelected == false) {
                    square.isSelected = true
                    square. color = document.querySelector('.shapeColor').value
                } else {
                    square.isSelected = false
                    square.color = backColor
                }
                // перерисовываем фигуры
                // в принципе, можно реализовать перерисовку только фигуры, по которой кликнули
                // но решение, по крайней мере у меня, получилось громоздким
                // решил, что игра не стоит свеч 
                drawSquares()
            }
        }
    }
    // находим кнопку для отображения номеров фигур и вешаем на нее обработчик события "клик"
    document.querySelector('.show').onclick = showNumbers
    // функция отображения номеров фигур
    function showNumbers() {
        if (!isShown) {
            isShown = true
            // цикл по количеству фигур 
            for (let i = 0; i < squares.length; i++) {
                let square = squares[i]
                $.beginPath()
                // параметры шрифта 
                $. font = '8pt Calibri'
                // цвет шрифта 
                $.fillStyle = 'rgba(0,0,0,.6)'
                // рисуем номер, опираясь на его координаты
                $.fillText(i + 1, square.x, (square.y + 8))
            }
        } else {
            isShown = false
        }
        // перерисовываем фигуры
        drawSquares()
    }
}

Функция «circles» очень похожа на функцию «squares».

JavaScript:

function circles() {
    // радиус круга
    let r = shapeWidth / 2
    let x = y = r
    let circles = []
    addCircles()
    function Circle(x, y) {
        this.x = x
        this.y = y
        this.color = backColor
        this.isSelected = false
    }
    function addCircles() {
        for (let i = 0; i < shapeAmount; i++) {
            let circle = new Circle(x, y)
            // к значению х прибавляется ширина фигуры
            x += shapeWidth
            // когда значение х становится равным сумме ширины холста и радиуса фигуры
            // увеличиваем значение у на ширину фигуры
            // сбрасываем значение х до значения радиуса
            if (x == W + r) {
                y += shapeWidth
                x = r
            }
            circles. push(circle)
        }
        drawCircles()
    }
    function drawCircles() {
        $.clearRect(0, 0, W, H)
        for (let i = 0; i < circles.length; i++) {
            let circle = circles[i]
            $.beginPath()
            // рисуем круг
            $.arc(circle.x, circle.y, r, 0, Math.PI * 2)
            $.fillStyle = circle.color
            $.strokeStyle = borderColor
            $.lineWidth = border
            $.fill()
            $.stroke()
            if (isShown) {
                $.beginPath()
                $.font = '8pt Calibri'
                $.fillStyle = 'rgba(0,0,0,.6)'
                $.fillText(i + 1, (circle.x - 8), circle.y)
            }
        }
    }
    c.onclick = select
    function select(e) {
        let clickX = e.pageX - c.offsetLeft,
            clickY = e.pageY - c.offsetTop
        for (let i = 0; i < circles.length; i++) {
            let circle = circles[i]
            // определяем круг, по которому кликнули
            let distanceFromCenter = Math. sqrt(Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2))
            if (distanceFromCenter <= r) {
                if (circle.isSelected == false) {
                    circle.isSelected = true
                    circle.color = document.querySelector('.shapeColor').value
                } else {
                    circle.isSelected = false
                    circle.color = backColor
                }
                drawCircles()
            }
        }
    }
    document.querySelector('.show').onclick = showNumbers
    function showNumbers() {
        if (!isShown) {
            isShown = true
            for (let i = 0; i < circles.length; i++) {
                let circle = circles[i]
                $.beginPath()
                $.font = '8pt Calibri'
                $.fillStyle = 'rgba(0,0,0,.6)'
                $.fillText(i + 1, (circle.x - 8), circle.y)
            }
        } else {
            isShown = false
        }
        drawCircles()
    }
}

Находим кнопку для сохранения/удаления результата (изображения) и вешаем на нее обработчик события «клик»:

document. querySelector('.save').onclick = () => {
    // ищем изображение
    let img = document.querySelector('img')
    // если не находим, создаем
    // если находим, удаляем
    img == null ? document.body.appendChild(document.createElement('img')).src = c.toDataURL() : document.body.removeChild(img)
}

Находим кнопку для очистки холста и…:

document.querySelector('.clear').onclick = () => {
    // очищаем и перерисовываем холст
    $.clearRect(0, 0, W, H)
    generateCanvas()
}

Находим кнопку для удаления холста и…:

document.querySelector('.delete').onclick = () => {
    $.clearRect(0, 0, W, H)
    c.style.display = 'none'
}

Результат выглядит так:

Codepen (добавил парочку примеров использования)

Github

Благодарю за внимание.

слоев		Текущий Все
Draw.modal.download.frames		Текущий Все
GIF		Скачать

Штирлиц — Сеть печатных салонов в Перми

Pixel arts: Pixel Art Tutorials — Pixilart

‎App Store: Pixel Art — рисовать точками

Описание

Оценки и отзывы

Нужно доработать

Идея хорошая-исполнение не очень

Данные, используемые для отслеживания информации

Не связанные с пользователем данные

Информация

Другие приложения этого разработчика

Вам может понравиться

Пишем Pixel Art Maker на JavaScript / Хабр

Предисловие

Условия

Разметка

Стили

JavaScript

Editing Girl Base — бесплатный онлайн-инструмент для рисования в пиксельной графике

Добавить комментарий Отменить ответ

Pixel arts: Pixel Art Tutorials — Pixilart

‎App Store: Pixel Art — рисовать точками

Описание

Оценки и отзывы

Нужно доработать

Идея хорошая-исполнение не очень

Данные, используе­мые для отслежи­вания информации

Не связанные с пользова­телем данные

Информация

Другие приложения этого разработчика

Вам может понравиться

Пишем Pixel Art Maker на JavaScript / Хабр

Предисловие

Условия

Разметка

Стили

JavaScript

Editing Girl Base — бесплатный онлайн-инструмент для рисования в пиксельной графике

Повтор рисования

Пользовательские шрифты

Кисти

Выберите, какую букву назначить

Pixel Art Variant Cards от Marvel Snap не очень хороши

Данные, используемые для отслеживания информации

Не связанные с пользователем данные