Membuat efek distorsi Retro CRT menggunakan RGB pergeseran

() translation by (you can also view the original English article)

Dalam tutorial ini Anda akan belajar bagaimana untuk memisahkan gambar tiga warna yang berbeda saluran untuk menciptakan efek pergeseran RGB. Saya juga akan menunjukkan Anda beberapa grafis trik untuk meniru layar CRT lama.

Hasil akhir Tinjauan

Berikut adalah contoh dari efek yang kami akan membuat:

Takeaway utama dalam tutorial ini akan menjadi RGB pergeseran efek, tapi saya juga akan menunjukkan cara membuat CRT scan baris, kebisingan, dan roll bar grafis.

Langkah 1: Tentang RGB gambar

Setiap gambar pada layar komputer Anda ditampilkan menggunakan warna merah, biru dan hijau. Oleh pencampuran tiga warna dalam berbagai jumlah komputer Anda dapat membuat warna lain dalam spektrum.

Jika saluran tiga warna tidak menyelaraskan dengan benar gambar tidak akan composited dengan benar, dan Anda akan mulai melihat tepi saluran individu 'perdarahan' keluar dari sisi gambar.

Ini adalah persis apa yang akan kita lakukan dalam tutorial ini; memisahkan gambar menjadi salurannya tiga warna dan kemudian mengubah masing-masing secara individual untuk menciptakan sebuah distorsi efek. Mari kita ke sana!

(Anda dapat belajar lebih banyak mengenai bagaimana warna RGB bekerja di Wikipedia.)

Langkah 2: Buat layar judul

Anda akan perlu untuk membuat grafis untuk menerapkan efek. Aku memilih untuk membuat layar judul permainan video, tetapi Anda dapat membuat apapun grafis yang Anda inginkan.

Membuat klip baru yang disebut 'titleScreen' dan menempatkan layar judul Anda (atau gambar lainnya) di dalam.

Saya pikir sesuatu yang bertema retro works terbaik dengan efek ini karena mengingatkan saya pada tua rusak arcade layar. Saya membuat layar judul saya dengan font yang disebut Commodore 64 Pixeled. Saya menambahkan filter cahaya untuk teks untuk memberikan yang smeary, ditiup keluar tampilan CRT.

Setelah Anda senang dengan desain Anda, menambah titleScreen movieklip di panggung dan memberikan contoh nama 'titleScreen'.

Step 3: Membuat kelas RGBShift

Buat sebuah file baru Actionscript yang bernama 'RGBShift.as'. Simpan file ini di direktori yang sama sebagai file Flash Anda utama. Tambahkan kode untuk membuat shell kelas:


package {

  import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.display.BitmapData;
	import flash.display.Bitmap;
	import flash.display.BitmapDataChannel;
	import flash.display.BlendMode;
	import flash.events.Event;
	import flash.geom.Point;

	public class RGBShift extends Sprite {

		private var _centerX:Number;
		private var _centerY:Number;

		// CONSTRUCTOR
		public function RGBShift(dObj:DisplayObject) {


        }


	}

}

Catatan Editor: tidak nyaman dengan kelas berbasis coding belum? Periksa ini tips cepat untuk membantu Anda memulai.

Kode ini tidak benar-benar melakukan apa-apa lagi. Baris pertama 10 atau lebih mengimpor semua kelas tambahan kita akan membutuhkan. Aku punya dua variabel pribadi yang bernama '_centerX' dan '_centerY' (saya menggunakan garis bawah untuk menandakan variabel pribadi). Ini kedua variabel ini akan terus x dan y koordinat pusat grafis kami.

Perhatikan bahwa fungsi constructor (kosong untuk sekarang) menerima DisplayObject. Ini akan memungkinkan kita untuk menggunakan jenis DisplayObject dengan efek ini (movieklip, Sprite, Bitmap, dll.) Kita akan menggunakan titleScreen movieklip dari panggung, tapi memiliki kelas menerima apapun DisplayObject tetap fleksibel untuk nanti menggunakan.

