Place iOS — r/place клон холста


Обзор моего проекта

Place iOS — это клон r/place canvas, сделанный с помощью Appwrite и чистого SwiftUI.
Я решил создать этот проект для Appwrite Hackathon, чтобы проверить себя в SwiftUI и использовать большинство appwrite Apis. 😃
Я супер фанат пиксель-арта и этот проект идеально подходит для него. 🟩🟨🟪

Правила просты: Вы можете размещать пиксель каждые 30 секунд, а холст будет обновляться в режиме реального времени.

Управление учетными записями, базой данных, хранилищем, сессиями, realtime, функциями и многим другим стало суперпростым с appwrite. 😎

Мой подход к созданию холста в SwiftUI

class CanvasViewModel: ObservableObject {

    @Published var documents: [Doc] = [Doc]()

    // MARK: - Properties
    let canvasWidth: Int = 256
    let canvasHeight: Int = 256

    /// Pixel per pixels 👀
    /// if canvasPixelFactor is high every pixels looks better (no antialiasing) but the performance in older devices will be compromised... Int(UIScreen.main.scale) + (3-12) works good
    let canvasPixelFactor: Int = Int(UIScreen.main.scale) + 3

    /// Computed canvas size
    var canvasWidthComputed: CGFloat {
        return CGFloat(canvasWidth * canvasPixelFactor)
    }

    var canvasHeightComputed: CGFloat {
        return CGFloat(canvasWidth * canvasPixelFactor)
    }
    .
    .
    .
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Получить пиксели из хранилища и базы данных, затем создать изображение

private func createImage(completionHandler: @escaping (UIImage?, String?) -> Void){

        guard !documents.isEmpty else { fatalError() }

        guard canvasWidth > 0 && canvasHeight > 0 else { fatalError() }


        DispatchQueue.global(qos: .utility).async {
            let width = self.canvasWidth * self.canvasPixelFactor
            let height = self.canvasHeight * self.canvasPixelFactor
            let rgbColorSpace =     CGColorSpaceCreateDeviceRGB()
            let bitmapInfo =        CGBitmapInfo(rawValue: CGImageAlphaInfo.premultipliedLast.rawValue) // premultipliedLast or .none
            let bitsPerComponent =  8
            let bitsPerPixel =      32

            var pixels = [Pixel]()

            if self.pixelsArray.isEmpty {

                for _ in 0..<width {
                    for _ in 0..<height {
                        pixels.append(Pixel(r: 255, g: 255, b: 255, a: 255))
                    }
                }

                // Colorize
                for doc in self.documents {
                    let x = doc.x + 1
                    let y = doc.y + 1

                    let startXPx = x > 0 ? Int((x-1) * self.canvasPixelFactor) : 1
                    let endXPx = Int(x * self.canvasPixelFactor)

                    let startYPx = y > 0 ? Int((y-1) * self.canvasPixelFactor) : 1
                    let endYPx = Int(y * self.canvasPixelFactor)

                    for i in startXPx..<endXPx{
                        for j in startYPx..<endYPx{
                            let offset: Int = (Int(self.canvasWidthComputed) * j) + i
                            pixels[offset] = Pixel(hexString: doc.hex)
                        }
                    }
                }

                .
                .
                .
                .
    }
Войти в полноэкранный режим Выход из полноэкранного режима

Бот

Также используя преимущества SDK appwrite, я сделал бота на python для создания пиксельного искусства на холсте.🤖.

Бот преобразует спрайты (или любое изображение) в правильное изображение для рисования на холсте, бот использует секретную переменную окружения, которую мы предоставили ранее в функции colorPixel, таким образом, пропуская задержку. 😎

Зависимости

Appwrite Apple SDK: Для управления, учетных записей, сессий, базы данных, хранилища, функций, реального времени… ⚡

Drops: Для создания уведомлений.
Popovers: Для создания всплывающих меню.
SwiftyBeaver: Для ведения журнала.

Категория представления:

Mobile Moguls

Ссылка на код

chuiizeet / place-ios

Клон r/place canvas, созданный с помощью Appwrite и SwiftUI для Appwrite Hackathon

Place iOS

Place iOS — это клон r/place, сделанный с помощью Appwrite и SwiftUI.
Я решил создать этот проект для Appwrite Hackathon, чтобы проверить себя в SwiftUI и использовать большинство appwrite Api’.

Посмотреть на GitHub

Дополнительные ресурсы / информация

Onboarding

Забавный факт: на последней странице у третьего парня футболка с appwrite.

Вид холста

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

Забавный факт: Допустимые цвета — это моя любимая палитра, когда я занимался пиксель-артом: PICO-8 (только я немного изменил белый цвет на #FFFFFF).

Аутентификация

Только пользователи могут размещать пиксели.

Настройки

Для выхода из системы, изменения коэффициента масштабирования и информации.

Забавный факт: приложение Tha поддерживает темный режим. 😝🌙

Уведомления

Я использую капли для установки классных уведомлений. 🔔

Видео

  • Демонстрация приложения

  • Демонстрация бота

Заключение

Этот проект было очень интересно делать.
Спасибо за прочтение и отдельное спасибо сообществу Appwrite за решение моих вопросов. 🙏

Оцените статью
Procodings.ru
Добавить комментарий