TUTORIAL MEMBUAT PIXEL ART (8 BIT CHARACTER)

MENGGUNAKAN JAVA NETBEANS IDE 6.8

TUGAS
Untuk Memenuhi Tugas Mata Kuliah Komputer Grafis
Yang dibina oleh Bapak Ibnu Shina, S.Kom

Disusun oleh :
MOH. AGHUS HUSAINI
12104410006

UNIVERSITAS ISLAM BALITAR

FAKULTAS TEKNOLOGI INFORMASI
PROGRAM STUDI TEKNIK INFORMATIKA
BLITAR
2015

PENDAHULUAN
Pixel Art / 8-Bit Character adalah salah satu computer artwork (gambar, icon,
karakter, dll.) tertua yang kini mengalami masa kebangkitannya kembali. Pertama-tama
muncul sebagai grafis di dalam permainan video game namun kemudian terus berkembang
menjadi sebuah disiplin dan metode yang terpopuler untuk menciptakan artwork bergaya
retro.
Pixel art adalah seni digital yang digunakan ketika game komputer berbasis 2d
pertama kali muncul. Pixel art semakin jarang digunakan ketika teknologi visualisasi 3d
muncul. Sekarang, dengan adanya game mobile dan gadget-gadget atau handheld game
terbaru seperti Gameboy Advance dan Nintendo DS, pixel art digunakan kembali. Pixel Art
umumnya juga disebut seni 8 bit. Pixel Art menjadi kenangan tersendiri dan menjadi hobi
bagi sebagian orang.
Menurut Wikipedia, Pixel adalah sebuah titik dalam gambar raster/ bitmap. Pixel
adalah elemen terkecil dialamatkan dalam layer, yang merupakan unit terkecil dari gambar
yang dapat dikendalikan. Setiap pixel memiliki alamat sendiri sesuai dengan koordinat. Pixel
biasanya disusun dalam grid 2 dimensi, dan sering direpresentasikan dalam bentuk titik titik
dan kotak.

PEMBAHASAN
1. Buka aplikasi Java NetBeans IDE 6.8.
2. Kemudian buat New Project (File NewProject/ Ctrrl+Shift+N).

3. Pilih Java Java Application Next.

4. Beri nama pada Project Name kemudain Finish.

5. Kemudian buat JFrame Form pada Packeges/ Project tersebut. Klik kanan pada
Packeges/ Project New JFrame Form. Beri nama pada Form tersebut.

Buat juga Class baru. Klik kanan pada Packeges/ Project New Java Class. Dan beri
nama pada Class tersebut.

6. Selanjutnya ketikkan Source Code berikut pada Java Class.