Langkah 4: Menambahkan createBMD fungsi

Kami membuat kelas kami fleksibel dengan memungkinkan untuk menerima DisplayObject apapun, tetapi kita benar-benar akan membutuhkan sebuah objek BitmapData untuk melakukan efek pergeseran RGB. Mari kita membuat sebuah fungsi yang dapat membuat BitmapData dari DisplayObject.

Tambahkan fungsi ini untuk kelas RGBShift Anda hanya di bawah konstruktor:


private function createBMD(dObj:DisplayObject):BitmapData {
	// create a new BitmapData object the size of our DisplayObject
	var bmd:BitmapData = new BitmapData(dObj.width, dObj.height,
										true, 0xFF000000);
	
	// draw the display object to the bitmap data
	bmd.draw(dObj);

	return bmd;
}

Lihatlah apa fungsi ini. Baris pertama menggunakan DisplayObject lebar dan tinggi untuk membuat objek BitmapData baru transparan ukuran yang sama sebagai DisplayObject. Selanjutnya, ia menarik DisplayObject untuk BitmapData. Akhirnya ia kembali BitmapData kepada pemanggil.

Langkah 5: Tambahkan createRGB fungsi

Berikut ini adalah dimana pemisahan warna aktual terjadi. Tambahkan fungsi ini untuk kelas Anda:


private function createRGB(dObj:DisplayObject):Array {
	 var bmd:BitmapData = createBMD(dObj); // create bitmapData from the display object
	
	// create a new bitmap data object for each color channel
	var r:BitmapData = new BitmapData(bmd.width, bmd.height, true, 0xFF000000);
	var g:BitmapData = new BitmapData(bmd.width, bmd.height, true, 0xFF000000);
	var b:BitmapData = new BitmapData(bmd.width, bmd.height, true, 0xFF000000);

	// copy the data from each channel into the corresponding bitmap data
	r.copyChannel(bmd, bmd.rect, new Point(),
					BitmapDataChannel.RED, BitmapDataChannel.RED);
	g.copyChannel(bmd, bmd.rect, new Point(),
					BitmapDataChannel.GREEN, BitmapDataChannel.GREEN);
	b.copyChannel(bmd, bmd.rect, new Point(),
					BitmapDataChannel.BLUE, BitmapDataChannel.BLUE);
	
	// return an array with the bitmap data for the 3 color channels
	return [r, g, b];
}

Fungsi ini juga menerima DisplayObject. Kemudian melewati bahwa ke fungsi createBMD() kita menulis di langkah sebelumnya, yang mengkonversi ke BitmapData. Selanjutnya kita membuat tiga baru BitmapData obyek transparan; satu untuk setiap warna. Kami membuat mereka ukuran sama persis sebagai sumber kami BitmapData (dari DisplayObject).

Kami kemudian menggunakan BitmapData's copyChannel() metode untuk menyalin saluran warna tunggal dari sumber BitmapData ke masing-masing dari tiga baru BitmapData objek.

Baris terakhir hanya kembali tiga objek BitmapData baru dibungkus dalam array.

Langkah 6: Menggunakan createRGB fungsi Constructor

Sekarang bahwa kita memiliki createBMD kami createRGB kelas dan bekerja bersama-sama, mari kita menempatkan mereka untuk digunakan. Menambahkan ini sebagai baris pertama dari kode dalam fungsi constructor untuk kelas RGBShift:

1
2	var rgbBMD:Array = createRGB(dObj);

Baris ini hanya melewati DisplayObject ke fungsi createRGB(). createRGB() menggunakan fungsi createBMD() untuk mengubahnya menjadi BitmapData dan kemudian memisahkannya ke tiga obyek BitmapData terpisah (satu untuk masing-masing saluran). Akhirnya ia kembali array dari tiga benda tersebut kepada kami rgbBMD lokal array. Masuk akal? Bagus.

