Cara Membuat Editor Pixel Art Menggunakan Kanvas HTML5 – Internet adalah tempat yang baik untuk membuat sesuatu, tetapi juga tempat yang baik untuk memamerkan kreasi Anda. Editor seni piksel adalah proyek yang menarik untuk menguji keterampilan pengembangan web Anda. Ini memungkinkan Anda untuk menunjukkan kreativitas Anda dan memiliki audiens potensial yang besar.

Cara Membuat Editor Pixel Art Menggunakan Kanvas HTML5
Source : bruce-lab

Jadi, apa itu seni piksel, Anda mungkin bertanya?

Seni piksel adalah bentuk seni digital yang dibuat melalui penggunaan perangkat lunak, di mana gambar diedit pada tingkat piksel.

javascriptoo akan menggunakan banyak teknologi web modern untuk membangun proyek ini, yang juga akan membantu Anda dalam pekerjaan Anda di masa mendatang. Jadi mari kita mulai.

Teknologi Yang Digunakan

Kami akan menggunakan teknologi web berikut dalam proyek ini:

  • Kanvas HTML5
  • Kueri media CSS untuk desain responsif
  • Perpustakaan Gif.js untuk membuat GIF
  • Aplikasi Web Progresif (PWA) untuk pengalaman seperti aplikasi
  • Desain berorientasi objek

Fungsi editor

Aplikasi web yang akan kita buat memiliki fitur-fitur sebagai berikut:

  • Desain responsif (cocok untuk perangkat seluler)
  • Atur ukuran peta piksel
  • Alat gambar dasar, seperti garis, lingkaran, elips, cat, dll.
  • Kemampuan untuk membuat GIF animasi bingkai demi bingkai.

Apa itu Canvas HTML5 ?

Kanvas adalah elemen HTML yang dapat digunakan untuk menggambar grafik pada halaman web. Ini memungkinkan kita untuk membentuk objek grafis yang sederhana dan kompleks.

Baca Juga : Pelajari Dasar HTML Untuk Pemula Dalam 15 Menit

Sebelum menggunakan Canvas, pengembang harus menggunakan Flash untuk membuat animasi yang disematkan di halaman web. Dibandingkan dengan Flash, Canvas memiliki banyak keunggulan dan banyak digunakan untuk menampilkan grafik di halaman web.

Anda dapat menggunakan tag <canvas> untuk membuat kanvas, misalnya:

<canvas id="drawing" width="500" height="500"></canvas>

Ini akan membuat kanvas 500 X 500 kosong. Karena kanvas adalah elemen HTML, semua properti CSS juga dapat diterapkan ke kanvas.

Ada opsi lain untuk menampilkan grafik di halaman HTML, seperti SVG. Tapi kami akan menggunakan kanvas karena lebih cocok untuk gambar bitmap, dan seni piksel pada dasarnya adalah sekumpulan gambar bitmap.

Bagaimana Mendesain Editor Kami

Kami akan menyebut aplikasi kami PixelCraft. Anda dapat menemukan kode sumber lengkap dan demo aplikasi kami di sini.

Langkah pertama dalam membuat aplikasi kita adalah mendesain antarmuka pengguna. Antarmuka pengguna yang baik harus sesuai dengan semua ukuran layar dan harus mudah diakses.

UI aplikasi kita terlihat seperti ini:

Desktop layout
Source : freecodecamp

Ini akan responsif, yang artinya secara otomatis akan beradaptasi dengan layar yang lebih kecil, seperti perangkat seluler.

Bagaimana Membuat Dialog

Saat kita membuka aplikasi, akan muncul kotak dialog yang menanyakan dimensi.

Dialog box asking for dimensions
Source : freecodecamp

Kode HTML dari jendela pop-up kami adalah sebagai berikut :

<div id="popup">
<h3>Select the Dimensions Of the grid</h3>
<input type="text" id="width" value="16">X<input type="text" id="height" value="16">
<button id="close">OK</button>
</div>

CSS adalah sebagai berikut:

#popup {
background-color: #332f35;
color: white;
font-size: 20px;
padding: 30px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0.1, 0.1);
text-align: center;
max-width: 420px;
width: 70%;
transition: 0.2s all;
z-index: 2;
border-radius: 5px;
display: none;
}