package charbaru;
/**
*
* @author vomls
*/
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import javax.swing.ImageIcon;
import javax.swing.JPanel;
public class panelPict extends JPanel{
private Image picture;
public panelPict(){
picture = new
ImageIcon(getClass().getResource("/charBaru/picture.jpg")).getImage();
} //(/letak Packages/nama Image)
@Override
protected void paintComponent(Graphics g){
super.paintComponent(g);
Graphics2D gd = (Graphics2D)g.create();
gd.drawImage(picture,0,0,getWidth(),getHeight(),null);
//membuat outline icon hitam
g.setColor(Color.black);
g.fillRect(640, 160, 120, 10);
g.fillRect(620, 170, 20, 10);
g.fillRect(610, 180, 10, 20);
g.fillRect(600, 200, 10, 60);
g.fillRect(610, 260, 10, 20);
g.fillRect(620, 280, 20, 10);
g.fillRect(640, 290, 30, 10);
g.fillRect(660, 290, 10, 60);

g.fillRect(670, 330, 10, 10);

g.fillRect(680, 320, 10, 10);
g.fillRect(690, 310, 10, 10);
g.fillRect(700, 300, 10, 10);
g.fillRect(710, 290, 50, 10);
g.fillRect(760, 280, 20, 10);
g.fillRect(780, 260, 10, 20);
g.fillRect(790, 200, 10, 60);
g.fillRect(780, 180, 10, 20);
g.fillRect(760, 170, 20, 10);
//membuat fill icon putih
g.setColor(Color.white);
g.fillRect(640, 170, 120, 10);
g.fillRect(620, 180, 160, 10);
g.fillRect(620, 190, 40, 10);
g.fillRect(690, 190, 20, 10);
g.fillRect(740, 190, 40, 10);
g.fillRect(610, 200, 40, 10);
g.fillRect(670, 200, 10, 10);
g.fillRect(750, 200, 40, 10);
g.fillRect(610, 210, 30, 10);
g.fillRect(660, 210, 10, 10);
g.fillRect(760, 210, 30, 10);
g.fillRect(610, 220, 30, 10);
g.fillRect(760, 220, 30, 10);
g.fillRect(610, 230, 40, 10);
g.fillRect(750, 230, 40, 10);
g.fillRect(610, 240, 50, 10);
g.fillRect(740, 240, 50, 10);
g.fillRect(610, 250, 60, 10);
g.fillRect(730, 250, 60, 10);
g.fillRect(620, 260, 60, 10);
g.fillRect(720, 260, 60, 10);
g.fillRect(620, 270, 70, 10);

g.fillRect(710, 270, 70, 10);

g.fillRect(640, 280, 120, 10);
g.fillRect(670, 290, 40, 10);
g.fillRect(670, 300, 30, 10);
g.fillRect(670, 310, 20, 10);
g.fillRect(670, 320, 10, 10);
//membuat icon hati merah
g.setColor(Color.red);
g.fillRect(660, 190, 30, 10);
g.fillRect(710, 190, 30, 10);
g.fillRect(650, 200, 20, 10);
g.fillRect(680, 200, 70, 10);
g.fillRect(640, 210, 20, 10);
g.fillRect(670, 210, 90, 10);
g.fillRect(640, 220, 120, 10);
g.fillRect(650, 230, 100, 10);
g.fillRect(660, 240, 80, 10);
g.fillRect(670, 250, 60, 10);
g.fillRect(680, 260, 40, 10);
g.fillRect(690, 270, 20, 10);
//membuat karakter plankton
g.setColor(Color.yellow);
g.fillRect(600, 350, 10, 10);
g.fillRect(560, 330, 10, 10);
g.setColor(Color.black);
g.fillRect(580, 350, 20, 10);
g.fillRect(570, 360, 10, 10);
g.fillRect(560, 370, 10, 30);
g.fillRect(520, 390, 60, 150);
g.fillRect(550, 330, 10, 10);
g.fillRect(540, 340, 10, 10);
g.fillRect(530, 350, 10, 40);

g.fillRect(510, 440, 10, 40);

g.fillRect(500, 450, 10, 30);
g.fillRect(520, 540, 30, 10);
g.fillRect(560, 540, 20, 10);
g.fillRect(580, 430, 10, 40);
g.fillRect(590, 430, 10, 30);
g.fillRect(530, 550, 20, 10);
g.fillRect(560, 540, 20, 10);
g.fillRect(600, 440, 10, 10);
g.fillRect(610, 430, 10, 20);
g.fillRect(620, 420, 10, 20);
g.fillRect(630, 410, 10, 40);
g.fillRect(640, 420, 10, 20);
g.setColor(Color.green);
g.fillRect(530, 400, 40, 130);
g.fillRect(520, 450, 10, 10);
g.fillRect(530, 530, 20, 10);
g.fillRect(510, 460, 10, 10);
g.fillRect(570, 450, 10, 10);
g.fillRect(580, 440, 10, 10);
g.setColor(Color.black);
g.fillRect(550, 520, 10, 10);
g.setColor(Color.white);
g.fillRect(540, 410, 30, 30);
g.fillRect(630, 430, 10, 10);
g.setColor(Color.red);
g.fillRect(550, 410, 10, 20);
g.fillRect(560, 420, 10, 10);
g.fillRect(630, 420, 10, 10);

//membuat karakter karent

g.setColor(Color.black);
g.fillRect(900, 380, 20, 150);
g.fillRect(920, 420, 10, 20);
g.fillRect(890, 420, 10, 20);
g.fillRect(870, 420, 20, 10);
g.fillRect(860, 430, 20, 10);
g.fillRect(870, 440, 10, 10);
g.fillRect(930, 410, 20, 10);
g.fillRect(920, 420, 20, 10);
g.fillRect(880, 520, 60, 10);
g.fillRect(890, 530, 60, 10);
g.fillRect(870, 540, 20, 10);
g.fillRect(950, 530, 20, 10);
g.fillRect(900, 540, 10, 10);
g.fillRect(890, 460, 10, 10);
g.fillRect(880, 470, 10, 10);
g.fillRect(930, 540, 10, 10);
g.fillRect(950, 540, 10, 10);
g.fillRect(940, 510, 10, 10);
g.fillRect(850, 380, 100, 10);
g.fillRect(850, 310, 100, 10);
g.fillRect(840, 320, 10, 60);
g.fillRect(950, 320, 10, 60);
g.fillRect(960, 330, 10, 40);
g.fillRect(970, 340, 10, 20);
g.fillRect(890, 330, 20, 10);
g.setColor(Color.white);
g.fillRect(850, 320, 100, 60);
g.setColor(Color.lightGray);
g.fillRect(900, 400, 10, 20);
g.fillRect(910, 430, 10, 10);
g.fillRect(900, 450, 10, 10);

g.fillRect(910, 480, 10, 10);

g.fillRect(900, 500, 10, 10);
g.fillRect(960, 350, 10, 10);
g.setColor(Color.black);
g.fillRect(860, 330, 20, 10);
g.fillRect(910, 330, 20, 10);
g.fillRect(870, 340, 10, 10);
g.fillRect(920, 340, 10, 10);
g.fillRect(880, 360, 30, 10);
g.fillRect(940, 370, 10, 10); } }
7. Selanjutnya Copy sebuah Image yang terdapat di dalam directory kemudian Paste
pada Packeges/ Project. Klik kanan Packeges/ Project Paste.

Jangan lupa untuk memberi nama pada Image. Klik kanan pada Image Rename.

8. Kemudian tarik masuk Java Class ke dalam JFrame Form (Design). Dan sesuaikan
ukuran tersebut. Fungsi dari Image ini sebagai background.

9. Selanjutnya klik pada JFrame Form cari panel Properties atur pada Form Size
Policy. Berfungsi untuk membuat display program menjadi Center posisinya ketika
program di jalankan.

10. Kemudian klik pada Image cari pada panel Properties hilangkan tanda centang
(False), yang fungsinya adalah untuk membuat Image mengikuti display ketika
program di jalankan.

11. Selanjutnya klik kanan pada Project Clean and Build.

12. Kemudian jalankan program. Klik pada Packages/ Program Test (Shift + F6).

13. Program menggunakan Background Image

Hasil program tanpa Background Image.

Contoh lain Pixel Art menggunakan Java NetBeans.