Step 7: Membuat Bitmaps dari RGB saluran

Kami sekarang memiliki sebuah array dari tiga benda BitmapData. Kita perlu menciptakan Bitmap dari masing-masing untuk menampilkan mereka di layar. Tambahkan ini untuk loop ke fungsi constructor RGBShift tepat di bawah baris terakhir yang kami menambahkan:

Catatan Editor: Maaf untuk ketidaknyamanan orang-orang, menampilkan sedikit tertentu ActionScript perjalanan FireFox atas. Jangan ragu untuk men-download di sini.

Sebagian besar ini cukup sederhana. Mari kita lihat.

Dengan setiap objek BitmapData dalam array rgbBMD kami kami menciptakan Bitmap baru.
Kami menetapkan smoothing untuk benar sehingga kita dapat skala dan memutar tanpa itu mendapatkan pixelated. (garis 23)
Selanjutnya kami menciptakan sebuah wadah Sprite dan menambahkan Bitmap baru ke kontainernya tampilan daftar. (baris 25 & 26)
Sekarang kita akhirnya mulai menggunakan variabel yang _centerX dan _centerY. Kami menetapkan masing-masing pusat Bitmap dengan membagi lebar dan tinggi di setengah.
Kami menggunakan titik pusat ini untuk mengimbangi Bitmap dalam wadah Sprite, dan kemudian untuk mengimbangi wadah Sprite di panggung. Saya akan menjelaskan mengapa di langkah berikutnya.
Akhirnya kita menambahkan wadah Sprite ke panggung (ingat ada wadah untuk masing-masing saluran tiga warna kami).

Langkah 8: Mengapa menggunakan Sprite kontainer?

Anda dapat membuat efek ini tanpa wadah Sprite dengan hanya menambahkan Bitmaps langsung ke panggung. Saya suka untuk membungkus mereka dalam sebuah wadah karena itu membuatnya lebih mudah untuk mengontrol titik berubah ketika Anda melakukan hal-hal seperti skala dan memutar.

Biasanya, ketika Anda melakukan skala atau memutar pada objek itu berubah dari titik asal (0,0) dari objek. Itu adalah jarang apa yang saya inginkan terjadi. Biasanya aku ingin transformasi yang akan diterapkan dari pusat objek.

Perhatikan bahwa dalam bagian terakhir kita tetapkan x dan y bitmap untuk negatif satu setengah lebar dan tinggi. Ini menempatkan Bitmap sehingga titik pusat di 0,0 dalam wadah Sprite. Jika kita melakukan perubahan apapun pada wadah Sprite itu akan mengubah dari 0,0 wadah, yang sekarang pusat Bitmap kami.

Satu-satunya masalah adalah bahwa hanya sudut bawah Bitmap kami terlihat sekarang, jadi saya membuat wadah Sprite x dan y untuk setengah tinggi dan lebar Bitmap untuk mendapatkan semuanya kembali posisinya yang benar.

Langkah 9: RGBShift kelas

Di sini adalah kelas RGBShift sampai titik ini dalam kasus Anda tersesat sepanjang jalan:

Catatan Editor: saya lagi, sekali lagi Anda akan memiliki untuk men-download AS di sini. Maaf atas ketidaknyamanan.

Langkah 10: Membuat kelas dokumen utama

Jadi, kami memiliki kelas RGBShift kami, tapi bagaimana kita menggunakannya? Mulailah dengan membuat file Actionscript baru bernama Main.as, lalu tambahkan kode ini:


package {
	
	import flash.display.MovieClip;
	
	public class Main extends MovieClip {
	
		public function Main() {
			
			var rgb = new RGBShift(titleScreen); // create a new RGBShift from the titleScreen
			removeChild(titleScreen); // remove the original title screen from the stage
			
			// add it to the stage
			addChild(rgb);
			
		}
	}

}

