1 00:00:00,000 --> 00:00:05,069 2 00:00:05,069 --> 00:00:06,110 THOMAS LIVELY: Baiklah. 3 00:00:06,110 --> 00:00:07,450 Halo semuanya. 4 00:00:07,450 --> 00:00:08,690 Aku Thomas Lively. 5 00:00:08,690 --> 00:00:15,160 Seminar ini akan menjadi menulis game 2D di C menggunakan SDL. 6 00:00:15,160 --> 00:00:17,970 Jadi saya tahu Anda semua bertanya, yeah, aku benar-benar 7 00:00:17,970 --> 00:00:22,050 ingin bermain game dan membuat permainan, tapi apa bisnis SDL ini? 8 00:00:22,050 --> 00:00:25,320 Jadi SDL adalah library C. 9 00:00:25,320 --> 00:00:28,270 Ini adalah singkatan untuk Wikipedia DirectMedia Layer. 10 00:00:28,270 --> 00:00:31,340 Dan itu adalah lintas platform, perpustakaan pengembangan game. 11 00:00:31,340 --> 00:00:37,160 Ia bekerja pada Windows, Mac, Linux, bahkan iOS dan Android. 12 00:00:37,160 --> 00:00:40,380 Ini menangani hal-hal seperti akses ke sistem audio 13 00:00:40,380 --> 00:00:44,900 untuk komputer, keyboard, dan mouse, joystick, jika mereka terpasang. 14 00:00:44,900 --> 00:00:48,300 Pada ponsel, bahkan dapat melakukan menyentuh input dan semua itu. 15 00:00:48,300 --> 00:00:53,030 Dan tentu saja, itu menangani grafis, menggambar hal ke layar. 16 00:00:53,030 --> 00:00:56,470 >> Jadi itu sangat banyak digunakan, meskipun Anda mungkin tidak pernah mendengar hal itu sebelumnya. 17 00:00:56,470 --> 00:01:00,860 Ini dibangun ke dalam, misalnya, Mesin sumber Valve, 18 00:01:00,860 --> 00:01:04,970 yang kekuatan game seperti Portal dan Team Fortress 2. 19 00:01:04,970 --> 00:01:08,680 Ini juga dalam jumlah yang sangat besar game indie yang keluar, 20 00:01:08,680 --> 00:01:13,545 jadi saya bersemangat untuk melihat apa yang Anda semua akan membuat dengan itu. 21 00:01:13,545 --> 00:01:20,000 >> Tujuan seminar ini adalah untuk mendapatkan Anda ditetapkan menjadi berkembang dengan SDL. 22 00:01:20,000 --> 00:01:22,700 Kita akan belajar bagaimana untuk membuat jendela permainan. 23 00:01:22,700 --> 00:01:26,130 Kita akan membuat sprite, yang merupakan gambar dalam permainan Anda 24 00:01:26,130 --> 00:01:27,744 yang dapat bergerak di sekitar. 25 00:01:27,744 --> 00:01:29,910 Kita akan belajar bagaimana untuk menghidupkan dan sprite, 26 00:01:29,910 --> 00:01:32,910 sehingga memindahkan mereka sekitar, membuat mereka berubah dari waktu ke waktu. 27 00:01:32,910 --> 00:01:35,580 Dan kita akan belajar bagaimana untuk menangkap keyboard dan mouse 28 00:01:35,580 --> 00:01:38,240 masukan dari komputer. 29 00:01:38,240 --> 00:01:41,550 Apa yang kita tidak akan berbicara tentang hari ini adalah grafis 3D, 30 00:01:41,550 --> 00:01:45,520 karena itu adalah sangat rumit subjek yang kita tidak punya waktu untuk. 31 00:01:45,520 --> 00:01:49,010 Kami tidak akan belajar bagaimana bermain audio pada permainan kami. 32 00:01:49,010 --> 00:01:53,300 Dan kita tidak akan membangun untuk apa pun kecuali Linux. 33 00:01:53,300 --> 00:01:58,330 >> Sekarang peringatan ada itu, mudah-mudahan, pada akhir seminar, 34 00:01:58,330 --> 00:02:01,660 Anda akan merasa nyaman dengan dokumentasi SDL, 35 00:02:01,660 --> 00:02:05,370 sehingga Anda akan dapat pergi mencari tahu cara bermain audio untuk diri sendiri. 36 00:02:05,370 --> 00:02:12,150 Juga membangun untuk Mac atau PC harus bekerja persis sama dengan membangun untuk Linux, 37 00:02:12,150 --> 00:02:14,700 tapi setup akan sedikit berbeda. 38 00:02:14,700 --> 00:02:17,700 Jadi Anda harus dapat mencari cara untuk melakukan hal-hal 39 00:02:17,700 --> 00:02:20,900 pada akhir seminar hari ini. 40 00:02:20,900 --> 00:02:26,980 >> Jadi untuk mengatur, kita akan menggunakan mesin virtual. 41 00:02:26,980 --> 00:02:31,010 Kami akan menggunakan IDE CS50, karena kami hanya akan menulis di C. 42 00:02:31,010 --> 00:02:35,120 Tapi karena IDE tidak browser, kita tidak dapat membuat jendela baru atau tampilan 43 00:02:35,120 --> 00:02:36,410 grafis di dalamnya. 44 00:02:36,410 --> 00:02:38,450 Jadi kita perlu mesin virtual. 45 00:02:38,450 --> 00:02:47,790 Jadi Anda dapat mengikuti petunjuk di sini di manual.CS50.net/appliance/15 46 00:02:47,790 --> 00:02:53,290 untuk menginstal alat CS50 resmi, yang hanyalah virtual Linux 47 00:02:53,290 --> 00:02:55,110 mesin. 48 00:02:55,110 --> 00:02:58,090 >> Dan kemudian setelah Anda memiliki bahwa semua set up-- itu 49 00:02:58,090 --> 00:03:02,090 mungkin mengambil sedikit waktu, karena sebuah download-- sangat besar Anda akan 50 00:03:02,090 --> 00:03:07,060 untuk menjalankan di VM sudo apt-get pembaruan. 51 00:03:07,060 --> 00:03:09,410 Dan itu benar-benar akan untuk memperbarui semua perangkat lunak 52 00:03:09,410 --> 00:03:12,670 paket pada mesin virtual Anda. 53 00:03:12,670 --> 00:03:20,130 >> Setelah itu, Anda akan menjalankan sudo apt-get install, libsdl2-2.0-0, 54 00:03:20,130 --> 00:03:27,960 libsdl2-DBG, libsdl2-dev, dan tambahan libsdl2-gambar-2,0-0, 55 00:03:27,960 --> 00:03:32,560 libsdl2-gambar-DBG, dan libsdl2-gambar-dev. 56 00:03:32,560 --> 00:03:33,640 Jadi, apa yang dilakukan? 57 00:03:33,640 --> 00:03:38,440 Yang hanya menginstal debug informasi, dokumentasi, header, 58 00:03:38,440 --> 00:03:41,260 dan binari untuk dua perpustakaan. 59 00:03:41,260 --> 00:03:45,090 Teratur tua, SDL 2.0, dan perpustakaan lain 60 00:03:45,090 --> 00:03:50,110 disebut SDL Gambar, yang kita akan menggunakan 61 00:03:50,110 --> 00:03:54,560 untuk memuat file gambar ke dalam permainan kami. 62 00:03:54,560 --> 00:03:57,860 >> Jadi setelah Anda memiliki yang juga itu, hanya ketika bertanya, 63 00:03:57,860 --> 00:04:01,100 Anda cukup ketik ya, tekan Enter menginstal paket tersebut, 64 00:04:01,100 --> 00:04:04,430 dan kemudian Anda harus baik untuk pergi. 65 00:04:04,430 --> 00:04:14,800 Jadi untuk mendapatkan kode distribusi, Anda can-- oh sayang, ini tidak diperbarui. 66 00:04:14,800 --> 00:04:18,480 Kecuali Anda memiliki account-- GitHub jika Anda memiliki akun GitHub, 67 00:04:18,480 --> 00:04:24,450 Anda dapat melakukan Git ini perintah clone ke repo 68 00:04:24,450 --> 00:04:30,490 dan yang akan men-download Git repo dengan semua kode di dalamnya, 69 00:04:30,490 --> 00:04:31,700 sehingga Anda akan memiliki kode. 70 00:04:31,700 --> 00:04:36,470 >> Jika Anda tidak memiliki GitHub akun, apa yang harus Anda lakukan adalah jenis 71 00:04:36,470 --> 00:04:48,867 wgithttps: //github.com/tlively/sdl seminar-- dan di sini itu different-- 72 00:04:48,867 --> 00:04:49,700 /archive/master.zip. 73 00:04:49,700 --> 00:04:55,610 74 00:04:55,610 --> 00:04:59,220 Jadi sekali lagi, itu sama persis URL, kecuali itu akan menjadi 75 00:04:59,220 --> 00:05:09,010 tlively / SDL_seminar / master.zip dan Anda menggunakan wgit untuk men-download itu. 76 00:05:09,010 --> 00:05:12,940 Dan kemudian Anda bisa hanya unzip arsip yang 77 00:05:12,940 --> 00:05:14,900 dan kemudian Anda akan memiliki semua kode sumber. 78 00:05:14,900 --> 00:05:17,580 Jadi maaf tentang itu. 79 00:05:17,580 --> 00:05:23,880 Dan kemudian kode tersebut juga akan diselenggarakan di Halaman web seminar CS50 di beberapa 80 00:05:23,880 --> 00:05:25,230 hari. 81 00:05:25,230 --> 00:05:26,590 >> Baiklah. 82 00:05:26,590 --> 00:05:29,932 Jadi bagaimana kita memulai menulis permainan kami sendiri? 83 00:05:29,932 --> 00:05:31,890 Nah, hal pertama kita akan ingin melakukan 84 00:05:31,890 --> 00:05:34,740 adalah melihat dokumentasi SDL. 85 00:05:34,740 --> 00:05:37,020 Jadi, inilah VM. 86 00:05:37,020 --> 00:05:38,720 Dan inilah halaman web. 87 00:05:38,720 --> 00:05:40,340 Aku sudah navigasikan hidup libsdl.org. 88 00:05:40,340 --> 00:05:43,110 89 00:05:43,110 --> 00:05:48,140 Apa yang akan saya lakukan di sini adalah pergi untuk sidebar, di bawah dokumentasi, 90 00:05:48,140 --> 00:05:51,040 dan klik di wiki. 91 00:05:51,040 --> 00:05:56,870 Ini akan membawa saya ke wiki yang memiliki sebagian besar dokumentasi untuk SDL. 92 00:05:56,870 --> 00:06:01,360 Selama di sidebar di sini, kami akan klik API berdasarkan kategori, 93 00:06:01,360 --> 00:06:04,300 karena akan memberikan kita pandangan kategoris bagus 94 00:06:04,300 --> 00:06:07,770 dari seluruh API untuk SDL. 95 00:06:07,770 --> 00:06:12,390 >> Jadi misalnya, kita memiliki inisialisasi dasar 96 00:06:12,390 --> 00:06:18,380 dan ditutup, semua jenis hal administrasi untuk menggunakan SDL, 97 00:06:18,380 --> 00:06:21,630 dan kemudian kita memiliki bagian untuk menampilkan hal-hal ke layar. 98 00:06:21,630 --> 00:06:23,000 Itu video. 99 00:06:23,000 --> 00:06:25,790 Peristiwa masukan, itu mendapatkan input dari keyboard, 100 00:06:25,790 --> 00:06:29,710 mendapatkan masukan dari mouse, dan joystick, jika Anda memiliki bahkan. 101 00:06:29,710 --> 00:06:32,901 Ada umpan balik kekuatan untuk hal-hal seperti pengendali permainan, yang 102 00:06:32,901 --> 00:06:34,150 kita tidak akan berbicara tentang. 103 00:06:34,150 --> 00:06:35,630 Dan inilah audio. 104 00:06:35,630 --> 00:06:38,940 Dan kemudian ada sekelompok lainnya hal-hal yang SDL dapat lakukan untuk Anda. 105 00:06:38,940 --> 00:06:43,830 >> Tapi hari ini kita akan fokus pada inisialisasi di sini, 106 00:06:43,830 --> 00:06:48,332 menampilkan gambar dalam video bagian, dan penanganan peristiwa input. 107 00:06:48,332 --> 00:06:50,290 Jadi ini adalah utama bagian dokumentasi 108 00:06:50,290 --> 00:06:53,050 Anda harus khawatir tentang. 109 00:06:53,050 --> 00:06:57,170 Hanya untuk bersenang-senang, jika kita pergi di sini dan klik pada API dengan nama, 110 00:06:57,170 --> 00:07:04,350 kita bisa melihat daftar setiap hal di perpustakaan SDL. 111 00:07:04,350 --> 00:07:11,330 Jadi semua fungsi-fungsi ini, mantri, struktur, jumlah gila barang, 112 00:07:11,330 --> 00:07:12,820 Sesuai abjad. 113 00:07:12,820 --> 00:07:14,580 Dan jelas, sampai Anda tahu bahwa Anda lakukan, 114 00:07:14,580 --> 00:07:19,100 ini tidak akan terlalu membantu, itulah sebabnya mengapa kita lakukan API berdasarkan kategori. 115 00:07:19,100 --> 00:07:20,810 >> Jadi mari kita mulai. 116 00:07:20,810 --> 00:07:25,680 Mudah-mudahan Anda sudah sudah download kode distribusi. 117 00:07:25,680 --> 00:07:30,070 Dan apa yang dapat Anda lakukan adalah, tepat di sini di alat CS50, 118 00:07:30,070 --> 00:07:31,150 cukup membuka terminal. 119 00:07:31,150 --> 00:07:33,750 120 00:07:33,750 --> 00:07:34,440 Kita mulai. 121 00:07:34,440 --> 00:07:40,740 Jadi saya sudah download Kode distribusi menggunakan .zip yang 122 00:07:40,740 --> 00:07:41,690 metode. 123 00:07:41,690 --> 00:07:43,140 Dan aku sudah membuka ritsleting itu. 124 00:07:43,140 --> 00:07:46,120 Jadi di sini adalah dalam master seminar SDL. 125 00:07:46,120 --> 00:07:49,750 Jadi saya akan pergi ke direktori tersebut. 126 00:07:49,750 --> 00:07:55,310 Dan apa yang kita lihat di sini adalah bahwa kita memiliki tujuh file C. 127 00:07:55,310 --> 00:07:58,070 Dan ini akan kode kita akan melihat hari ini. 128 00:07:58,070 --> 00:08:00,040 Kami memiliki makefile. 129 00:08:00,040 --> 00:08:06,950 Dan kami memiliki direktori sumber, yang hanya memiliki gambar 130 00:08:06,950 --> 00:08:09,070 Anda akan melihat segera. 131 00:08:09,070 --> 00:08:16,060 >> Jadi mari kita membuka file-file ini menggunakan G-Sunting Editor. 132 00:08:16,060 --> 00:08:22,000 Jadi saya ingin membuka semua file yang dimulai dengan halo dan diakhiri dengan c. 133 00:08:22,000 --> 00:08:23,380 Kita mulai. 134 00:08:23,380 --> 00:08:28,180 Jadi itu sebuah jendela kecil, jadi kita akan mencoba untuk membuat yang lebih besar. 135 00:08:28,180 --> 00:08:28,900 Tidak, itu pergi. 136 00:08:28,900 --> 00:08:32,836 137 00:08:32,836 --> 00:08:34,570 >> Baiklah. 138 00:08:34,570 --> 00:08:37,959 Jadi, inilah yang pertama File kita akan melihat. 139 00:08:37,959 --> 00:08:39,000 Ini disebut hello1_sdl.c. 140 00:08:39,000 --> 00:08:41,890 141 00:08:41,890 --> 00:08:47,980 Dan semua ini dilakukan adalah menginisialisasi SDL perpustakaan sehingga kita dapat mulai menggunakannya. 142 00:08:47,980 --> 00:08:51,550 Bagaimana Anda tahu untuk datang dengan kode ini sendiri? 143 00:08:51,550 --> 00:08:53,850 Nah, jika kita melihat lebih dokumentasi 144 00:08:53,850 --> 00:08:58,040 dan kami pergi ke inisialisasi dan menutup bagian, 145 00:08:58,040 --> 00:09:02,230 itu akan memberitahu kita semua tentang bagaimana untuk menginisialisasi SDL. 146 00:09:02,230 --> 00:09:06,630 Jadi pasti membaca ini beberapa waktu yang lain. 147 00:09:06,630 --> 00:09:09,230 Ini akan memberitahu Anda semua tentang apa yang terjadi di sini. 148 00:09:09,230 --> 00:09:14,360 Tapi inti utama masalah ini adalah bahwa kita perlu memanggil fungsi SDL ini Dalam Ini 149 00:09:14,360 --> 00:09:18,910 dan menyebarkannya apa hal-hal kami ingin perpustakaan untuk menginisialisasi. 150 00:09:18,910 --> 00:09:23,620 Jadi dalam kasus kami, kami hanya akan untuk menginisialisasi video untuk saat ini, 151 00:09:23,620 --> 00:09:26,690 sehingga kita dapat mulai menampilkan gambar. 152 00:09:26,690 --> 00:09:32,370 >> Di sini, Anda dapat melihat apakah kita klik SDL sebuah Dalam Ini, kita 153 00:09:32,370 --> 00:09:36,160 bisa mendapatkan lebih banyak informasi, termasuk nilai kembali. 154 00:09:36,160 --> 00:09:39,050 Jadi kita lihat di sini bahwa returnes nol pada keberhasilan. 155 00:09:39,050 --> 00:09:43,320 Jadi dalam kode kita, kita akan melihat apakah itu tidak kembali nol, 156 00:09:43,320 --> 00:09:47,020 dan jika tidak kembali nol, sehingga tidak berhasil, 157 00:09:47,020 --> 00:09:50,650 maka kita akan hanya cetak kesalahan dengan menggunakan fungsi lain ini, 158 00:09:50,650 --> 00:09:56,260 SDL mendapatkan kesalahan, yang mengembalikan string menggambarkan kesalahan yang terjadi. 159 00:09:56,260 --> 00:09:58,510 Kita akan mencetak bahwa kesalahan dan kemudian kami hanya 160 00:09:58,510 --> 00:10:02,270 akan keluar dari program dengan kode kesalahan. 161 00:10:02,270 --> 00:10:06,470 >> Kemudian hal lain yang kita butuhkan lakukan adalah, sebelum keluar program, 162 00:10:06,470 --> 00:10:10,830 jika kita berhasil diinisialisasi SDL, kita hanya perlu menyebutnya SDL berhenti. 163 00:10:10,830 --> 00:10:15,750 Dan itu akan menangani membersihkan semua sumber daya SDL internal bagi kita dari. 164 00:10:15,750 --> 00:10:21,240 Jadi dokumentasi there-- lagi, di sini kita berada di inisialisasi 165 00:10:21,240 --> 00:10:23,640 dan menutup bagian dokumentasi. 166 00:10:23,640 --> 00:10:26,680 Anda bisa klik pada Fungsi sini, SDL berhenti, 167 00:10:26,680 --> 00:10:28,700 dan Anda dapat membaca semua tentang hal itu juga. 168 00:10:28,700 --> 00:10:31,400 Dan banyak fungsi ini halaman dokumentasi 169 00:10:31,400 --> 00:10:35,630 memiliki kode contoh, jadi ini adalah sumber daya yang sangat baik. 170 00:10:35,630 --> 00:10:39,610 Pasti menghabiskan beberapa waktu membaca bagian dari wiki ini 171 00:10:39,610 --> 00:10:42,520 jika Anda akan melakukan ini untuk sebuah proyek. 172 00:10:42,520 --> 00:10:43,760 >> Baiklah. 173 00:10:43,760 --> 00:10:46,590 Jadi itulah seluruh program kami. 174 00:10:46,590 --> 00:10:53,935 Apa yang bisa kita lakukan sekarang is-- aku akan membuka makefile di sini, 175 00:10:53,935 --> 00:10:56,150 jadi saya akan mengambil melihat bagaimana yang bekerja. 176 00:10:56,150 --> 00:10:59,500 Dan itu adalah makefile yang sangat sederhana, mirip dengan apa yang telah Anda lihat sebelumnya. 177 00:10:59,500 --> 00:11:04,010 Salah satu perbedaan utama adalah bahwa, di sini, ini 178 00:11:04,010 --> 00:11:07,870 akan memasukkan hasil running perintah ini, yang Anda sudah sudah 179 00:11:07,870 --> 00:11:10,850 diinstal jika Anda telah menginstal SDL. 180 00:11:10,850 --> 00:11:13,230 Dan ini adalah perintah yang akan menghasilkan 181 00:11:13,230 --> 00:11:16,710 beberapa bendera tambahan untuk compiler. 182 00:11:16,710 --> 00:11:22,050 >> Selain itu, kami memberikan semua perintah biasa, serta 183 00:11:22,050 --> 00:11:23,430 kedua perintah. 184 00:11:23,430 --> 00:11:30,270 Jadi pegangan -lsdl2-gambar menghubungkan di perpustakaan gambar SDL. 185 00:11:30,270 --> 00:11:36,200 Dan lm benar-benar menangani menghubungkan di C perpustakaan matematika standar. 186 00:11:36,200 --> 00:11:40,630 Jadi kita tidak akan membutuhkan mereka untuk semua file C kami, 187 00:11:40,630 --> 00:11:43,900 tapi kita hanya menempatkan mereka dalam sehingga kita bisa menggunakan makefile yang sama untuk semuanya 188 00:11:43,900 --> 00:11:44,816 tanpa modifikasi. 189 00:11:44,816 --> 00:11:46,970 190 00:11:46,970 --> 00:11:50,080 >> Di sini di sumber, ini adalah di mana Anda akan 191 00:11:50,080 --> 00:11:53,680 menempatkan file yang Anda akan untuk mengkompilasi untuk proyek Anda. 192 00:11:53,680 --> 00:11:57,570 Tapi karena setiap satu dari C saya file di sini memiliki fungsi utama, 193 00:11:57,570 --> 00:12:00,000 itu akan bingung jika kita menempatkan mereka semua di. 194 00:12:00,000 --> 00:12:06,930 Jadi aku akan hanya mengatakan, untuk saat ini, hello1_sdl.c, 195 00:12:06,930 --> 00:12:11,150 yang merupakan salah satu yang kita hanya melihat. 196 00:12:11,150 --> 00:12:18,740 Jadi jika aku kembali lebih di sini, saya bisa lakukan membuat. 197 00:12:18,740 --> 00:12:22,160 Dan apa itu itu hanya dikompilasi file pertama. 198 00:12:22,160 --> 00:12:28,780 Dan kemudian kita dapat mengetik ./game, karena itu adalah executable yang dihasilkan. 199 00:12:28,780 --> 00:12:31,660 Dan semua itu adalah cetak inisialisasi sukses. 200 00:12:31,660 --> 00:12:33,300 Jadi kami melakukan sesuatu yang benar. 201 00:12:33,300 --> 00:12:36,200 Tapi itu jenis membosankan, karena kita tidak melihat jendela, 202 00:12:36,200 --> 00:12:37,900 tidak ada yang bergerak di sekitar. 203 00:12:37,900 --> 00:12:41,030 >> Begitu besar, kami mendapat SDL diinisialisasi. 204 00:12:41,030 --> 00:12:43,520 Sekarang, mari kita beralih ke sesuatu sedikit lebih menarik. 205 00:12:43,520 --> 00:12:54,700 Jadi di sini kita memiliki hello2_window.c, dan ini akan menjadi sedikit lebih 206 00:12:54,700 --> 00:13:00,010 Program C kompleks yang menginisialisasi SDL seperti sebelumnya, 207 00:13:00,010 --> 00:13:04,250 kecuali sekarang kita juga akan menginisialisasi SDL waktu. 208 00:13:04,250 --> 00:13:07,720 Dan ini akan membiarkan kita mengakses timer internal 209 00:13:07,720 --> 00:13:10,550 dan fungsi penggunaan yang berkaitan dengan waktu. 210 00:13:10,550 --> 00:13:11,920 >> Dan kemudian mari kita lihat di sini. 211 00:13:11,920 --> 00:13:16,840 Apa yang kita lakukan adalah kita memiliki pointer ini untuk jendela struct SDL, yang 212 00:13:16,840 --> 00:13:21,160 akan dibuat oleh panggilan ini ke fungsi, SDL membuat jendela. 213 00:13:21,160 --> 00:13:25,380 Sekarang, ini membutuhkan banyak argumen, jadi mari kita pergi melihat dokumentasi. 214 00:13:25,380 --> 00:13:27,930 Jadi sekali lagi, aku akan API berdasarkan kategori, aku 215 00:13:27,930 --> 00:13:33,820 turun ke video di sini, dan yang pertama Bagian, menampilkan manajemen jendela. 216 00:13:33,820 --> 00:13:36,470 Jadi bagian ini memiliki satu ton barang di dalamnya, 217 00:13:36,470 --> 00:13:39,970 tetapi jika Anda melihat melalui fungsi-fungsi ini, Anda akan 218 00:13:39,970 --> 00:13:43,620 melihat bahwa mungkin yang kita ingin disebut SDL membuat jendela, 219 00:13:43,620 --> 00:13:46,600 yang kebetulan tepat di atas. 220 00:13:46,600 --> 00:13:49,080 >> Dan jadi ini adalah dokumentasi untuk fungsi ini. 221 00:13:49,080 --> 00:13:53,710 Jendela akan memiliki judul, x dan y posisi pada layar, 222 00:13:53,710 --> 00:13:56,960 itu akan memiliki lebar, ketinggian, dan kemudian itu akan mengambil beberapa bendera. 223 00:13:56,960 --> 00:14:01,220 Sekarang, kita tidak benar-benar peduli setiap bendera ini sekarang, 224 00:14:01,220 --> 00:14:04,560 tetapi jika Anda ingin melakukan sesuatu seperti membuat jendela layar penuh, 225 00:14:04,560 --> 00:14:07,920 Anda bisa melihat pada saat itu. 226 00:14:07,920 --> 00:14:13,190 Untuk saat ini, kami hanya akan menggunakan nilai-nilai khusus, 227 00:14:13,190 --> 00:14:18,775 Jendela SDL ditambah berpusat untuk x dan y dalam rangka 228 00:14:18,775 --> 00:14:21,800 hanya membuat jendela di tengah layar kami. 229 00:14:21,800 --> 00:14:24,370 >> Jadi itulah yang yang melakukan. 230 00:14:24,370 --> 00:14:27,960 Dan jika jendela kebetulan null, berarti ada kesalahan, 231 00:14:27,960 --> 00:14:32,570 sekali lagi kami hanya akan mencetak kesalahan menggunakan SDL get error. 232 00:14:32,570 --> 00:14:36,570 Dan kemudian karena kita diinisialisasi SDL, kita sekarang perlu untuk menutupnya. 233 00:14:36,570 --> 00:14:40,900 Jadi kita sebut SDL berhenti sebelum kembali satu untuk utama. 234 00:14:40,900 --> 00:14:42,905 >> Jadi kita memiliki jendela ini terbuka penuh harap. 235 00:14:42,905 --> 00:14:44,613 Dan apa yang kita akan lakukan adalah kita akan 236 00:14:44,613 --> 00:14:50,340 untuk memanggil SDL untuk 5.000 milidetik, yang sama seperti lima detik. 237 00:14:50,340 --> 00:14:55,640 Dan ketika kita sudah selesai dengan itu, itu akan menghancurkan jendela, 238 00:14:55,640 --> 00:14:59,470 membersihkan perpustakaan SDL, dan keluar dari program. 239 00:14:59,470 --> 00:15:05,240 Jadi mari kita pergi ke depan dan memberikan yang tembakan. 240 00:15:05,240 --> 00:15:08,660 >> Jadi sekarang bukan mengubah makefile setiap kali, 241 00:15:08,660 --> 00:15:12,180 Aku bisa hanya melakukan membuat, dan kemudian pada baris perintah, 242 00:15:12,180 --> 00:15:16,090 mengatakan sumber equals dan kemudian file kita kompilasi. 243 00:15:16,090 --> 00:15:17,090 Jadi itu hello2_window.c. 244 00:15:17,090 --> 00:15:21,390 245 00:15:21,390 --> 00:15:21,890 Fantastis. 246 00:15:21,890 --> 00:15:22,970 Tidak ada erros. 247 00:15:22,970 --> 00:15:26,085 Sekarang, jika kita menjalankan executable kami, kita melihat jendela ini. 248 00:15:26,085 --> 00:15:27,960 Sekarang ada beberapa masalah dengan jendela. 249 00:15:27,960 --> 00:15:32,820 Kita bisa bergerak di sekitar, tetapi memiliki latar belakang ini sampah di dalamnya. 250 00:15:32,820 --> 00:15:34,660 Jadi kami belum ditarik apa-apa, dan jadi 251 00:15:34,660 --> 00:15:38,210 hanya penuh dengan sampah, yang cukup banyak apa yang kita harapkan. 252 00:15:38,210 --> 00:15:41,010 >> Selain itu, kami tidak bisa menutup jendela. 253 00:15:41,010 --> 00:15:44,780 Aku menekan X ini di sudut dan tidak ada yang terjadi. 254 00:15:44,780 --> 00:15:47,840 Jadi kita akan melihat bagaimana untuk memperbaiki bahwa dalam sedikit. 255 00:15:47,840 --> 00:15:51,750 Jadi mari kita memperbaiki bagian mana jendela penuh sampah pertama. 256 00:15:51,750 --> 00:16:00,850 Jadi jika kita pergi ke hello3_image.c, apa kita dapat melihat bahwa kita adalah telah menambahkan beberapa 257 00:16:00,850 --> 00:16:03,360 lebih banyak hal di sini. 258 00:16:03,360 --> 00:16:08,740 Kami telah menambahkan header baru ini mengajukan untuk mendapatkan fungsi waktu. 259 00:16:08,740 --> 00:16:11,490 Saya kira kita melakukan itu di terakhir satu, juga, dan saya tidak menyebutkan itu. 260 00:16:11,490 --> 00:16:13,550 Tapi sekarang karena kita bekerja dengan gambar, 261 00:16:13,550 --> 00:16:18,720 kita perlu menyertakan SDL image file header juga. 262 00:16:18,720 --> 00:16:22,087 Jadi itu adalah hal yang sama seperti sebelumnya, menginisialisasi SDL sini, 263 00:16:22,087 --> 00:16:23,420 kesepakatan yang sama dengan menciptakan jendela. 264 00:16:23,420 --> 00:16:25,380 Kami telah melihat bahwa sebelum sekarang. 265 00:16:25,380 --> 00:16:29,870 >> Sekarang kita perlu membuat sesuatu yang disebut penyaji, yang semacam sejalan 266 00:16:29,870 --> 00:16:30,800 dengan jendela. 267 00:16:30,800 --> 00:16:33,860 Tapi itu semacam objek abstrak yang 268 00:16:33,860 --> 00:16:37,370 jawab melakukan semua ini menggambar operasi ke jendela. 269 00:16:37,370 --> 00:16:41,580 Dan itu benar-benar sesuai untuk program dimuat 270 00:16:41,580 --> 00:16:47,880 ke dalam hardware grafis di Anda komputer atau ponsel Anda atau apa pun. 271 00:16:47,880 --> 00:16:51,005 Jadi bendera kita ingin lulus itu-- dan Anda dapat melihat dokumentasi 272 00:16:51,005 --> 00:16:56,160 untuk mendapatkan lebih rinci di sini-akan untuk SDL render dipercepat, yang 273 00:16:56,160 --> 00:16:58,550 berarti itu akan menjadi menggunakan hardware grafis 274 00:16:58,550 --> 00:17:01,490 dan bukan hanya ditiru dalam perangkat lunak. 275 00:17:01,490 --> 00:17:07,390 >> Dan kita akan menggunakan SDL Renderer PRESENTVSYNC. 276 00:17:07,390 --> 00:17:12,280 VSYNC adalah hal yang hanya membuat grafis Anda terlihat lebih baik dan mencegah 277 00:17:12,280 --> 00:17:14,970 hal yang disebut layar ini teror, di mana setengah 278 00:17:14,970 --> 00:17:17,720 dari satu frame dan setengah dari depan bingkai mendapatkan ditarik pada saat yang sama 279 00:17:17,720 --> 00:17:20,056 dan itu tampak mengerikan. 280 00:17:20,056 --> 00:17:23,130 Tapi sekali lagi, Anda dapat pergi membaca tentang itu sendiri. 281 00:17:23,130 --> 00:17:24,319 >> Jadi kita memiliki beberapa bendera di sini. 282 00:17:24,319 --> 00:17:27,810 Dan jadi kita hanya akan memanggil fungsi SDL ini membuat penyaji. 283 00:17:27,810 --> 00:17:31,340 Kami akan memberikan jendela kaitkan dengan penyaji itu. 284 00:17:31,340 --> 00:17:34,520 Satu negatif berarti kita tidak peduli apa driver grafis kita akan menggunakan. 285 00:17:34,520 --> 00:17:36,603 Sehingga harus cukup banyak selalu menjadi salah satu negatif, 286 00:17:36,603 --> 00:17:39,010 kecuali Anda tahu tentang driver grafis. 287 00:17:39,010 --> 00:17:41,650 Dan kemudian kita hanya akan lulus bendera kami. 288 00:17:41,650 --> 00:17:47,240 Jadi jika yang mengembalikan null, maka kami akan mencetak kesalahan seperti biasa, 289 00:17:47,240 --> 00:17:49,550 tapi kemudian kita juga akan untuk menghancurkan jendela 290 00:17:49,550 --> 00:17:54,970 untuk membersihkan sumber daya sebelum memanggil SDL berhenti dan kembali. 291 00:17:54,970 --> 00:17:58,110 >> Sekarang, bagian yang menarik di sini adalah di mana kita memuat gambar kami 292 00:17:58,110 --> 00:18:00,870 menggunakan fungsi IMG_load ini. 293 00:18:00,870 --> 00:18:04,050 Ini adalah satu-satunya fungsi kita akan menggunakan dari perpustakaan gambar SDL. 294 00:18:04,050 --> 00:18:05,480 Ini adalah satu-satunya yang kita butuhkan. 295 00:18:05,480 --> 00:18:12,950 Ini adalah fungsi yang mengambil string itu adalah jalan dari setiap sumber daya gambar. 296 00:18:12,950 --> 00:18:18,024 Dan dapat png, GIF sebuah, bitmap, hal-hal ini. 297 00:18:18,024 --> 00:18:19,690 Dan itulah mengapa fungsi ini sangat bagus. 298 00:18:19,690 --> 00:18:22,560 Ia bisa menangani cukup banyak format apapun. 299 00:18:22,560 --> 00:18:27,240 Beban ke dalam memori dan menyimpannya sebagai hal yang disebut permukaan SDL. 300 00:18:27,240 --> 00:18:34,660 >> Sekarang permukaan SDL hanyalah struct yang mewakili data gambar dalam memori. 301 00:18:34,660 --> 00:18:38,054 Sehingga Anda dapat membaca lebih lanjut tentang bahwa dalam dokumentasi dua. 302 00:18:38,054 --> 00:18:40,720 Dan jika kesalahan ini, maka kita akan melakukan semuanya di mana 303 00:18:40,720 --> 00:18:44,480 kami mencetak kesalahan, menutup kami sumber daya, dan kemudian keluar dari program. 304 00:18:44,480 --> 00:18:48,970 Sekarang hal yang menarik adalah, sebelum kita dapat menarik gambar ini ke jendela, 305 00:18:48,970 --> 00:18:51,390 kita harus benar-benar membuatnya tekstur. 306 00:18:51,390 --> 00:18:54,460 Sekarang berkoresponden tekstur untuk data gambar dimuat 307 00:18:54,460 --> 00:18:57,820 ke dalam memori grafis ini perangkat keras. 308 00:18:57,820 --> 00:19:00,720 >> Jadi permukaan dalam utama memori, memori biasa 309 00:19:00,720 --> 00:19:05,550 bahwa kita telah menggunakan semua semester, dan tekstur dalam VRAM terpisah ini 310 00:19:05,550 --> 00:19:09,410 memori yang kontrol kartu grafis. 311 00:19:09,410 --> 00:19:13,170 Jadi kita sebut fungsi ini SDL_CreateTextureFromSurface. 312 00:19:13,170 --> 00:19:17,104 Kami memberikan penyaji dan permukaan kami. 313 00:19:17,104 --> 00:19:19,020 Dan kemudian kita benar-benar dilakukan dengan permukaan, 314 00:19:19,020 --> 00:19:20,311 jadi kita hanya akan membebaskan itu. 315 00:19:20,311 --> 00:19:22,210 Kita tidak perlu lagi. 316 00:19:22,210 --> 00:19:26,650 Dan kemudian jadi jika panggilan ini errored dan kembali nol, 317 00:19:26,650 --> 00:19:29,630 maka kita akan melakukan keseluruhan melaporkan hal lagi kesalahan. 318 00:19:29,630 --> 00:19:30,920 >> Baiklah. 319 00:19:30,920 --> 00:19:34,810 Di sini, kita masuk ke beberapa fungsi render yang sebenarnya. 320 00:19:34,810 --> 00:19:37,730 Jadi memanggil SDL_RenderClear dan lewat 321 00:19:37,730 --> 00:19:42,550 renderer yang terkait dengan jendela kita hanya membuat jendela pergi hitam. 322 00:19:42,550 --> 00:19:47,650 Sehingga menghilangkan bahwa sampah yang kita lihat dalam jendela kita sebelum dan membuatnya hitam. 323 00:19:47,650 --> 00:19:50,750 Dan kemudian kita akan untuk memanggil SDL_RenderCopy, 324 00:19:50,750 --> 00:19:53,010 memberikan penyaji kami, tekstur kami. 325 00:19:53,010 --> 00:19:55,800 Dan kita akan berbicara tentang apa bidang ini dalam sedikit. 326 00:19:55,800 --> 00:19:57,830 Tapi itu akan mengambil data tekstur 327 00:19:57,830 --> 00:20:03,100 dan menyalinnya ke kami window untuk menggambar gambar. 328 00:20:03,100 --> 00:20:07,020 Jadi setelah kami sudah melakukan copy ini data ke jendela kita, 329 00:20:07,020 --> 00:20:11,180 kita harus melakukan fungsi tambahan ini disebut SDL_RenderPresent. 330 00:20:11,180 --> 00:20:15,360 >> Dan ini menarik karena ini mendapat 331 00:20:15,360 --> 00:20:18,770 menjadi topik yang disebut double buffering. 332 00:20:18,770 --> 00:20:24,380 Jadi double buffering adalah teknik yang membuat grafis Anda terlihat jauh lebih baik. 333 00:20:24,380 --> 00:20:28,240 Sekali lagi, mencegah yang robek layar Aku sedang berbicara tentang sebelumnya, di mana 334 00:20:28,240 --> 00:20:29,590 Anda memiliki dua buffer. 335 00:20:29,590 --> 00:20:32,260 Ada buffer kembali memori dan buffer depan. 336 00:20:32,260 --> 00:20:36,410 Depan penyangga secara harfiah apa yang ada di layar Anda saat ini. 337 00:20:36,410 --> 00:20:42,070 Jadi kita melakukan semua ini menarik variasi, seperti SDL membuat salinan atau SDL_RenderClear 338 00:20:42,070 --> 00:20:43,080 untuk buffer kembali. 339 00:20:43,080 --> 00:20:44,800 Jadi mereka memodifikasi hal-hal dalam buffer kembali. 340 00:20:44,800 --> 00:20:48,970 Di sini kita bisa menggambar ini hijau persegi untuk buffer kembali. 341 00:20:48,970 --> 00:20:52,300 >> Jadi ketika kita sudah selesai melakukan membuat operasi kami, yang 342 00:20:52,300 --> 00:20:55,700 mungkin mengambil sangat panjang waktu, apa yang akan kita lakukan 343 00:20:55,700 --> 00:20:57,860 adalah mengganti buffer. 344 00:20:57,860 --> 00:21:00,720 Sehingga benar-benar hanya mengambil penyangga depan dan buffer kembali 345 00:21:00,720 --> 00:21:02,990 dan switch mereka, sehingga itu, seketika, 346 00:21:02,990 --> 00:21:06,630 dalam satu operasi, bukannya mungkin ratusan atau ribuan, 347 00:21:06,630 --> 00:21:10,910 semua kami baru diberikan benda yang di layar. 348 00:21:10,910 --> 00:21:13,160 Dan ini mencegah hal-hal seperti menyegarkan layar 349 00:21:13,160 --> 00:21:16,710 ketika kita hanya ditarik setengah benda untuk frame. 350 00:21:16,710 --> 00:21:21,280 Jadi itu sebabnya kita perlu memanggil SDL_RenderPresent, serta 351 00:21:21,280 --> 00:21:23,320 sebagai SDL_RenderCopy. 352 00:21:23,320 --> 00:21:25,749 >> Sekali lagi, kita hanya akan menunggu selama lima detik. 353 00:21:25,749 --> 00:21:27,540 Kemudian kita akan membersihkan sumber daya kami. 354 00:21:27,540 --> 00:21:29,540 Kami memiliki beberapa waktu ini. 355 00:21:29,540 --> 00:21:31,750 Dan kemudian kita hanya akan untuk keluar dari program. 356 00:21:31,750 --> 00:21:35,350 Jadi mari kita lakukan itu. 357 00:21:35,350 --> 00:21:41,880 Aku akan mengetik make, dan kemudian sumber sama hello-- ini sekarang 3image.c. 358 00:21:41,880 --> 00:21:49,632 359 00:21:49,632 --> 00:21:52,240 Baiklah, yang disusun tidak ada kesalahan. 360 00:21:52,240 --> 00:21:57,210 Dan Anda bisa lihat di sini saya sekarang ditarik keluar gambar saya, Hello, CS50! 361 00:21:57,210 --> 00:22:00,560 untuk jendela kita, yang menghilang setelah lima detik. 362 00:22:00,560 --> 00:22:02,090 >> Sekarang, ini masih memiliki masalah, kan? 363 00:22:02,090 --> 00:22:05,750 Ini bukan aplikasi yang baik, karena ketika saya mencoba untuk menutup jendela, 364 00:22:05,750 --> 00:22:06,500 tidak ada yang terjadi. 365 00:22:06,500 --> 00:22:09,540 X yang masih belum responsif. 366 00:22:09,540 --> 00:22:17,420 Jadi mari kita lihat pada file selanjutnya, hello4animation. 367 00:22:17,420 --> 00:22:21,850 Jadi ini adalah file yang akan memperkenalkan 368 00:22:21,850 --> 00:22:25,124 bergerak dan gerakan untuk gambar kita. 369 00:22:25,124 --> 00:22:27,040 Jadi kita akan melakukan hal yang sama seperti sebelumnya, 370 00:22:27,040 --> 00:22:30,190 memulai SDL, menciptakan jendela, membuat renderer, 371 00:22:30,190 --> 00:22:33,030 memuat gambar menjadi memori, membuat tekstur. 372 00:22:33,030 --> 00:22:35,090 Kami telah melihat semua itu sebelumnya. 373 00:22:35,090 --> 00:22:36,770 Sekarang, ini adalah baru. 374 00:22:36,770 --> 00:22:42,305 Kita akan telah struktur yang disebut sebuah rect SDL, yang hanya persegi panjang. 375 00:22:42,305 --> 00:22:49,950 Jika kita pergi ke sini, kita bisa melakukan pencarian untuk SDL rect, 376 00:22:49,950 --> 00:22:54,040 dan Anda dapat melihat itu struktur yang sangat sederhana. 377 00:22:54,040 --> 00:22:56,760 Ini memiliki x, y untuk posisi, dan 378 00:22:56,760 --> 00:23:02,080 memiliki lebar dan tinggi untuk ukuran persegi panjang. 379 00:23:02,080 --> 00:23:07,785 >> Jadi apa yang kita akan lakukan adalah kita akan menentukan SDL ini rect dest, 380 00:23:07,785 --> 00:23:09,480 untuk tujuan. 381 00:23:09,480 --> 00:23:14,130 Dan ini adalah tempat pada layar di mana 382 00:23:14,130 --> 00:23:16,005 kita akan menggambar image kami, tepat Jadi 383 00:23:16,005 --> 00:23:17,880 jika kita akan menjadi gambar bergerak di sekitar, 384 00:23:17,880 --> 00:23:20,300 maka tujuan mana kita akan menggambar gambar 385 00:23:20,300 --> 00:23:22,620 harus bergerak di sekitar. 386 00:23:22,620 --> 00:23:24,910 Jadi kita akan menyebutnya fungsi SDL_QueryTexture. 387 00:23:24,910 --> 00:23:27,550 388 00:23:27,550 --> 00:23:33,500 Dan melihat aku lewat alamat dari dest.w, yang lebar, 389 00:23:33,500 --> 00:23:36,950 dan dest.h, yang ketinggian. 390 00:23:36,950 --> 00:23:40,425 Dan SDL_QueryTexture akan untuk menyimpan dalam bidang-bidang lebar 391 00:23:40,425 --> 00:23:41,675 dan tinggi tekstur kami. 392 00:23:41,675 --> 00:23:44,680 393 00:23:44,680 --> 00:23:47,030 >> Dan kemudian apa yang akan saya lakukan adalah saya akan 394 00:23:47,030 --> 00:23:55,580 untuk mengatur dest.x menjadi jendela lebar dikurangi dest.w, yang 395 00:23:55,580 --> 00:23:59,000 lebar sprite, dibagi 2. 396 00:23:59,000 --> 00:24:03,860 Dan ini akan mengaturnya sehingga bahwa gambar yang sempurna berpusat 397 00:24:03,860 --> 00:24:06,780 di jendela kita, oke? 398 00:24:06,780 --> 00:24:08,652 Jadi sekarang aku punya posisi y. 399 00:24:08,652 --> 00:24:10,360 Dan ini akan menjadi variabel yang 400 00:24:10,360 --> 00:24:16,390 berubah, karena kita akan menjadi gambar bergerak dalam arah y. 401 00:24:16,390 --> 00:24:19,050 Dan sekarang kami memiliki sesuatu disebut loop animasi. 402 00:24:19,050 --> 00:24:21,180 >> Jadi bagaimana bekerja animasi? 403 00:24:21,180 --> 00:24:27,630 Nah, mata manusia dapat mendeteksi 12 berbeda gambar dalam setiap detik, oke? 404 00:24:27,630 --> 00:24:33,060 Jadi jika Anda flash 12 kartu gambar pada saya dalam kedua, saya melihat masing-masing gambar 405 00:24:33,060 --> 00:24:35,950 sebagai citra individu sendiri yang berbeda. 406 00:24:35,950 --> 00:24:39,690 Sekarang, jika Anda berkedip lebih gambar pada saya di kedua, 407 00:24:39,690 --> 00:24:42,140 kemudian mata saya akan mulai kabur mereka bersama-sama 408 00:24:42,140 --> 00:24:46,920 dan saya akan melihatnya sebagai gerakan, bukan satu gambar yang berbeda. 409 00:24:46,920 --> 00:24:51,930 Jadi, misalnya, film dan televisi, mereka flash gambar pada Anda 24 kali 410 00:24:51,930 --> 00:24:52,570 Sebentar. 411 00:24:52,570 --> 00:24:55,110 Jadi itu 24 frame per detik. 412 00:24:55,110 --> 00:25:00,136 Layar komputer, di sisi lain, sering berada di 60 frame per detik. 413 00:25:00,136 --> 00:25:01,260 Itu menyegarkan kecepatan mereka. 414 00:25:01,260 --> 00:25:04,650 Itulah seberapa sering mereka menyegarkan gambar di layar. 415 00:25:04,650 --> 00:25:08,960 Jadi target kami akan menjadi 60 frame per detik untuk permainan kami. 416 00:25:08,960 --> 00:25:11,770 417 00:25:11,770 --> 00:25:13,710 >> Jadi mari kita melihat bahwa dalam kode. 418 00:25:13,710 --> 00:25:19,064 Jadi untuk setiap frame, kami pertama akan membersihkan jendela. 419 00:25:19,064 --> 00:25:20,230 Ini adalah pola umum. 420 00:25:20,230 --> 00:25:22,450 Anda selalu membersihkan jendela setiap frame, dan kemudian 421 00:25:22,450 --> 00:25:25,210 melakukan semua gambar Anda operasi, dan kemudian pada akhirnya, 422 00:25:25,210 --> 00:25:29,610 jangan RenderPresent untuk menunjukkan segala sesuatu dalam frame. 423 00:25:29,610 --> 00:25:33,910 Dan kemudian Anda akan memiliki menunggu di akhir 424 00:25:33,910 --> 00:25:36,340 menunggu sampai berikutnya bingkai harus dimulai. 425 00:25:36,340 --> 00:25:38,650 >> Jadi jika saya melakukan banyak perhitungan kompleks di sini 426 00:25:38,650 --> 00:25:43,100 yang membawa lebih dari 16 milidetik, mustahil bagi saya 427 00:25:43,100 --> 00:25:46,890 untuk mendapatkan frame rate 60 yang Saya ingin, karena setiap frame 428 00:25:46,890 --> 00:25:48,750 terlalu lama untuk menghitung. 429 00:25:48,750 --> 00:25:52,340 Selain itu, kami benar-benar melakukan semacam jumlah diabaikan kerja 430 00:25:52,340 --> 00:25:54,820 di sini, karena hanya ada satu hal kita menggambar. 431 00:25:54,820 --> 00:25:59,390 Jadi aku hanya menunggu 1/60 dari kedua, yang merupakan panjang 432 00:25:59,390 --> 00:26:01,520 dari bingkai di antara frame. 433 00:26:01,520 --> 00:26:05,610 Jadi aku semacam berpura-pura melakukan semua pekerjaan saya membutuhkan waktu nol. 434 00:26:05,610 --> 00:26:09,050 Tapi dalam permainan nyata, Anda harus mengurangi 435 00:26:09,050 --> 00:26:13,760 jumlah waktu yang dibutuhkan untuk melakukan semua pekerjaan ini dari waktu istirahat Anda. 436 00:26:13,760 --> 00:26:16,970 >> Jadi, apa yang aku benar-benar melakukan dalam lingkaran ini? 437 00:26:16,970 --> 00:26:19,070 Aku membersihkan jendela. 438 00:26:19,070 --> 00:26:27,470 Aku mengatur dest.y, yang merupakan int untuk posisi y yang sebenarnya saya dilemparkan ke sebuah int. 439 00:26:27,470 --> 00:26:32,070 Sekarang, saya ingin mengapung resolusi untuk posisi y saya dalam permainan saya, 440 00:26:32,070 --> 00:26:34,150 tapi kemudian untuk benar-benar menggambar ke layar, 441 00:26:34,150 --> 00:26:39,070 perlu int, karena itu dalam satuan pixel, jadi itulah yang pemain untuk. 442 00:26:39,070 --> 00:26:41,745 Aku akan menggambar gambar. 443 00:26:41,745 --> 00:26:45,180 Jadi ini adalah persegi panjang sumber. 444 00:26:45,180 --> 00:26:47,060 Dan ini adalah persegi panjang tujuan. 445 00:26:47,060 --> 00:26:50,310 Jadi aku melewati null untuk persegi panjang sumber 446 00:26:50,310 --> 00:26:53,426 untuk mengatakan saya ingin menarik seluruh tekstur saya. 447 00:26:53,426 --> 00:26:55,300 Tetapi jika Anda memiliki banyak tekstur dalam permainan Anda 448 00:26:55,300 --> 00:26:59,120 dan mereka semua dalam satu peta tekstur besar yang dimuat ke SDL sebagai salah satu 449 00:26:59,120 --> 00:27:02,850 tekstur, Anda bisa menggunakan persegi panjang sumber 450 00:27:02,850 --> 00:27:06,750 untuk memilih salah satu tekstur yang lebih kecil, salah satu sprite kecil, 451 00:27:06,750 --> 00:27:09,450 dari yang peta tekstur besar. 452 00:27:09,450 --> 00:27:14,740 >> Jadi sekali lagi, aku melewati membuat saya, saya tekstur, dan sekarang tujuan. 453 00:27:14,740 --> 00:27:18,320 Ini akan menjadi tempat di jendela itu akan ditarik. 454 00:27:18,320 --> 00:27:21,390 Dan kemudian, karena aku menjiwai sesuatu, saya perlu gerakan, 455 00:27:21,390 --> 00:27:25,150 Aku akan memperbarui posisi sprite pada setiap frame. 456 00:27:25,150 --> 00:27:30,190 Jadi saya harus menelepon gulir konstan ini mempercepat dalam satuan pixel per detik. 457 00:27:30,190 --> 00:27:34,320 Sekarang, setiap kali kita melakukan gerakan, frame hanya 1/60 detik. 458 00:27:34,320 --> 00:27:36,740 Jadi aku akan membagi bahwa dengan 60. 459 00:27:36,740 --> 00:27:42,350 Dan kemudian, mari kita lihat, aku mengurangkan bahwa dari posisi y. 460 00:27:42,350 --> 00:27:44,470 Mengapa saya mengurangkan? 461 00:27:44,470 --> 00:27:46,169 Kita akan sampai ke bahwa dalam satu detik. 462 00:27:46,169 --> 00:27:48,460 Jadi kemudian aku membersihkan sumber daya saya dan program berakhir. 463 00:27:48,460 --> 00:27:49,830 >> Jadi mari kita membuat itu. 464 00:27:49,830 --> 00:27:52,450 465 00:27:52,450 --> 00:28:03,570 Jadi mari kita pergi ke make SRCS = hello4 animation.c, oke? 466 00:28:03,570 --> 00:28:05,720 Permainan. 467 00:28:05,720 --> 00:28:06,770 Ini dia. 468 00:28:06,770 --> 00:28:12,690 Jadi saya memilikinya bergulir sampai jendela, yang cukup rapi. 469 00:28:12,690 --> 00:28:17,110 Tapi tunggu, saya mengurangkan dari y posisi setiap kali. 470 00:28:17,110 --> 00:28:18,910 Apa yang sedang terjadi di sana? 471 00:28:18,910 --> 00:28:24,010 Nah, ternyata di SDL, dan pada kenyataannya, di sebagian besar komputer grafis, 472 00:28:24,010 --> 00:28:28,890 asal untuk sistem koordinat adalah kiri atas dari jendela. 473 00:28:28,890 --> 00:28:34,960 >> Jadi arah x positif pergi di jendela Anda ke kanan. 474 00:28:34,960 --> 00:28:38,110 Dan y arah positif sebenarnya turun. 475 00:28:38,110 --> 00:28:40,470 Jadi sekali lagi, dalam asal ini kiri atas jendela, 476 00:28:40,470 --> 00:28:46,190 positif y arah turun, dan x positif adalah ke kanan. 477 00:28:46,190 --> 00:28:48,770 Jadi ketika saya kurangi dari posisi y, itu 478 00:28:48,770 --> 00:28:52,640 akan membuatnya pergi pada hal yang negatif y arah, yang naik jendela. 479 00:28:52,640 --> 00:28:55,500 Jadi itulah yang terjadi di sana. 480 00:28:55,500 --> 00:28:56,510 Keren. 481 00:28:56,510 --> 00:28:59,240 >> Mari kita lihat file selanjutnya. 482 00:28:59,240 --> 00:29:05,700 Berikut adalah bagian dari menunjukkan di mana kita akhirnya 483 00:29:05,700 --> 00:29:08,920 mendapatkan bahwa X di sudut jendela yang seharusnya untuk menutup jendela 484 00:29:08,920 --> 00:29:10,660 bekerja. 485 00:29:10,660 --> 00:29:12,800 Jadi apa yang terjadi? 486 00:29:12,800 --> 00:29:17,520 Kami menginisialisasi SDL, membuat jendela, membuat penyaji, memuat gambar, 487 00:29:17,520 --> 00:29:19,770 membuat tekstur seperti yang telah kita lihat sebelumnya. 488 00:29:19,770 --> 00:29:26,850 Kami memiliki tujuan yang sama persegi panjang seperti sebelumnya, panggilan yang sama untuk query tekstur. 489 00:29:26,850 --> 00:29:29,780 Tapi kali ini, kami kemudian akan membagi lebar 490 00:29:29,780 --> 00:29:33,110 dan tinggi tujuan kami dengan 4. 491 00:29:33,110 --> 00:29:36,430 Ini hanya memiliki efek skala gambar kami turun saat 492 00:29:36,430 --> 00:29:39,884 kami menampilkannya dalam jendela oleh empat. 493 00:29:39,884 --> 00:29:40,800 Jadi itu cukup rapi. 494 00:29:40,800 --> 00:29:42,770 Kami hanya dapat skala seperti itu. 495 00:29:42,770 --> 00:29:45,970 Kita akan mulai sprite di tengah layar. 496 00:29:45,970 --> 00:29:49,410 Dan sekarang kami memiliki x dan y dan kecepatan mereka berdua akan mulai nol. 497 00:29:49,410 --> 00:29:53,740 498 00:29:53,740 --> 00:29:55,880 >> Ini adalah file yang salah. 499 00:29:55,880 --> 00:29:56,380 Maafkan saya. 500 00:29:56,380 --> 00:29:57,960 Jadi itu semua benar. 501 00:29:57,960 --> 00:30:00,170 Itu semua masih dalam file ini. 502 00:30:00,170 --> 00:30:03,210 Kami memiliki bagi dengan 4 dan segala sesuatu. 503 00:30:03,210 --> 00:30:07,830 Jadi di sini kita memiliki kita x dan y posisi untuk pusat jendela. 504 00:30:07,830 --> 00:30:12,480 Dan kami memberikan kecepatan awal kecepatan konstan ini, yang 505 00:30:12,480 --> 00:30:15,180 Saya percaya adalah 300 piksel per detik. 506 00:30:15,180 --> 00:30:19,850 Sekarang, kami memiliki int ini bisa juga menjadi boolean disebut dekat diminta. 507 00:30:19,850 --> 00:30:23,970 Dan bukannya melakukan sebuah loop tak terbatas pada timer di sini, 508 00:30:23,970 --> 00:30:29,180 kita akan menghidupkan sebagai Selama dekat tidak diminta. 509 00:30:29,180 --> 00:30:30,960 >> Jadi bagaimana kita memproses peristiwa? 510 00:30:30,960 --> 00:30:35,600 Nah, SDL antrian sampai peristiwa di antrian literal belakang layar. 511 00:30:35,600 --> 00:30:38,860 Dan kemudian setiap frame, kita bisa dequeue peristiwa 512 00:30:38,860 --> 00:30:43,900 dari yang menggunakan antrian SDL_PullEvent panggilan ini. 513 00:30:43,900 --> 00:30:46,730 Dan lagi, pasti pergi baca tentang hal ini di dokumentasi. 514 00:30:46,730 --> 00:30:50,450 Ada lebih banyak detil dan banyak fungsi yang lebih Anda dapat menggunakan dengan ini. 515 00:30:50,450 --> 00:30:54,750 Kami lulus alamat hal ini, SDL_Event 516 00:30:54,750 --> 00:30:56,990 yang kita miliki di sini di stack. 517 00:30:56,990 --> 00:30:58,840 >> Sekarang, apa yang merupakan SDL_event? 518 00:30:58,840 --> 00:31:02,356 Karena SDL, jika kita melihat di yang documentation-- mari 519 00:31:02,356 --> 00:31:07,580 lihat, API berdasarkan kategori, masukan peristiwa, penanganan event, 520 00:31:07,580 --> 00:31:15,150 kita dapat melihat nomor dari berbagai peristiwa di sini 521 00:31:15,150 --> 00:31:18,600 dan kita bisa melihat ada satu ton seluruh dari mereka. 522 00:31:18,600 --> 00:31:22,150 Jadi apa hal SDL_Event ini? 523 00:31:22,150 --> 00:31:28,190 524 00:31:28,190 --> 00:31:31,107 SDL_Event adalah serikat buruh. 525 00:31:31,107 --> 00:31:31,940 Wow, apa serikat? 526 00:31:31,940 --> 00:31:33,910 Anda mungkin pernah pernah mendengar tentang itu sebelumnya. 527 00:31:33,910 --> 00:31:35,610 Dan itu OK. 528 00:31:35,610 --> 00:31:39,420 >> Sebuah serikat adalah jenis seperti struct, kecuali struct 529 00:31:39,420 --> 00:31:41,960 memiliki ruang untuk semua bidang dan memori, 530 00:31:41,960 --> 00:31:45,060 sedangkan serikat hanya memiliki cukup ruang untuk menyesuaikan terbesar 531 00:31:45,060 --> 00:31:49,660 salah satu bidang, yang berarti hanya dapat menyimpan satu bidang yang 532 00:31:49,660 --> 00:31:52,830 pada waktu, yang jenis masuk akal untuk acara, kan? 533 00:31:52,830 --> 00:31:55,810 Kita dapat memiliki keyboard kejadian atau peristiwa jendela, 534 00:31:55,810 --> 00:31:59,750 tapi peristiwa tunggal tidak dapat menjadi seorang acara keyboard dan acara jendela, 535 00:31:59,750 --> 00:32:05,450 sehingga akan konyol untuk memiliki ruang untuk kedua dari mereka dalam serikat acara kami. 536 00:32:05,450 --> 00:32:07,770 Jadi jika Anda ingin membuat serikat Anda sendiri, 537 00:32:07,770 --> 00:32:10,020 terlihat persis sama sebagai menciptakan struct, 538 00:32:10,020 --> 00:32:14,140 kecuali bahwa kita menggunakan kata kunci union bukannya kata kunci struct. 539 00:32:14,140 --> 00:32:17,490 Dan ingat, untuk semua hal di dalam serikat Anda, 540 00:32:17,490 --> 00:32:22,020 variabel aktual yang serikat hanya dapat memiliki satu dari nilai-nilai 541 00:32:22,020 --> 00:32:24,780 pada suatu waktu. 542 00:32:24,780 --> 00:32:29,940 >> Jadi bagaimana kita bisa tahu apa jenis acara kita hanya muncul dari antrian ini? 543 00:32:29,940 --> 00:32:33,370 Nah, kita bisa menguji event.type. 544 00:32:33,370 --> 00:32:35,792 Dan jika itu adalah sama untuk SDL_Quit, kita tahu 545 00:32:35,792 --> 00:32:37,500 itu hal dihasilkan ketika kita 546 00:32:37,500 --> 00:32:39,510 hit bahwa X di sudut jendela. 547 00:32:39,510 --> 00:32:44,270 Dan kita bisa mengatur dekat diminta sama dengan 1. 548 00:32:44,270 --> 00:32:47,230 Sisanya hanya beberapa animasi yang telah Anda lihat sebelumnya. 549 00:32:47,230 --> 00:32:52,802 Jadi mari kita pergi ke depan dan membuat ini dan melihat seberapa baik kerjanya. 550 00:32:52,802 --> 00:32:55,135 Jadi aku akan mengetik make dan kemudian SRCS = hello5_events.c. 551 00:32:55,135 --> 00:33:03,760 552 00:33:03,760 --> 00:33:04,770 Di sana kami pergi. 553 00:33:04,770 --> 00:33:05,780 Pertandingan. 554 00:33:05,780 --> 00:33:08,920 >> Sekarang, kita bisa melihat itu memang diperkecil oleh empat. 555 00:33:08,920 --> 00:33:10,360 Dan sekarang itu terpental sekitar. 556 00:33:10,360 --> 00:33:14,630 Saya memiliki beberapa tabrakan terjadi dengan sisi jendela 557 00:33:14,630 --> 00:33:16,840 bahwa kita bisa melihat pada. 558 00:33:16,840 --> 00:33:21,190 Dan apa yang terjadi ketika saya pergi untuk menutupnya? 559 00:33:21,190 --> 00:33:22,120 Menutup. 560 00:33:22,120 --> 00:33:22,740 Fantastis. 561 00:33:22,740 --> 00:33:24,290 Kami menerima peristiwa itu. 562 00:33:24,290 --> 00:33:26,630 Dan kami menanganinya. 563 00:33:26,630 --> 00:33:30,730 >> Jadi mari kita melihat kembali kode. 564 00:33:30,730 --> 00:33:33,020 Jadi bagaimana saya mendapatkannya terpental sekitar seperti itu? 565 00:33:33,020 --> 00:33:37,200 Ingat saya set kedua x dan y awalnya untuk kecepatan. 566 00:33:37,200 --> 00:33:39,260 Dan kecepatan adalah positif konstan, jadi itu 567 00:33:39,260 --> 00:33:42,680 akan mendapatkannya mulai keluar turun dan ke kanan. 568 00:33:42,680 --> 00:33:45,680 569 00:33:45,680 --> 00:33:50,310 >> Sekarang, setiap frame, selain penanganan setiap peristiwa yang mungkin terjadi, 570 00:33:50,310 --> 00:33:57,520 Aku akan mendeteksi apakah sprite saya sedang mencoba untuk pergi keluar dari jendela. 571 00:33:57,520 --> 00:34:03,610 Jadi kita dapat melakukannya dengan hanya memeriksa x_pos dengan 0, y_pos 0, dan kemudian 572 00:34:03,610 --> 00:34:07,370 juga x_pos dan y_pos dengan lebar jendela dan tinggi jendela. 573 00:34:07,370 --> 00:34:11,010 Perhatikan Aku sudah dikurangi lebar sprite. 574 00:34:11,010 --> 00:34:14,090 Dan ini adalah karena jika saya tidak kurangi lebar dari sprite, 575 00:34:14,090 --> 00:34:17,760 itu hanya akan memeriksa bahwa asal sprite 576 00:34:17,760 --> 00:34:19,690 tidak pergi ke luar jendela. 577 00:34:19,690 --> 00:34:21,480 Tapi kami ingin seluruh yang lebar sprite 578 00:34:21,480 --> 00:34:24,030 untuk selalu berada di dalam jendela dan seluruh ketinggian sprite 579 00:34:24,030 --> 00:34:25,321 untuk selalu berada di dalam jendela. 580 00:34:25,321 --> 00:34:27,429 Jadi itulah yang pengurangan adalah untuk. 581 00:34:27,429 --> 00:34:30,080 Banyak geometri sini dapat membantu untuk menarik keluar 582 00:34:30,080 --> 00:34:33,929 di atas kertas dengan koordinat sistem untuk melihat apa yang sedang terjadi. 583 00:34:33,929 --> 00:34:38,090 >> Jadi jika saya bertabrakan, saya hanya hanya mengatur ulang posisi 584 00:34:38,090 --> 00:34:41,400 sehingga tidak akan keluar dari layar. 585 00:34:41,400 --> 00:34:47,179 Dan aku akan, jika memantul di salah satu dinding samping, 586 00:34:47,179 --> 00:34:51,469 Aku akan meniadakan x kecepatan sehingga 587 00:34:51,469 --> 00:34:53,210 mulai memantul ke arah lain. 588 00:34:53,210 --> 00:34:56,210 Dan sama, jika hits bagian atas atau bawah, 589 00:34:56,210 --> 00:34:59,820 Aku akan mengatur kecepatan y sama dengan kecepatan y negatif, 590 00:34:59,820 --> 00:35:01,690 sehingga akan bangkit kembali. 591 00:35:01,690 --> 00:35:03,860 Jadi itu hanya bagaimana kita sampai di sini. 592 00:35:03,860 --> 00:35:07,560 >> Dan posisi memperbarui seperti yang telah kita lihat sebelumnya, 593 00:35:07,560 --> 00:35:12,510 membagi dengan 60, karena kita hanya menangani 1/60 detik. 594 00:35:12,510 --> 00:35:15,750 Dan kemudian rendering, persis sama seperti sebelumnya. 595 00:35:15,750 --> 00:35:19,810 Dan jadi itu semua yang terjadi file ini. 596 00:35:19,810 --> 00:35:22,490 Jadi itulah bagaimana kita melakukan acara. 597 00:35:22,490 --> 00:35:29,260 Hal utama untuk mengambil di sini adalah fungsi SDL_PullEvent ini. 598 00:35:29,260 --> 00:35:33,020 Dan Anda pasti harus membaca dokumentasi tentang SDL_Event 599 00:35:33,020 --> 00:35:38,630 serikat, karena ini adalah tipe data sangat, sangat penting, karena kita menggunakannya 600 00:35:38,630 --> 00:35:40,690 untuk segala macam acara. 601 00:35:40,690 --> 00:35:46,539 >> Sebagai contoh, kita menggunakannya untuk keyboard peristiwa, yang adalah apa file ini adalah untuk. 602 00:35:46,539 --> 00:35:47,330 Jadi apa yang kita miliki? 603 00:35:47,330 --> 00:35:50,180 Kami memiliki hal yang sama seperti sebelumnya, menginisialisasi SDL, membuat jendela, 604 00:35:50,180 --> 00:35:55,260 membuat penyaji, memuat gambar ke dalam memori, membuat tekstur. 605 00:35:55,260 --> 00:36:00,530 Sekali lagi, kita akan memiliki dest persegi panjang ini, 606 00:36:00,530 --> 00:36:04,890 kita akan skala gambar oleh empat, membuatnya sedikit lebih kecil. 607 00:36:04,890 --> 00:36:08,000 Sekarang, kita akan memulai sprite di tengah layar. 608 00:36:08,000 --> 00:36:12,090 Tapi kali ini, kita akan mengatur x dan y kecepatan awal nol, 609 00:36:12,090 --> 00:36:15,140 karena keyboard adalah akan mengontrol mereka. 610 00:36:15,140 --> 00:36:18,900 Dan selanjutnya, kita akan melacak variabel tersebut 611 00:36:18,900 --> 00:36:20,450 atas, bawah, kiri, dan kanan. 612 00:36:20,450 --> 00:36:23,090 Dan itu akan terus melacak apakah kita sudah 613 00:36:23,090 --> 00:36:27,370 menekan tombol-tombol keyboard yang sesuai dengan atas, bawah, kiri, 614 00:36:27,370 --> 00:36:28,460 dan kanan. 615 00:36:28,460 --> 00:36:32,440 >> Sekarang, ini adalah jenis mewah karena kita dapat menggunakan W, A, S, 616 00:36:32,440 --> 00:36:35,480 D sini, atau tombol panah yang sebenarnya. 617 00:36:35,480 --> 00:36:38,590 Kita akan melihat bahwa hanya dalam detik. 618 00:36:38,590 --> 00:36:41,140 Jadi kita akan memproses acara seperti sebelumnya. 619 00:36:41,140 --> 00:36:42,530 Kita tarik acara tersebut. 620 00:36:42,530 --> 00:36:45,840 Tapi sekarang kita akan beralih pada jenis acara. 621 00:36:45,840 --> 00:36:47,710 Jika itu SDL_Quit, kami akan mengatur dekat 622 00:36:47,710 --> 00:36:49,990 diminta untuk satu, sama seperti sebelumnya. 623 00:36:49,990 --> 00:36:52,315 Yang menangani x di sudut jendela, 624 00:36:52,315 --> 00:36:55,050 sehingga jendela kita benar-benar menutup. 625 00:36:55,050 --> 00:37:00,110 >> Jika tidak, jika kita mendapatkan kunci SDL turun acara, yang berarti kita menekan tombol, 626 00:37:00,110 --> 00:37:04,470 maka apa yang kita akan lakukan adalah kita akan beralih pada hal ini di sini, 627 00:37:04,470 --> 00:37:11,370 yang means-- sehingga event.key berarti memperlakukan serikat acara kami, 628 00:37:11,370 --> 00:37:15,490 pergi dan mendapatkan kunci Struktur acara di dalamnya. 629 00:37:15,490 --> 00:37:18,810 Jadi ternyata bahwa ini serikat adalah struktur peristiwa penting. 630 00:37:18,810 --> 00:37:22,820 Dan kemudian pergi ke tombol Struktur acara bidangnya 631 00:37:22,820 --> 00:37:26,140 disebut Keysym dan kemudian scancode. 632 00:37:26,140 --> 00:37:29,480 Dan lagi, pasti baca dokumentasi tentang hal ini. 633 00:37:29,480 --> 00:37:31,220 Masukan kata kunci cukup menarik. 634 00:37:31,220 --> 00:37:34,020 Anda bisa mendapatkan kode scan atau kode kunci. 635 00:37:34,020 --> 00:37:38,590 Dan itu sedikit halus, tapi dokumentasi cukup baik. 636 00:37:38,590 --> 00:37:43,380 >> Jadi jika kita melihat memindai kode untuk tekan tombol kami menjadi W atau up, 637 00:37:43,380 --> 00:37:45,450 kita akan mengatur sama dengan 1. 638 00:37:45,450 --> 00:37:47,240 Dan kemudian kami keluar dari saklar yang. 639 00:37:47,240 --> 00:37:52,980 Jika itu A atau kiri, kami menetapkan kiri ke 1, et cetera, et cetera, untuk turun dan kanan. 640 00:37:52,980 --> 00:37:57,080 Sekarang, di saklar luar ini, jika kita melihat kunci up acara, 641 00:37:57,080 --> 00:38:00,730 itu berarti kita telah merilis kunci dan kita tidak lagi menekan itu. 642 00:38:00,730 --> 00:38:05,380 Jadi aku akan mengatakan up sama dengan 0, kiri sama dengan 0, turun sama dengan 0, tepat 643 00:38:05,380 --> 00:38:08,260 sama dengan 0, dan sebagainya. 644 00:38:08,260 --> 00:38:12,070 >> Dan melihat kita miliki dalam masing-masing dua kasus diletakkan tepat di samping satu sama lain 645 00:38:12,070 --> 00:38:14,490 tanpa kode yang terpisah untuk kasus pertama, yang 646 00:38:14,490 --> 00:38:18,180 Artinya apakah itu S atau bawah di sini, 647 00:38:18,180 --> 00:38:20,520 itu akan mengeksekusi kode ini. 648 00:38:20,520 --> 00:38:22,090 Jadi itu cukup berguna. 649 00:38:22,090 --> 00:38:24,830 Ini mencegah kita harus melakukan lebih kondisi dan ifs dan hal 650 00:38:24,830 --> 00:38:26,980 seperti itu. 651 00:38:26,980 --> 00:38:29,420 >> Jadi kita akan menentukan kecepatan. 652 00:38:29,420 --> 00:38:31,020 Kami mengatur kecepatan untuk 0. 653 00:38:31,020 --> 00:38:33,910 Kemudian jika up ditekan dan tidak turun, maka kita 654 00:38:33,910 --> 00:38:37,450 mengatur y kecepatan untuk kecepatan negatif. 655 00:38:37,450 --> 00:38:42,930 Ingat negatif, karena negatif arah y terserah. 656 00:38:42,930 --> 00:38:45,540 Dan y arah positif turun. 657 00:38:45,540 --> 00:38:47,510 Jika bawah ditekan dan tidak sampai, maka kita 658 00:38:47,510 --> 00:38:53,860 akan mengaturnya untuk kecepatan positif, yang berarti turun layar. 659 00:38:53,860 --> 00:38:55,460 Hal yang sama dengan kiri dan kanan. 660 00:38:55,460 --> 00:38:58,200 >> Dan kemudian kita akan memperbarui posisi seperti sebelumnya. 661 00:38:58,200 --> 00:39:00,740 Kami akan melakukan tabrakan deteksi dengan batas, 662 00:39:00,740 --> 00:39:04,290 tapi kami tidak akan me-reset kecepatan, karena kecepatan hanya 663 00:39:04,290 --> 00:39:06,780 dikendalikan oleh keyboard. 664 00:39:06,780 --> 00:39:11,230 Tapi kita akan me-reset posisi untuk tetap di jendela. 665 00:39:11,230 --> 00:39:14,400 Dan kita akan mengatur posisi di struct 666 00:39:14,400 --> 00:39:17,400 dan kemudian melakukan semua render barang dari sebelumnya. 667 00:39:17,400 --> 00:39:20,750 Jadi mari kita lihat apa yang dilakukannya. 668 00:39:20,750 --> 00:39:25,460 Jadi membuat SRCS-- mari kita lihat, ini hello6_keyboard.c. 669 00:39:25,460 --> 00:39:38,140 670 00:39:38,140 --> 00:39:38,820 >> Oh tidak. 671 00:39:38,820 --> 00:39:40,150 Jadi kita punya beberapa peringatan di sini. 672 00:39:40,150 --> 00:39:43,840 Dan itu hanya mengatakan kami tidak memeriksa setiap kemungkinan jenis tunggal 673 00:39:43,840 --> 00:39:45,610 acara. 674 00:39:45,610 --> 00:39:49,470 Itu OK, karena ada 236 dari mereka atau lebih. 675 00:39:49,470 --> 00:39:51,760 Jadi saya akan mengabaikan peringatan-peringatan. 676 00:39:51,760 --> 00:39:53,530 Ini masih disusun dengan baik. 677 00:39:53,530 --> 00:39:56,100 Jadi aku akan bermain game. 678 00:39:56,100 --> 00:39:57,590 Itu tidak bergerak. 679 00:39:57,590 --> 00:40:04,150 Tapi sekarang, ketika saya tumbuk pada keyboard, Aku bisa melakukan beberapa gerakan WASD sini, 680 00:40:04,150 --> 00:40:06,870 Saya menggunakan tombol panah saya juga. 681 00:40:06,870 --> 00:40:10,070 Dan perhatikan, meskipun aku menekan tepat sekarang, 682 00:40:10,070 --> 00:40:13,804 itu tidak akan keluar dari jendela, karena saya ulang pada setiap frame. 683 00:40:13,804 --> 00:40:14,720 Jadi itu cukup rapi. 684 00:40:14,720 --> 00:40:19,420 Anda bisa membayangkan bergerak Mario dengan beberapa tombol panah atau sesuatu seperti itu. 685 00:40:19,420 --> 00:40:22,880 Dan ya, X tidak bekerja. 686 00:40:22,880 --> 00:40:26,900 >> File sehingga akhir kita akan untuk melihat, hellow7_mouse. 687 00:40:26,900 --> 00:40:29,600 Ini adalah tentang mendapatkan masukan mouse. 688 00:40:29,600 --> 00:40:34,790 Jadi dalam satu ini, kita mengimpor header matematika, 689 00:40:34,790 --> 00:40:38,100 karena kita akan memiliki sedikit matematika di sini. 690 00:40:38,100 --> 00:40:45,260 Sama tua, sama tua hal, tujuan, sama tua, melihat itu sebelumnya. 691 00:40:45,260 --> 00:40:46,910 Nah, ini menarik. 692 00:40:46,910 --> 00:40:51,730 Jadi kita kembali ke hanya memeriksa untuk SDL berhenti acara. 693 00:40:51,730 --> 00:40:52,460 Kenapa itu? 694 00:40:52,460 --> 00:40:55,110 Jadi Anda bisa mendapatkan masukan mouse dari acara. 695 00:40:55,110 --> 00:40:57,670 Seperti ketika mouse bergerak, Anda mendapatkan sebuah acara untuk itu. 696 00:40:57,670 --> 00:41:00,520 Ketika tombol mouse ditekan, Anda bisa mendapatkan sebuah acara untuk itu. 697 00:41:00,520 --> 00:41:05,760 >> Tapi ada yang lain, sedikit lebih sederhana mungkin, API untuk mendapatkan masukan mouse. 698 00:41:05,760 --> 00:41:09,500 Dan itu hanya SDL negara get tikus. 699 00:41:09,500 --> 00:41:14,370 Jadi saya memiliki int untuk x dan y untuk posisi kursor. 700 00:41:14,370 --> 00:41:18,910 Saya lulus ke SDL_GetMouseState, yang menetapkan ini. 701 00:41:18,910 --> 00:41:22,200 Dan ini adalah posisi di sistem jendela koordinat. 702 00:41:22,200 --> 00:41:25,520 Jadi jika massa berada di kiri atas jendela, yang akan 0, 0. 703 00:41:25,520 --> 00:41:28,040 704 00:41:28,040 --> 00:41:33,380 >> Sekarang, apa yang akan saya lakukan adalah saya akan untuk melakukan sedikit vektor matematika. 705 00:41:33,380 --> 00:41:36,910 Saya yakin Anda pikir Anda tidak akan melihat bahwa dalam CS50, tapi di sini adalah. 706 00:41:36,910 --> 00:41:40,720 Aku akan melakukan beberapa vektor matematika untuk mendapatkan vektor 707 00:41:40,720 --> 00:41:43,840 dari gambar untuk kursor. 708 00:41:43,840 --> 00:41:53,280 Dan jadi mengapa saya harus pengurangan ini di sini? 709 00:41:53,280 --> 00:42:01,350 Nah, jika saya hanya menggunakan dest .-- sehingga Saya perlu menerjemahkan mouse x 710 00:42:01,350 --> 00:42:05,166 dan y setengah lebar dan ketinggian gambar, 711 00:42:05,166 --> 00:42:08,040 karena saya ingin pusat gambar yang akan pergi ke arah mouse, 712 00:42:08,040 --> 00:42:10,160 tidak asal gambar. 713 00:42:10,160 --> 00:42:15,650 >> Jadi itu hanya untuk memastikan saya bicarakan tentang tengah gambar di sini. 714 00:42:15,650 --> 00:42:19,510 Kemudian kita mendapatkan delta x dan y, yang adalah perbedaan dari target 715 00:42:19,510 --> 00:42:23,430 ke posisi yang sebenarnya dari gambar. 716 00:42:23,430 --> 00:42:25,690 Dan kemudian kita bisa mendapatkan menjauhkan sini, yang 717 00:42:25,690 --> 00:42:29,140 akan menjadi Pythagoras teorema, akar kuadrat dari x 718 00:42:29,140 --> 00:42:32,720 kali x ditambah y kali y. 719 00:42:32,720 --> 00:42:38,400 >> Sekarang untuk mencegah jitter, dan saya bisa menunjukkan Anda apa yang dilakukan jika saya tidak melakukan ini, 720 00:42:38,400 --> 00:42:45,830 jika jarak antara kursor dan pusat gambar kurang dari lima, 721 00:42:45,830 --> 00:42:48,730 Aku hanya tidak akan memindahkan gambar. 722 00:42:48,730 --> 00:42:52,900 Jika tidak, kita mengatur kecepatan. 723 00:42:52,900 --> 00:42:55,960 Dan kita mengaturnya sehingga kecepatan akan selalu konstan. 724 00:42:55,960 --> 00:42:58,770 Dan hasil bersih dari semua matematika ini adalah bahwa gambar 725 00:42:58,770 --> 00:43:01,660 akan bergerak menuju kursor. 726 00:43:01,660 --> 00:43:08,470 >> Sekarang, ternyata bahwa SDL_GetMouseState, 727 00:43:08,470 --> 00:43:14,490 selain pengaturan x dan y argumen di sini, 728 00:43:14,490 --> 00:43:21,340 itu juga mengembalikan sebuah int yang sesuai dengan keadaan tombol mouse. 729 00:43:21,340 --> 00:43:24,600 Jadi kita tidak bisa membaca bahwa langsung, tapi kita bisa 730 00:43:24,600 --> 00:43:29,090 menggunakan macro ini, satu Operator bitwise, tidak menakutkan, 731 00:43:29,090 --> 00:43:30,650 hanya bitwise dan. 732 00:43:30,650 --> 00:43:38,320 Jadi kita katakan tombol, yang merupakan hasil dari SDL_GetMouseState kami, jika itu 733 00:43:38,320 --> 00:43:43,990 dan bitwise dan, makro ini di sini, SDL_BUTTON_LEFT. 734 00:43:43,990 --> 00:43:47,680 >> Jadi ini akan hanya menyelesaikan ke bitmap yang sesuai 735 00:43:47,680 --> 00:43:51,090 untuk tombol kiri mouse ditekan. 736 00:43:51,090 --> 00:43:55,470 Dan jadi jika bitwise dan terjadi dan itu 737 00:43:55,470 --> 00:43:59,340 tidak nol, yang berarti tombol kiri ditekan, 738 00:43:59,340 --> 00:44:04,320 maka kita benar-benar akan meniadakan kedua x dan y kecepatan, 739 00:44:04,320 --> 00:44:06,700 yang hanya akan membuat pelarian gambar. 740 00:44:06,700 --> 00:44:07,980 Posisi Update. 741 00:44:07,980 --> 00:44:10,920 Tabrakan deteksi, melihatnya semua sebelumnya, rendering, baik-baik. 742 00:44:10,920 --> 00:44:11,510 Mari kita membuatnya. 743 00:44:11,510 --> 00:44:14,200 744 00:44:14,200 --> 00:44:16,050 Jadi Anda punya membuat SRCS = hello7_mouse.c. 745 00:44:16,050 --> 00:44:21,720 746 00:44:21,720 --> 00:44:22,220 Besar. 747 00:44:22,220 --> 00:44:23,490 Tidak ada kesalahan. 748 00:44:23,490 --> 00:44:24,900 Dan permainan. 749 00:44:24,900 --> 00:44:26,440 >> Jadi di sini saya punya mouse saya. 750 00:44:26,440 --> 00:44:29,000 Dan gambar memang mengejar mouse. 751 00:44:29,000 --> 00:44:33,140 Sekarang, dalam permainan Anda membuat, mungkin ini adalah seperti mengejar musuh 752 00:44:33,140 --> 00:44:35,240 karakter kecil Anda atau apa pun. 753 00:44:35,240 --> 00:44:37,440 Tapi di sini kita memiliki gambar mengejar mouse. 754 00:44:37,440 --> 00:44:41,000 Dan ketika saya klik, mouse mulai mengejar gambar 755 00:44:41,000 --> 00:44:42,860 dan gambar melarikan diri dari tikus. 756 00:44:42,860 --> 00:44:43,810 Jadi itu cukup keren. 757 00:44:43,810 --> 00:44:47,770 Dan pemberitahuan lagi, ada masih deteksi tabrakan di sini. 758 00:44:47,770 --> 00:44:53,930 >> Jadi itu adalah sedikit akhir demo Saya telah menyiapkan sini. 759 00:44:53,930 --> 00:44:58,870 Dan mari kita lihat satu hal lagi. 760 00:44:58,870 --> 00:45:02,970 Jadi kembali ke sini, saya sebutkan jitter ini. 761 00:45:02,970 --> 00:45:05,000 Baiklah. 762 00:45:05,000 --> 00:45:12,890 Jadi jika jarak kurang dari lima piksel, Aku sedang menyiapkan x dan y kecepatan nol. 763 00:45:12,890 --> 00:45:15,960 Apa yang terjadi jika kita menyingkirkan itu? 764 00:45:15,960 --> 00:45:19,070 Jadi aku akan lakukan ini. 765 00:45:19,070 --> 00:45:23,820 766 00:45:23,820 --> 00:45:30,150 Maafkan gaya menghebohkan ini, tapi kami komentar kode yang benar. 767 00:45:30,150 --> 00:45:38,080 Jadi aku akan menyimpan itu dan melakukan perintah yang sama dari sebelumnya untuk membuatnya. 768 00:45:38,080 --> 00:45:38,785 >> Baiklah. 769 00:45:38,785 --> 00:45:39,660 Dan sekarang apa yang terjadi? 770 00:45:39,660 --> 00:45:43,260 771 00:45:43,260 --> 00:45:43,760 Baik. 772 00:45:43,760 --> 00:45:45,801 Kami masih mengikuti tikus seperti sebelumnya, 773 00:45:45,801 --> 00:45:49,310 tapi ketika kita sampai ke mouse, kita punya jitter kotor ini. 774 00:45:49,310 --> 00:45:50,320 Apa yang sedang terjadi di sana? 775 00:45:50,320 --> 00:45:52,600 Nah, di vektor kami matematika, ingat kami 776 00:45:52,600 --> 00:45:57,540 mengambil jarak antara kursor dan tengah gambar? 777 00:45:57,540 --> 00:46:00,710 Nah, karena itu pendekatan 0, kita mulai mendapatkan 778 00:46:00,710 --> 00:46:06,280 seperti perilaku semacam ini gila di mana gambar adalah semacam 779 00:46:06,280 --> 00:46:08,910 seperti berosilasi di sekitar kursor. 780 00:46:08,910 --> 00:46:12,000 Dan itu membuat jitter ini. 781 00:46:12,000 --> 00:46:13,020 Dan itu benar-benar jelek. 782 00:46:13,020 --> 00:46:15,103 Dan Anda mungkin tidak ingin permainan Anda melakukan hal itu, 783 00:46:15,103 --> 00:46:17,350 kecuali itu semacam efek khusus. 784 00:46:17,350 --> 00:46:21,960 >> Jadi itu sebabnya kita memiliki hanya ini sewenang-wenang 785 00:46:21,960 --> 00:46:27,150 memotong lima piksel, di mana kita mengatakan jika dalam waktu lima piksel, kita baik. 786 00:46:27,150 --> 00:46:29,560 Kita tidak perlu memindahkan gambar lagi. 787 00:46:29,560 --> 00:46:32,260 Jadi itulah yang terjadi di sana. 788 00:46:32,260 --> 00:46:37,390 789 00:46:37,390 --> 00:46:40,870 >> Jadi itu cukup banyak itu. 790 00:46:40,870 --> 00:46:44,390 Anda sekarang tahu cara membuat jendela, memuat gambar, 791 00:46:44,390 --> 00:46:49,330 menggambar gambar ke jendela, dapatkan input keyboard, mendapatkan masukan mouse, 792 00:46:49,330 --> 00:46:52,190 ada sekelompok lainnya masukan bahwa Anda tidak akan 793 00:46:52,190 --> 00:46:56,070 tahu bagaimana untuk mendapatkan jika Anda hanya menghabiskan beberapa menit melihat dokumentasi. 794 00:46:56,070 --> 00:46:59,670 Jadi Anda benar-benar memiliki cukup Beberapa alat yang Anda inginkan sekarang 795 00:46:59,670 --> 00:47:01,650 untuk menulis permainan penuh. 796 00:47:01,650 --> 00:47:05,030 >> Sekarang, setiap pertandingan membutuhkan beberapa audio, tapi dokumentasi audio yang 797 00:47:05,030 --> 00:47:06,460 ini juga cukup bagus. 798 00:47:06,460 --> 00:47:09,200 Dan aku berani bertaruh bahwa jika Anda memahami semua hal 799 00:47:09,200 --> 00:47:14,560 kita berbicara tentang hari ini dengan gambar, dan permukaan, 800 00:47:14,560 --> 00:47:18,370 jendela, dan segala sesuatu, maka mencari tahu API audio tidak 801 00:47:18,370 --> 00:47:21,170 akan menjadi yang buruk. 802 00:47:21,170 --> 00:47:27,420 Jadi saya berharap untuk melihat apa yang Anda buat dengan SDL. 803 00:47:27,420 --> 00:47:31,595