Atribut penting di sini adalah position: fixed, yang memungkinkan kita menempatkan kotak dialog di mana saja di layar. left: 50%, top: 50% akan menempatkan sudut kiri atas kotak dialog di tengah halaman.

Baca Juga : Tutorial Cara Kelola CSS Z-Index

Untuk menyelaraskan bagian tengah dialog dengan bagian tengah halaman, kami menggunakan transform: translate(-50%, -50%), yang akan ditempatkan di tengah halaman.

Awalnya, saat halaman dimuat, properti display akan disetel ke none. Oleh karena itu, kami mengubahnya menjadi display: block untuk menampilkan kotak dialog.

Cara Menggambar Kanvas

Setelah pengguna memilih ukuran, elemen kanvas akan dibuat berdasarkan ukuran tersebut. Elemen kanvas akan berada di tengah halaman.

<canvas id="canvas"></canvas>

Itulah satu-satunya kode HTML yang diperlukan untuk kanvas. Semua properti lainnya akan disetel menggunakan JavaScript. Semua operasi menggambar juga dilakukan menggunakan JavaScript, yang membuat kanvas sangat berguna untuk menampilkan grafik.

CSS yang dibutuhkan untuk elemen kanvas adalah sebagai berikut:

#canvas {
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 75%;
max-width: 550px;
display: none;
cursor: crosshair;
touch-action: none;
}

Properti CSS yang diperlukan untuk memusatkan kanvas pada halaman sama dengan yang ada pada kotak dialog. touch-action: none Atribut tidak ada yang berguna di perangkat seluler karena akan menonaktifkan operasi gesek lainnya saat menggambar di kanvas.

Cara Membuat Bilah Alat Dan Palet

Element UI lainnya yang akan kita buat adalah toolbar dan palet. Mereka disejajarkan di tepi kiri dan kanan masing-masing.

Namun pada layar yang lebih kecil, ruang horizontal lebih kecil dari komputer desktop. Ini berarti kami harus memindahkannya ke bagian bawah dan atas layar perangkat seluler seperti yang ditunjukkan di bawah ini.

Mobile layout
Source : freecodecamp

Untuk ini, kami akan menggunakan kueri media CSS. Mereka memungkinkan kami untuk menggunakan sekumpulan aturan CSS tertentu hanya pada ukuran layar tertentu, yang berarti kami dapat menambahkan CSS yang hanya berjalan di perangkat seluler.

Baca Juga : 3 Kerangka Javascript Digunakan Pada 2021

Ini akan membuat aplikasi kami cocok untuk pengguna di ponsel dan membuatnya cocok untuk perangkat seluler, tetapi juga akan dapat menggunakan semua ruang yang tersedia di versi desktop.

HTML bilah alat adalah sebagai berikut:

<div id="toolbar">
<span class="item"><i class="fas fa-pencil-alt"></i></span>
<span class="item"><i class="fas fa-eraser"></i></span>
<!-- for every toolbar item -->
</div>

Tag <i> digunakan untuk ikon dengan font bagus, termasuk banyak ikon umum. CSS dari toolbar adalah sebagai berikut:

#toolbar {
position: fixed;
top: 50%;
left: 0%; /* align to left */
transform: translateY(-50%);
padding: 0px;
color: white;
max-width: 150px;
}

#toolbar .item {
display: inline-block;
float: left; /* toolbar items stack to left */
padding: 15px;
border: 1px solid #FFF;
cursor: pointer;
height: 32px;
width: 32px;
font-family: Arial, FontAwesome;
font-size: 24px;
}

Untuk menggunakan kueri media CSS, kita harus menambahkan yang berikut ini ke CSS:

@media only screen and (max-width: 600px) {
/* CSS added here will only be used on screen-width smaller than 600px */
}

Dalam kueri media ini, kami menambahkan CSS untuk menyelaraskan bilah alat ke bagian bawah layar.

Demikian pula, palet warna akan disejajarkan di sisi kanan layar pada komputer desktop dan bagian atas layar pada perangkat seluler. Melalui ketiga komponen ini, bagian desain UI diselesaikan. Saya sangat menyarankan agar Anda mencoba menggunakan kreativitas Anda saat membuat UI.

Cara Membuat Fitur Aplikasi