Di sini kami menciptakan sebuah instance baru dari RGBShift kelas dan lewat itu titleScreen movieklip dari panggung. Kita tidak lagi perlu movieklip itu, jadi kita keluarkan dari panggung dan menambahkan contoh RGBShift baru sebagai gantinya.

Sekarang kita hanya perlu link kelas ini ke dokumen Flash kami. Kembali ke Flash dan set kelas dokumen 'Utama'.

Langkah 11: tes

Sekarang Anda dapat menguji file Flash (Control-> film Test) tanpa ada kesalahan atau peringatan.

Hmm, yang tidak tampak kurang tepat itu?

Apa yang terjadi di sini adalah kita telah berlapis tiga warna saluran di atas satu sama lain, tetapi mereka tidak menggabungkan dan pencampuran warna, sehingga kita hanya melihat lapisan atas (biru). Mari kita memperbaikinya sekarang.

Langkah 12: Mengubah modus campuran

Untuk mendapatkan saluran warna untuk berbaur dengan baik kita perlu mengubah BlendMode mereka ke layar. Kami hanya ingin mengubah modus campuran dari lapisan kedua dan ketiga meskipun. Kita akan meninggalkan lapisan (bottom) pertama normal dan campuran dua lapisan lain ke dalamnya.

Tambahkan kode ini ke untuk loop di RGBShift fungsi konstruktor kelas:


if(i>0) {
	// set SCREEN blend mode for the 2nd and 3rd images
	bmp.blendMode = BlendMode.SCREEN;
}

Ini akan memeriksa untuk memastikan gambar ini tidak gambar pertama (0) dan kemudian menetapkan properti blendMode ke layar.

Langkah 13: Uji lagi

Uji film Anda lagi dan Anda akan melihat sesuatu yang terlihat identik dengan titleScreen Anda movieklip.

Aku tahu apa yang Anda pikirkan; 'Itu banyak pekerjaan untuk menciptakan grafis sama yang sudah ada.'

Tapi sekarang grafis terdiri dari tiga benda yang kita dapat mengubah secara individual untuk menciptakan distorsi kami. Jadi berhenti merengek Anda dan mari kita lanjutkan...

Langkah 14: Download Perpustakaan Tweener

Kita akan menggunakan perpustakaan Tweener untuk melakukan animasi kami. Download di sini jika Anda belum memilikinya.

Untuk menggunakan Tweener, tempat folder utama 'caurina' dalam direktori yang sama seperti Flash file dan menambahkan pernyataan impor ini ke bagian atas kelas RGBShift:

1
2	import caurina.transitions.Tweener;

Langkah 15: Tambahkan randRange File

Saya menggunakan fungsi randRange ini sebagai cara mudah untuk menghasilkan bilangan acak bulat dalam jarak tertentu. Anda dapat menambahkan fungsi ini dengan kelas RGBShift, tapi saya menggunakan fungsi ini begitu sering bahwa saya ingin menyimpannya dalam sebuah file terpisah, jadi lebih mudah untuk berbagi di antara proyek-proyek yang berbeda.

Buat sebuah file baru Actionscript yang bernama 'randRange.as' dalam folder yang sama sebagai file Flash Anda utama. Tambahkan kode ini:


package {
	// returns a random number between specified range (inclusive)
	public function randRange(min:int, max:int):int {
	    var randomNum:int = Math.floor(Math.random() * (max - min + 1)) + min;
	    return randomNum;
	}
}

Seperti yang Anda lihat adalah hanya satu fungsi dibungkus dalam deklarasi paket. Kita sekarang dapat menggunakan fungsi ini seolah-olah itu adalah bagian dari kelas kami.

(Untuk informasi lebih lanjut tentang bagaimana fungsi ini bekerja, check out Carlos tips cepat.)

Langkah 16: Tambahkan distort() fungsi

Berikut adalah mana keajaiban terjadi. Tambahkan fungsi ini untuk kelas RGBShift:


private function distort(img:Sprite):void {
	Tweener.addTween(img, {
			y: randRange(_centerY-3, _centerY+3),	// randomize y shift
			time:randRange(1,2) /10, 		// randomize time
			alpha: randRange(8,10) /10,		// randomize alpha
			transition:"easeInOutSine",
			
			onComplete:distort, 			// when finished start the distortion again
			onCompleteParams:[img]
			}
	);
}

Kami akan menjalankan fungsi distort() ini pada masing-masing saluran warna kami secara terpisah untuk menciptakan efek distorsi.

Fungsi menerima sebuah Sprite (salah satu wadah channel warna kami). Itu kemudian mulai animasi Tweener pada saluran menggunakan nilai Y acak (antara -3 dan 3), dan panjang acak waktu (antara 1 dan 2 detik). Ini akan membuat setiap saluran pergeseran naik dan turun dengan jumlah yang berbeda pada kecepatan yang berbeda.

Perhatikan saya menggunakan variabel _centerY di sini lagi untuk mengimbangi nilai Y. Kami juga menghargai tween untuk alpha acak (antara.8 dan 1) untuk membuat setiap saluran yang berkedip sedikit. Ketika selesai tween kita menggunakan properti onComplete menelepon distort() fungsi yang sama lagi. Menggunakan onCompleteParams kami kirim channel warna yang sama Sprite. Hal ini menyebabkan fungsi distort untuk loop berulang pada masing-masing saluran warna kami.

Lihat, apa yang menurut saya memberitahu Anda...? Sihir!

Untuk kick off loop distorsi ini kita perlu menyebutnya sekali pada setiap saluran warna kami sprite. Tambahkan baris ini ke akhir untuk loop di fungsi constructor RGBShift:

1
2	distort(container); // start the bitmap distortion

Langkah 17: percobaan

Anda sekarang harus mampu menguji film Anda dan melihat efek distorsi dalam tindakan.

Secara pribadi, saya suka pergeseran Y halus yang kita miliki terjadi di sini, tapi Anda dapat melakukan banyak hal gila dengan distorsi sekarang bahwa kita punya saluran menghidupkan secara terpisah.

Untuk bereksperimen dengan distorsi Anda hanya dapat memodifikasi sifat dan nilai-nilai dalam Tweener memanggil fungsi distort. Periksa dokumentasi Tweener untuk daftar lengkap tweenable properti.

Berikut adalah contoh dari beberapa distorsi parah yang saya buat dengan hanya menambahkan beberapa properti yang lain untuk panggilan Tweener:

Memeriksa fungsi distort() yang menciptakan efek:


private function distort(img:Sprite):void {
	Tweener.addTween(img, {
			y: randRange(_centerY-3, _centerY+3), 	// ranomize y shift
			x: randRange(_centerX-10, _centerX+10),
			time:randRange(1,2) /10, 		// randomize time
			scaleX: randRange(9,11)/10,		// randimize x scale

			alpha: randRange(5,10) /10,		// randomize alpha
			transition:"easeInOutSine",
			
			onComplete:distort, 			// when finished start the distortion again
			onCompleteParams:[img]
			}
	);
}

Langkah 18: Meningkatkan tampilan CRT

Anda dapat berhenti di sini jika Anda ingin. RGB pemisahan dan distorsi harus bekerja pada saat ini.

Untuk meningkatkan efek CRT saya pikir kita perlu menambahkan beberapa elemen grafis yang lebih. Dalam beberapa langkah, kami akan menambahkan scan baris, bar hitam bergulir, beberapa statis dan refleksi mengkilap.

Langkah 19: Menambahkan garis pindai

Membuat movieklip baru di atas panggung yang disebut 'garis'. Dalam movieklip menggambar garis horizontal 1 piksel yang mencakup seluruh lebar film Anda. Mengatur warna stroke hitam dengan alpha 40%.

Sekarang salin dan sisipkan baris ini berulang-ulang, bergerak turun 2 piksel setiap kali, sampai Anda memiliki garis-garis yang meliputi ketinggian seluruh film Anda. Efek yang Anda inginkan adalah garis 1 piksel, maka 1 piksel spasi sebelum baris berikutnya.

