- Обзор моего проекта
- Мой подход к созданию холста в SwiftUI
- Бот
- Зависимости
- Категория представления:
- Ссылка на код
- chuiizeet / place-ios
- Клон r/place canvas, созданный с помощью Appwrite и SwiftUI для Appwrite Hackathon
- Place iOS
- Дополнительные ресурсы / информация
- Onboarding
- Вид холста
- Аутентификация
- Настройки
- Уведомления
- Видео
- Заключение
Обзор моего проекта
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’.
Дополнительные ресурсы / информация
Onboarding
Забавный факт: на последней странице у третьего парня футболка с appwrite.
Вид холста
Для навигации в представлении холста вы можете увеличивать, уменьшать масштаб, перетаскивать и сбрасывать.
Забавный факт: Допустимые цвета — это моя любимая палитра, когда я занимался пиксель-артом: PICO-8 (только я немного изменил белый цвет на #FFFFFF).
Аутентификация
Только пользователи могут размещать пиксели.
Настройки
Для выхода из системы, изменения коэффициента масштабирования и информации.
Забавный факт: приложение Tha поддерживает темный режим. 😝🌙
Уведомления
Я использую капли для установки классных уведомлений. 🔔
Видео
-
Демонстрация приложения
-
Демонстрация бота
Заключение
Этот проект было очень интересно делать.
Спасибо за прочтение и отдельное спасибо сообществу Appwrite за решение моих вопросов. 🙏