Desain aplikasi kita sudah siap, jadi sekarang kita akan menambahkan fungsionalitas padanya. Kami akan menggunakan fitur-fitur berorientasi objek dari JavaScript, yang akan membuatnya lebih mudah untuk menambahkan fitur-fitur baru di masa mendatang.

Baca Juga : 6 Aplikasi Kurir atau Pengiriman Barang Terbaik

Desain berorientasi objek berarti bahwa semua properti dan metode yang terkait dengan objek harus dikelompokkan bersama.

Dalam desain kita, Canvas akan menjadi objek, jadi semua atribut elemen canvas dan metodenya harus ditempatkan di class Canvas.

class Canvas {
  constructor(width, height) {}  // initialize all canvas properties
    
  draw(x, y) {}  // method to draw a pixel on canvas
    
  erase(x, y){}  // method to erase a pixel on canvas
    
  setcolor(color) {}  // method to set the current color
    
  setmode(i) {}  // method to set the active tool
    
  save() {}  // method to save pixel art as image

  clear() {}  // method to clear canvas

  addFrame() {}  // method to add current frame to frame list

  deleteFrame(f) {}  // method to delete a specific frame

  loadFrame(f) {}  // method to load a specific frame onto canvas

  renderGIF() {}  // method to render a GIF using frames

  undo() {}  // method to undo a given step

  redo() {}  // method to redo a given step

  addImage() {}  // method to load an image as pixel art
}

Setiap kali sebuah instance dari kelas dibuat, konstruktor dijalankan. Ini digunakan untuk menginisialisasi properti objek. Dalam contoh kami, lebar dan tinggi kanvas akan disetel di konstruktor.

Untuk menggambar di kanvas menggunakan gerakan mouse atau gerakan geser, kita perlu menambahkan pendengar acara ke kanvas. Pemroses acara yang digunakan untuk mendeteksi gerakan mouse di desktop adalah mousemove. Di perangkat seluler, ini di ambang touchmove.

Pemroses acara dapat disetel sebagai berikut :

var canvas = document.querySelector("#canvas");

canvas.addEventListener("mousemove", e => {
      if (this.active) {
        var rect = canvas.getBoundingClientRect();
        var x = e.clientX - rect.left;
        var y = e.clientY - rect.top;
        x = Math.floor(this.width * x / canvas.clientWidth);
        y = Math.floor(this.height * y / canvas.clientHeight);
        if(tools[Tool.pen]) {
          this.draw(x, y)
        }
        else if(tools[Tool.eraser]) {
          this.erase(x, y);
        }
      }
});

Saat kita menyiapkan pemroses peristiwa dan peristiwa terjadi, parameter e akan diteruskan ke penangan peristiwa kita, yang berisi data yang terkait dengan peristiwa tersebut.

Dalam hal ini, koordinat mouse dapat ditemukan di parameter ini. Koordinat ini relatif terhadap referensi halaman, tetapi kita harus relatif terhadap referensi kanvas. Untuk ini, kami menggunakan metode getBoundingClientRect().

Bounding Rectangle
Source : freecodecamp

Ini memberikan persegi panjang pembatas dari elemen kanvas, yang dapat kita gunakan untuk menemukan koordinat mouse relatif terhadap kanvas. Koordinat ini masih dalam piksel.

Saat menginisialisasi kanvas, kami menentukan lebar dan tingginya sebagai dimensi. Ini adalah jumlah piksel yang kita inginkan dalam arah horizontal dan vertikal. Oleh karena itu, koordinat mouse perlu diubah menjadi satuan ini.

Koordinat yang kami temukan menggunakan JavaScript relatif terhadap halaman dalam piksel. Misalnya, jika ukuran CSS kanvas adalah 320 X 320, dan kita membuat gambar 16 X 16 piksel, maka setiap piksel akan menjadi sekitar 320/16 = 20 piksel.

Oleh karena itu, jika koordinat yang ditemukan menggunakan JavaScript adalah (40, 60), maka koordinat pikselnya adalah (40 * 16/320, 60 * 16/320), yaitu (2, 3). Semua koordinat perlu diubah seperti ini.

Cara Menggunakan Metode draw