Langkah 20: Tambahkan Bar bergulir

Sekarang kami akan menambahkan bar hitam bergulir. Membuat movieklip disebut 'bar baru'. Di dalam, menggambar persegi panjang hitam solid yang mencakup seluruh lebar film Anda. Membuat sekitar 40 pixel tinggi. Mengatur gaya warna movieklip untuk Alpha 30%.

Langkah 21: Menghidupkan Bar bergulir

Membuat movieklip baru yang disebut 'animatingBar' dan tempat bilah klip di dalam. Membuat gerak pendek tween animasi Bar bergerak dari atas film Anda ke bawah. Animasi ini akan loop untuk memberi kita bar efek bergulir.

Tempat klip animatingBar di atas panggung. Pilih dan tambahkan blur filter. Tautan X dan Y kabur pengaturan dan mengatur Y kabur ke 20 dan Blur X 0.

Mengatur modus campuran Overlay. Ini sama seperti modus campuran layar kami digunakan sebelumnya, tetapi tidak persis sama.

Step 22: Membuat gambar statis

Buat sebuah file baru Photoshop ukuran yang sama sebagai film Anda. Isi lapisan latar belakang dengan abu-abu netral (#808080). Pilih Filter > kebisingan > Tambahkan kebisingan...
Mengatur filter untuk 100%, Gaussian, Monochromatic.

Simpan gambar tersebut sebagai 'noise.jpg'. Jika Anda tidak memiliki Photoshop, Anda bisa mendapatkan saya 'noise.jpg' dari sumber file zip.

Langkah 23: Menghidupkan statis

Mengimpor gambar noise.jpg file flash Anda. Membuat movieklip baru yang disebut 'suara' dan menambahkan gambar itu. Buat keyframe baru pada bingkai 2 (F6) dan memutar gambar 180 derajat. Membuat keyframe lain pada frame 3 dan membalik gambar secara (Ubah > mengubah > Flip Horizontal). Buat keyframe keempat pada frame 4 dan memutar kembali gambar 180 derajat. Kami sekarang memiliki 4 frame animasi dari berkedip statis.

Anda juga dapat menghasilkan efek suara ini menggunakan ActionScript, tetapi itu berada di luar cakupan tutorial ini.

Langkah 24: Tambahkan refleksi

Membuat movieklip baru di atas panggung yang disebut 'Penyemiran'. Di dalamnya menggambar oval besar yang memanjang setengah di atas bagian atas film Anda. Pilih bagian atas oval dan menghapusnya.

Mengubah mengisi gradien linier dan mengaturnya sehingga itu campuran dari alpha 20% putih di bagian atas untuk alpha 5% putih di bagian bawah. Ambil bagian atas bentuk dan menarik itu sedikit untuk memberikan sedikit kurva.

Langkah 25: Memperbaiki Layering elemen

Jika Anda menguji film Anda sekarang Anda tidak akan melihat salah satu grafis baru kami baru saja menambahkan karena lapisan RGB sedang ditambahkan di atas segalanya. Untuk memperbaiki ini pergi ke kelas utama dan mengubah baris ini:

1
2	addChild(rgb);

Ini:

1
2	addChildAt(rgb, 0);

Menambah objek RGBShift di tingkat terendah dari tampilan daftar, di bawah semua grafik.

Kesimpulan

Tutorial ini dimaksudkan untuk menjadi tempat awal, bukan solusi akhir. Sekarang bahwa Anda memiliki RGB saluran dipisahkan dan menghidupkan individual ada banyak hal yang berbeda yang dapat Anda lakukan dengan teknik ini. Efek akan terlihat benar-benar baik jika digabungkan dengan teknik statis distorsi dari tutorial saya sebelumnya.

Seperti biasa, mengirim komentar dan biarkan aku tahu apa yang Anda pikirkan. Semoga sukses!