Kami akan menggunakan metode draw untuk menggambar piksel pada koordinat yang diberikan di kanvas. Untuk menggambar piksel dengan ukuran tertentu, kita akan menggunakan metode fillRect() dari konteks kanvas. Misalnya,

var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext('2d');

ctx.fillRect(10,10,50,50);  

// creates a 50 X 50 rectangle with upper-left corner at (10,10)

Cara Menggunakan Metode setcolor

Metode setcolor akan menggunakan warna aktif kanvas, yang akan digunakan untuk semua operasi menggambar. Kita akan menggunakan properti fillStyle dari konteks kanvas.

var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext('2d');

ctx.fillStyle = "rgba(255,0,0,255)";

// Sets the canvas color to red

Cara menggunakan metode addFrame

Kami akan menggunakan metode addFrame untuk membuat bingkai dari keadaan kanvas saat ini. Bingkai ini akan digunakan untuk membuat GIF nanti. Semua frame akan disimpan dalam array. Anda bisa menggunakan metode toDataURL () untuk menyimpan kanvas sebagai gambar.

Cara Menggunakan Metode setmode

Metode setmode akan menyimpan alat yang sedang aktif. Ini penting karena akan menentukan aksi yang akan dilakukan pada event mouse. Berdasarkan alat aktif, acara mouse dapat berupa pensil, penghapus, lingkaran, oval, dll.

Cara menggunakan metode Undo dan Redo

Metode Undo dan Redoakan mengurungkan atau mengulangi langkah. Anda dapat melakukan ini dengan menyimpan semua langkah dalam sebuah array. Kapan pun undo dipanggil, sebuah langkah dihapus dari larik langkah dan ditambahkan ke larik redo. Saat redo dipanggil, sebuah elemen akan dihapus dari larik redo dan ditambahkan ke larik langkah.

Cara Membuat GIF Animasi

Fitur yang sangat penting dari aplikasi kami adalah kemampuan untuk membuat GIF animasi. Tetapi kanvas tidak menyediakan cara apa pun untuk membuat GIF animasi. Sebagai gantinya, kita harus menggunakan pustaka eksternal untuk ini.

Kami akan menggunakan gif.js di aplikasi kami. Ini adalah pustaka yang cepat dan populer untuk merender GIF dari bingkai.

Untuk menggunakan gif.js, Anda harus mengunduh perpustakaan dan mengimpornya ke halaman. Setelah mengimpor, Anda harus mengikuti langkah-langkah di bawah ini untuk menginisialisasi program kerja GIF:

var gif = new GIF({
workers: 2,
quality: 10,
width: width, // width of GIF
height: height // Height of GIF
});

gif.on('finished', function (blob) {
var url = URL.createObjectURL(blob);
var link = document.createElement('a');
link.download = 'canvas.gif';
link.href = url; // download GIF after rendering
link.click();
});

Kode di atas akan menginisialisasi program kerja GIF dan mengunduh GIF setelah rendering.

Untuk membuat GIF, kita harus menambahkan bingkai ke pekerja. Kita bisa melakukan ini :

gif.addFrame(img, {
  copy: true,
  delay: 100  // Delay of frame in milliseconds
});

Kami akan terus menambahkan bingkai ke GIF. Setelah menambahkan bingkai, Anda dapat menggunakan fungsi gif.render()untuk merender GIF darinya. Saat dipanggil, pekerja latar akan merender GIF dari bingkai. Saat GIF sudah siap, itu akan diunduh.

Pada titik ini, kami telah menyelesaikan pembuatan editor seni piksel. Anda dapat menggunakannya untuk membuat gambar dan animasi GIF.

Kesimpulannya

Dalam tutorial ini, kami membuat editor seni piksel menggunakan kanvas HTML5. Saat mengedit, kami menggunakan banyak teknologi jaringan. Kami mempelajari cara membuat UI yang responsif dan cara menggunakan desain berorientasi objek untuk membantu kami menulis kode yang dapat dipelihara.

Sekali lagi, Anda dapat menemukan proyeknya di sini. Ini juga berisi demonstrasi kerja dari semua fungsi.

Dibandingkan dengan situasi yang mungkin terjadi, apa yang kita bahas di artikel ini masih sangat sederhana. Anda bisa menambahkan banyak fitur agar aplikasi lebih menarik. Selamat bersenang-senang.