1 00:00:00,000 --> 00:00:05,069 2 00:00:05,069 --> 00:00:06,110 THOMAS buhay na buhay na: Ang lahat ng karapatan. 3 00:00:06,110 --> 00:00:07,450 Hi, sa lahat. 4 00:00:07,450 --> 00:00:08,690 Ako Thomas Lively. 5 00:00:08,690 --> 00:00:15,160 Seminar na ito ay magiging pagsulat ng mga 2D na laro sa C gamit SDL. 6 00:00:15,160 --> 00:00:17,970 Kaya alam ko na ikaw ay ang lahat ng nagtatanong, oo, i really 7 00:00:17,970 --> 00:00:22,050 nais na i-play ang mga laro at gumawa ng mga laro, ngunit kung ano ito SDL negosyo? 8 00:00:22,050 --> 00:00:25,320 Kaya SDL ay isang C library. 9 00:00:25,320 --> 00:00:28,270 Ito ay kumakatawan sa mga Simple DirectMedia Layer. 10 00:00:28,270 --> 00:00:31,340 At ito ay isang cross platform, game library unlad. 11 00:00:31,340 --> 00:00:37,160 Ito ay gumagana sa Windows, Mac, Linux, kahit iOS at Android. 12 00:00:37,160 --> 00:00:40,380 Ito ay pinangangasiwaan ng mga bagay tulad ng access sa mga sistema ng audio 13 00:00:40,380 --> 00:00:44,900 para sa mga computer, ang keyboard, at mouse, joystick, kung sila ay naka-attach. 14 00:00:44,900 --> 00:00:48,300 Sa mobile, maaari ito kahit na gawin ang pindutin ang input at ang lahat ng iyon. 15 00:00:48,300 --> 00:00:53,030 At siyempre, humahawak ito graphics, pagguhit ng mga bagay sa screen. 16 00:00:53,030 --> 00:00:56,470 >> Kaya ito ay masyadong malawak na ginagamit, kahit na hindi mo maaaring may narinig ng mga ito bago. 17 00:00:56,470 --> 00:01:00,860 Ito ay binuo sa, halimbawa, Source engine balbula, 18 00:01:00,860 --> 00:01:04,970 kung saan ang kapangyarihan mga laro tulad ng Portal at Team Fortress 2. 19 00:01:04,970 --> 00:01:08,680 Ito din ay sa isang napakalaking bilang ng indie games na lumabas, 20 00:01:08,680 --> 00:01:13,545 kaya ako nasasabik upang makita kung ano ang iyong lahat ay ang paggawa ng mga ito. 21 00:01:13,545 --> 00:01:20,000 >> Ang mga layunin ay mga seminar upang makakuha ka nakalagay na bumubuo ng may SDL. 22 00:01:20,000 --> 00:01:22,700 Kami ay pagpunta upang malaman kung paano upang lumikha ng isang window ng laro. 23 00:01:22,700 --> 00:01:26,130 Kami ay pagpunta upang lumikha ng sprites, na kung saan ay ang mga imahe sa iyong mga laro 24 00:01:26,130 --> 00:01:27,744 na maaaring ilipat sa paligid. 25 00:01:27,744 --> 00:01:29,910 Kami ay pagpunta upang malaman kung paano sa at pagalawin ang mga sprites, 26 00:01:29,910 --> 00:01:32,910 kaya ilipat ang mga ito sa paligid, gumawa silang baguhin sa paglipas ng panahon. 27 00:01:32,910 --> 00:01:35,580 At kami ay pagpunta upang malaman kung paano upang makuha ang keyboard at mouse 28 00:01:35,580 --> 00:01:38,240 input mula sa computer. 29 00:01:38,240 --> 00:01:41,550 Ano ay hindi pinag-uusapan natin tungkol sa ngayon ay 3D graphics, 30 00:01:41,550 --> 00:01:45,520 dahil iyon ay isang napaka-komplikadong paksa na hindi namin ay may oras para sa. 31 00:01:45,520 --> 00:01:49,010 Hindi namin malaman kung paano i-play ang audio sa aming mga laro. 32 00:01:49,010 --> 00:01:53,300 At hindi namin gusali para sa anumang ngunit Linux. 33 00:01:53,300 --> 00:01:58,330 >> Ngayon ang caveats may mga iyon, sana, sa pagtatapos ng seminar, 34 00:01:58,330 --> 00:02:01,660 makikita mo ang kumportable sa ang dokumentasyon SDL, 35 00:02:01,660 --> 00:02:05,370 kaya makikita mo na pumunta malaman paano mag-play ng audio para sa iyong sarili. 36 00:02:05,370 --> 00:02:12,150 Gusali Gayundin para sa Mac o PC ay dapat na gumana eksaktong katulad ng gusali para sa Linux, 37 00:02:12,150 --> 00:02:14,700 ngunit ang setup pupuntahan maging isang maliit na naiiba. 38 00:02:14,700 --> 00:02:17,700 Kaya dapat mong malaman kung paano gawin ang mga bagay na 39 00:02:17,700 --> 00:02:20,900 sa pagtatapos ng seminar ngayong araw. 40 00:02:20,900 --> 00:02:26,980 >> Kaya para sa pag-set up, kami ay pagpunta na gumamit ng isang virtual machine. 41 00:02:26,980 --> 00:02:31,010 Nais naming gamitin ang CS50 IDE, dahil lang kami pupunta sa pagsusulat sa C. 42 00:02:31,010 --> 00:02:35,120 Ngunit dahil ang IDE ay hindi isang browser, namin hindi maaaring lumikha ng mga bagong window o display 43 00:02:35,120 --> 00:02:36,410 graphics sa loob nito. 44 00:02:36,410 --> 00:02:38,450 Kaya kailangan namin ng isang virtual machine. 45 00:02:38,450 --> 00:02:47,790 Kaya maaari mong sundin ang mga tagubilin dito sa manual.CS50.net/appliance/15 46 00:02:47,790 --> 00:02:53,290 upang i-install ang mga opisyal na CS50 appliance, na kung saan ay lamang ng isang virtual Linux 47 00:02:53,290 --> 00:02:55,110 machine. 48 00:02:55,110 --> 00:02:58,090 >> At pagkatapos ay sa sandaling ikaw ay may na-set ang lahat up-- ito 49 00:02:58,090 --> 00:03:02,090 Maaaring tumagal nang kaunti, dahil isang napakalaking download-- ikaw ay pagpunta 50 00:03:02,090 --> 00:03:07,060 upang tumakbo sa VM sudo apt-get update. 51 00:03:07,060 --> 00:03:09,410 At iyon ang tunay na nangyayari upang i-update ang lahat ng mga software 52 00:03:09,410 --> 00:03:12,670 mga pakete sa iyong mga virtual machine. 53 00:03:12,670 --> 00:03:20,130 >> Pagkatapos nito, kayo ay pagpunta upang tumakbo sudo apt-get-install, libsdl2-2.0-0, 54 00:03:20,130 --> 00:03:27,960 libsdl2-DBG, libsdl2-dev, at Karagdagan libsdl2-image-2.0-0, 55 00:03:27,960 --> 00:03:32,560 libsdl2-image-DBG, at libsdl2-image-dev. 56 00:03:32,560 --> 00:03:33,640 Kaya kung ano na gagawin? 57 00:03:33,640 --> 00:03:38,440 Nag-install na at wala na ang debug impormasyon, dokumentasyon, mga header, 58 00:03:38,440 --> 00:03:41,260 at binaries para sa dalawang mga aklatan. 59 00:03:41,260 --> 00:03:45,090 Regular old, SDL 2.0, at isa pang library 60 00:03:45,090 --> 00:03:50,110 tinatawag Image SDL, na kami ay pagpunta sa gumagamit 61 00:03:50,110 --> 00:03:54,560 upang i-load ang mga file ng imahe sa aming mga laro. 62 00:03:54,560 --> 00:03:57,860 >> Kaya sa sandaling mayroon na rin sa iyo na, lamang kapag ito nagtatanong, 63 00:03:57,860 --> 00:04:01,100 type mo lang oo, pindutin ang Enter mag-install ng mga pakete, 64 00:04:01,100 --> 00:04:04,430 at pagkatapos ay dapat maging handa na upang patakbuhin. 65 00:04:04,430 --> 00:04:14,800 Kaya upang makuha ang code na pamamahagi, ikaw can-- naku, ito ay hindi na-update. 66 00:04:14,800 --> 00:04:18,480 Maliban na lamang kung ikaw ay may isang GitHub account-- kung mayroon kang isang GitHub account, 67 00:04:18,480 --> 00:04:24,450 maaari mong gawin ito Git clone utos sa repo 68 00:04:24,450 --> 00:04:30,490 at na i-download ang Git repo sa lahat ng mga code sa mga ito, 69 00:04:30,490 --> 00:04:31,700 sa gayon ay magkakaroon ka ng code. 70 00:04:31,700 --> 00:04:36,470 >> Kung hindi ka magkaroon ng isang GitHub account, ano ang dapat mong gawin ay i-type 71 00:04:36,470 --> 00:04:48,867 wgithttps: //github.com/tlively/sdl seminar-- at dito ito ay 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 Kaya muli, na ang eksaktong parehong URL, maliban ito ay magiging 75 00:04:59,220 --> 00:05:09,010 tlively / SDL_seminar / master.zip at gumagamit ka ng wgit upang i-download na. 76 00:05:09,010 --> 00:05:12,940 At pagkatapos ay maaari mo lamang magsiper na archive 77 00:05:12,940 --> 00:05:14,900 at pagkatapos ay magkakaroon ka ng lahat ng mga source code. 78 00:05:14,900 --> 00:05:17,580 Kaya paumanhin tungkol sa na. 79 00:05:17,580 --> 00:05:23,880 At pagkatapos ay ang code ay din ay naka-host sa web page CS50 seminar sa isang pares 80 00:05:23,880 --> 00:05:25,230 araw. 81 00:05:25,230 --> 00:05:26,590 >> Lahat tama. 82 00:05:26,590 --> 00:05:29,932 Kaya paano natin umpisahan pagsusulat ng aming sariling mga laro? 83 00:05:29,932 --> 00:05:31,890 Well, ang unang bagay kami ay pagpunta sa gusto mong gawin 84 00:05:31,890 --> 00:05:34,740 ay tingnan ang SDL babasahin. 85 00:05:34,740 --> 00:05:37,020 Kaya dito ang VM. 86 00:05:37,020 --> 00:05:38,720 At narito ang mga web page. 87 00:05:38,720 --> 00:05:40,340 Na nag-navigate kong mabuhay libsdl.org. 88 00:05:40,340 --> 00:05:43,110 89 00:05:43,110 --> 00:05:48,140 Ano ako pagpunta sa gawin dito ay pumunta sa paglipas ng sa sidebar, sa ilalim ng mga babasahin, 90 00:05:48,140 --> 00:05:51,040 at i-click ang wiki. 91 00:05:51,040 --> 00:05:56,870 Ito ay magdadala sa akin sa wiki na may karamihan ng mga babasahin para sa SDL. 92 00:05:56,870 --> 00:06:01,360 Higit sa sidebar dito, hindi namin pagpunta sa i-click ang API sa pamamagitan ng kategorya, 93 00:06:01,360 --> 00:06:04,300 dahil ay upang mabigyan kami ng isang magaling pasubali na view 94 00:06:04,300 --> 00:06:07,770 ng buong API para SDL. 95 00:06:07,770 --> 00:06:12,390 >> Kaya halimbawa, mayroon kaming ang pangunahing Pinasimulan 96 00:06:12,390 --> 00:06:18,380 at shut down, ang lahat ng mga uri ng mga administrative mga bagay-bagay para sa paggamit ng SDL, 97 00:06:18,380 --> 00:06:21,630 at pagkatapos kami ay may mga seksyon para sa pagpapakita ng mga bagay sa screen. 98 00:06:21,630 --> 00:06:23,000 Iyon ang video. 99 00:06:23,000 --> 00:06:25,790 Input mga kaganapan, na ang pagkuha input mula sa keyboard, 100 00:06:25,790 --> 00:06:29,710 pagkuha ng input mula sa mouse, at ang joystick, kung mayroon ka nito kahit. 101 00:06:29,710 --> 00:06:32,901 May lakas ng feedback para sa mga bagay tulad ng laro controllers, na 102 00:06:32,901 --> 00:06:34,150 hindi namin pagpunta sa makipag-usap tungkol sa. 103 00:06:34,150 --> 00:06:35,630 At narito ang audio. 104 00:06:35,630 --> 00:06:38,940 At pagkatapos ay may isang bungkos ng iba pang mga mga bagay-bagay na maaaring gawin SDL para sa iyo. 105 00:06:38,940 --> 00:06:43,830 >> Ngunit ngayon kami ay pagpunta sa focus sa Pinasimulan dito, 106 00:06:43,830 --> 00:06:48,332 pagpapakita ng mga larawan sa video seksyon, at paghawak ng mga kaganapan ng input. 107 00:06:48,332 --> 00:06:50,290 Kaya ito ang mga pangunahing seksyon ng mga babasahin 108 00:06:50,290 --> 00:06:53,050 na dapat ay nababahala tungkol sa. 109 00:06:53,050 --> 00:06:57,170 Katuwaan lang, kung pumunta kami sa paglipas ng dito at mag-click sa API sa pamamagitan ng pangalan, 110 00:06:57,170 --> 00:07:04,350 maaari naming makita ang isang listahan ng bawat solong bagay sa SDL library. 111 00:07:04,350 --> 00:07:11,330 Kaya ang lahat ng mga function, enumerations, kaayusan, isang mabaliw halaga ng mga bagay-bagay, 112 00:07:11,330 --> 00:07:12,820 alpabetikong order. 113 00:07:12,820 --> 00:07:14,580 At malinaw, hanggang sa alam mo ang ginagawa mo, 114 00:07:14,580 --> 00:07:19,100 na ito ay hindi magiging masyadong helpful, na kung saan ay kung bakit namin API sa pamamagitan ng kategorya. 115 00:07:19,100 --> 00:07:20,810 >> Kaya sabihin makapagsimula. 116 00:07:20,810 --> 00:07:25,680 Sana na sa iyo na download na ang code sa pamamahagi. 117 00:07:25,680 --> 00:07:30,070 At kaya kung ano ang maaari mong gawin ay, right dito sa CS50 appliance, 118 00:07:30,070 --> 00:07:31,150 buksan lamang ang isang terminal. 119 00:07:31,150 --> 00:07:33,750 120 00:07:33,750 --> 00:07:34,440 Ayan na naman. 121 00:07:34,440 --> 00:07:40,740 Kaya na-download ko ang code distribution gamit ang .zip 122 00:07:40,740 --> 00:07:41,690 method. 123 00:07:41,690 --> 00:07:43,140 At unzipped ko na ito. 124 00:07:43,140 --> 00:07:46,120 Kaya dito ito ay sa SDL seminar master. 125 00:07:46,120 --> 00:07:49,750 Kaya ako pagpunta sa pumunta sa directory na iyon. 126 00:07:49,750 --> 00:07:55,310 At ano ang nakikita natin dito ay na kami ay may pitong C file. 127 00:07:55,310 --> 00:07:58,070 At ito ay pagpunta sa code kami ay pagpunta sa tumitingin ka sa araw na ito. 128 00:07:58,070 --> 00:08:00,040 Kami ay may isang makefile. 129 00:08:00,040 --> 00:08:06,950 At kami ay may isang direktoryo na yaman, kung saan ay may lamang ng isang imahe 130 00:08:06,950 --> 00:08:09,070 na ikaw ay nakakakita sa lalong madaling panahon sapat. 131 00:08:09,070 --> 00:08:16,060 >> Kaya ng magbukas ng mga file na ito ipaalam gamit ang G-edit editor. 132 00:08:16,060 --> 00:08:22,000 Kaya gusto ko upang buksan ang lahat ng mga file na magsimula sa hello at magtapos sa c. 133 00:08:22,000 --> 00:08:23,380 Ayan na naman. 134 00:08:23,380 --> 00:08:28,180 Kaya na ang isang maliit na maliit na window, kaya hindi namin pagpunta sa subukan na gumawa na ng mas malaki. 135 00:08:28,180 --> 00:08:28,900 Hindi, ito ay umalis. 136 00:08:28,900 --> 00:08:32,836 137 00:08:32,836 --> 00:08:34,570 >> Lahat tama. 138 00:08:34,570 --> 00:08:37,959 Kaya dito ay ang pinakaunang file kami ay pagpunta sa tumingin sa. 139 00:08:37,959 --> 00:08:39,000 Ito ay tinatawag na hello1_sdl.c. 140 00:08:39,000 --> 00:08:41,890 141 00:08:41,890 --> 00:08:47,980 At lahat ng ito ay ay magpasimula ng SDL library upang maaari naming simulan ang paggamit nito. 142 00:08:47,980 --> 00:08:51,550 Paano mo malalaman na dumating up sa iyong sarili ang code na ito? 143 00:08:51,550 --> 00:08:53,850 Well, kung tiningnan namin sa paglipas ng ang dokumentasyon 144 00:08:53,850 --> 00:08:58,040 at pumunta kami sa Pinasimulan at shut down na seksyon, 145 00:08:58,040 --> 00:09:02,230 ito ay pagpunta sa sabihin sa amin ang lahat ng tungkol sa kung paano magpasimula SDL. 146 00:09:02,230 --> 00:09:06,630 Kaya basahin ang tiyak na ito sa ibang panahon. 147 00:09:06,630 --> 00:09:09,230 Ito ay pagpunta sa sabihin sa iyo ang lahat tungkol sa kung ano ang nangyayari sa dito. 148 00:09:09,230 --> 00:09:14,360 Ngunit ang pangunahing puno ng problema ay na kailangan naming tawagan ang function na ito SDL Sa Ito 149 00:09:14,360 --> 00:09:18,910 at pumasa ito sa kung ano ang mga uri ng mga bagay-bagay Gusto namin ang mga library upang magpasimula. 150 00:09:18,910 --> 00:09:23,620 Kaya sa aming kaso, lang kami upang magpasimula ng video para sa ngayon, 151 00:09:23,620 --> 00:09:26,690 sa gayon ay maaari simulan namin ipinapakita ang mga imahe. 152 00:09:26,690 --> 00:09:32,370 >> Higit dito, maaari mong makita kung namin mag-click sa isang SDL In It, namin 153 00:09:32,370 --> 00:09:36,160 ay maaaring makakuha ng mas higit pang impormasyon, kasama na ang mga halaga ng pagbabalik. 154 00:09:36,160 --> 00:09:39,050 Kaya makikita natin dito na ito returnes zero sa tagumpay. 155 00:09:39,050 --> 00:09:43,320 Kaya sa aming code, kami ay pagpunta sa makita kung ito ay hindi bumalik sa zero, 156 00:09:43,320 --> 00:09:47,020 at kung ito ay hindi bumalik zero, kaya ito ay hindi matagumpay, 157 00:09:47,020 --> 00:09:50,650 pagkatapos kami ay pagpunta upang lamang i-print ng isang error gamit ang iba pang mga function, 158 00:09:50,650 --> 00:09:56,260 SDL error get, na nagbabalik ng isang string naglalarawan ng mga error na naganap. 159 00:09:56,260 --> 00:09:58,510 Kami ay pagpunta sa i-print na error at pagkatapos ay hindi namin lamang 160 00:09:58,510 --> 00:10:02,270 pagpunta sa lumabas sa programa na may isang error code. 161 00:10:02,270 --> 00:10:06,470 >> Pagkatapos ng isa pang bagay na kailangan namin gawin ay, bago labasan program, 162 00:10:06,470 --> 00:10:10,830 kung matagumpay naming initialize SDL, kailangan lang namin sa tawag na ito umalis SDL. 163 00:10:10,830 --> 00:10:15,750 At na ang pagpunta sa hawakan paglilinis up lahat ng mga panloob na mga mapagkukunan SDL para sa atin. 164 00:10:15,750 --> 00:10:21,240 Kaya ang mga babasahin there-- muli, dito tayo sa Pinasimulan 165 00:10:21,240 --> 00:10:23,640 at shut down na seksyon ng mga babasahin. 166 00:10:23,640 --> 00:10:26,680 Maaari mong i-click lamang sa function na dito, SDL umalis, 167 00:10:26,680 --> 00:10:28,700 at maaari mong basahin ang lahat ng tungkol na rin. 168 00:10:28,700 --> 00:10:31,400 At ng maraming mga pag-andar dokumentasyon na pahina 169 00:10:31,400 --> 00:10:35,630 Mayroon halimbawa code, kaya ito ay tunay mabuti resource. 170 00:10:35,630 --> 00:10:39,610 Talagang gumastos ng ilang oras pagbabasa ng mga bahagi ng mga ito wiki 171 00:10:39,610 --> 00:10:42,520 kung ikaw ay pagpunta sa gawin na ito para sa isang proyekto. 172 00:10:42,520 --> 00:10:43,760 >> Lahat tama. 173 00:10:43,760 --> 00:10:46,590 Kaya na ang aming buong programa. 174 00:10:46,590 --> 00:10:53,935 Ano ang maaari naming gawin ngayon is-- Ako pagpunta upang buksan ang makefile dito, 175 00:10:53,935 --> 00:10:56,150 kaya ako pagpunta sa tumagal ng isang tumingin sa kung paano na gumagana. 176 00:10:56,150 --> 00:10:59,500 At ito ay isang napaka-simpleng makefile, katulad ng kung ano ang iyong nakita bago. 177 00:10:59,500 --> 00:11:04,010 Isa sa mga pangunahing pagkakaiba ay na, dito, ito 178 00:11:04,010 --> 00:11:07,870 ay pagpunta sa ipasok ang resulta ng pagtakbo ang utos na ito, na kung saan na sa iyo na 179 00:11:07,870 --> 00:11:10,850 naka-install na kung na-install SDL. 180 00:11:10,850 --> 00:11:13,230 At ito ay isang utos na pagpunta sa bumuo ng 181 00:11:13,230 --> 00:11:16,710 ilang dagdag na mga flag para sa mga compiler. 182 00:11:16,710 --> 00:11:22,050 >> Bilang karagdagan sa na, kami ay nagbibigay ito lahat ng mga karaniwang mga utos, pati na rin 183 00:11:22,050 --> 00:11:23,430 mga dalawang utos. 184 00:11:23,430 --> 00:11:30,270 Kaya ang mga hawakan -lsdl2-image nagli-link sa SDL library ng larawan. 185 00:11:30,270 --> 00:11:36,200 At ang -lm tunay na humahawak sa pag-uugnay sa standard C math library. 186 00:11:36,200 --> 00:11:40,630 Kaya hindi namin ay pagpunta sa kailangan mga para sa lahat ng aming mga C file, 187 00:11:40,630 --> 00:11:43,900 ngunit ilagay ang mga ito pa lang namin sa gayon maaari naming gamitin ang parehong makefile para sa lahat 188 00:11:43,900 --> 00:11:44,816 walang pagbabago. 189 00:11:44,816 --> 00:11:46,970 190 00:11:46,970 --> 00:11:50,080 >> Sa paglipas dito sa mga pinagkukunan, ito ay kung saan Gusto mo 191 00:11:50,080 --> 00:11:53,680 ilagay ang mga file na ikaw ay pagpunta sumulat ng libro para sa iyong proyekto. 192 00:11:53,680 --> 00:11:57,570 Ngunit, dahil ang bawat isa sa aking C file dito ay may isang pangunahing pag-andar, 193 00:11:57,570 --> 00:12:00,000 ito ay pagpunta upang makakuha ng nalilito kung namin ilagay ito lahat sa. 194 00:12:00,000 --> 00:12:06,930 Kaya pupuntahan ko lamang na sabihin, para sa ngayon, hello1_sdl.c, 195 00:12:06,930 --> 00:12:11,150 kung saan ay ang isa namin lamang ay tumingin sa. 196 00:12:11,150 --> 00:12:18,740 Kaya kung pumunta ako pabalik sa paglipas ng dito, maaari ko gumawa. 197 00:12:18,740 --> 00:12:22,160 At kung ano ito ginawa ay ito lamang pinagsama-sama na ang unang file. 198 00:12:22,160 --> 00:12:28,780 At pagkatapos ay maaari naming i-type ./game, dahil ito ay ang mga maipapatupad na ito ginawa. 199 00:12:28,780 --> 00:12:31,660 At lahat ng ito ay ay print matagumpay Pinasimulan. 200 00:12:31,660 --> 00:12:33,300 Kaya ginawa namin ang isang bagay kanan. 201 00:12:33,300 --> 00:12:36,200 Ngunit na uri ng panganganak, dahil hindi namin makita ang isang window, 202 00:12:36,200 --> 00:12:37,900 walang ay gumagalaw sa paligid. 203 00:12:37,900 --> 00:12:41,030 >> Kaya mahusay, nakuha namin SDL nasimulan. 204 00:12:41,030 --> 00:12:43,520 Ngayon, ilipat sa isang bagay hayaan isang maliit na mas kawili-wili. 205 00:12:43,520 --> 00:12:54,700 Kaya dito kami hello2_window.c, at ito ay magiging isang bahagyang mas 206 00:12:54,700 --> 00:13:00,010 complex program C na initializes SDL tulad ng dati, 207 00:13:00,010 --> 00:13:04,250 maliban na rin ngayon kami ay pagpunta upang magpasimula timer SDL. 208 00:13:04,250 --> 00:13:07,720 At ito ay pagpunta sa ipaalam sa amin ma-access ang mga panloob na timer 209 00:13:07,720 --> 00:13:10,550 at paggamit function na may kaugnayan sa oras. 210 00:13:10,550 --> 00:13:11,920 >> At tingnan natin pababa dito pagkatapos ay hayaan. 211 00:13:11,920 --> 00:13:16,840 Ano ang ginagawa namin ay taglay namin ang pointer sa isang SDL window struct, na 212 00:13:16,840 --> 00:13:21,160 ay pagpunta sa malikha sa pamamagitan ng tawag na ito sa function, SDL lumikha ng window. 213 00:13:21,160 --> 00:13:25,380 Ngayon, ito ay tumatagal ng maraming mga argumento, kaya pumunta tingnan ang dokumentasyon ipaalam. 214 00:13:25,380 --> 00:13:27,930 Kaya muli, pupuntahan ko API sa pamamagitan ng kategorya, ako 215 00:13:27,930 --> 00:13:33,820 babaan sa video dito, at ang unang seksyon, pagpapakita ng pamamahala window. 216 00:13:33,820 --> 00:13:36,470 Kaya ang seksyon na ito ay may isang tonelada ng mga bagay-bagay sa loob nito, 217 00:13:36,470 --> 00:13:39,970 ngunit kung titingnan mo sa pamamagitan ng mga function na ito, makikita mo 218 00:13:39,970 --> 00:13:43,620 makita na marahil ang isa namin nais ay tinatawag SDL lumikha ng window, 219 00:13:43,620 --> 00:13:46,600 na ang mangyayari sa kanan sa itaas. 220 00:13:46,600 --> 00:13:49,080 >> At kaya ito ay ang babasahin para sa function na ito. 221 00:13:49,080 --> 00:13:53,710 Ang bintana ay pagpunta sa magkaroon ng isang pamagat, isang x at y posisyon sa screen, 222 00:13:53,710 --> 00:13:56,960 ito ay pagpunta sa magkaroon ng isang lapad, taas, at pagkatapos ito ay pagpunta sa tumagal ng ilang mga flag. 223 00:13:56,960 --> 00:14:01,220 Ngayon, kami ay hindi aktwal na pag-aalaga tungkol anuman sa mga flags sa ngayon, 224 00:14:01,220 --> 00:14:04,560 ngunit kung nais mong gawin ang isang bagay tulad ng gumawa ng isang full screen window, 225 00:14:04,560 --> 00:14:07,920 maaari kang kumuha ng isang pagtingin sa na. 226 00:14:07,920 --> 00:14:13,190 Para sa ngayon, lamang kami ay pagpunta na gamitin ang mga espesyal na mga halaga, 227 00:14:13,190 --> 00:14:18,775 SDL window plus nakasentro para sa x at y sa order 228 00:14:18,775 --> 00:14:21,800 upang lumikha lamang ang window sa gitna ng aming mga screen. 229 00:14:21,800 --> 00:14:24,370 >> Kaya na kung ano na ang ginagawa. 230 00:14:24,370 --> 00:14:27,960 At kung window mangyayari sa maging null, ibig sabihin ay may isang error, 231 00:14:27,960 --> 00:14:32,570 pagkatapos ay muli na lang kami ng pagpunta sa i-print ang mga error gamit SDL get error. 232 00:14:32,570 --> 00:14:36,570 At pagkatapos ay sapagkat hindi namin nasimulan SDL, kailangan namin ngayon upang isara ito. 233 00:14:36,570 --> 00:14:40,900 Kaya ang tawag namin sa SDL umalis bago pagbabalik ng isa para sa main. 234 00:14:40,900 --> 00:14:42,905 >> Kaya mayroon kaming buksan ang window na ito sana. 235 00:14:42,905 --> 00:14:44,613 At kung ano ang namin ang pagpunta gawin ay kami ay pagpunta 236 00:14:44,613 --> 00:14:50,340 upang tumawag SDL para sa 5,000 milliseconds, na kung saan ay ang parehong bilang ng limang segundo. 237 00:14:50,340 --> 00:14:55,640 At kapag tapos na kami sa mga iyon, ito ay pagpunta sa sirain ang window, 238 00:14:55,640 --> 00:14:59,470 linisin ang SDL library, at lumabas sa programa. 239 00:14:59,470 --> 00:15:05,240 Kaya sabihin sige at bigyan na ng isang shot. 240 00:15:05,240 --> 00:15:08,660 >> Kaya ngayon sa halip ng pagpapalit ang makefile sa bawat oras, 241 00:15:08,660 --> 00:15:12,180 Maaari ko lang gawin, at pagkatapos ay sa command line, 242 00:15:12,180 --> 00:15:16,090 pinagkukunan sabihin ay katumbas at pagkatapos ay ang file namin ay ipon. 243 00:15:16,090 --> 00:15:17,090 Kaya ito ay hello2_window.c. 244 00:15:17,090 --> 00:15:21,390 245 00:15:21,390 --> 00:15:21,890 Hindi kapani-paniwala. 246 00:15:21,890 --> 00:15:22,970 Walang erros. 247 00:15:22,970 --> 00:15:26,085 Ngayon, kung nagpapatakbo namin ang aming mga executable, nakita namin ang window na ito. 248 00:15:26,085 --> 00:15:27,960 Ngayon may mga ilang problema sa window. 249 00:15:27,960 --> 00:15:32,820 Maaari naming ilipat ito sa paligid, ngunit ito ay ito background junk loob ng mga ito. 250 00:15:32,820 --> 00:15:34,660 Kaya hindi pa namin na iginuhit kahit ano, at sa gayon ito ay 251 00:15:34,660 --> 00:15:38,210 lamang na puno ng basura, na kung saan ay medyo marami kung ano ang inaasahan namin. 252 00:15:38,210 --> 00:15:41,010 >> Bukod dito, hindi namin maaaring isara ang window. 253 00:15:41,010 --> 00:15:44,780 Ako pagpindot ito X sa corner at wala ang nangyayari. 254 00:15:44,780 --> 00:15:47,840 Kaya makikita namin makita kung paano ayusin na sa ilang sandali. 255 00:15:47,840 --> 00:15:51,750 Kaya natin ayusin ang mga bahagi ipaalam kung saan ang window ay puno ng basura unang. 256 00:15:51,750 --> 00:16:00,850 Kaya kung kami ay dumaan sa hello3_image.c, kung ano maaari naming makita na na nagdagdag kami ng ilang 257 00:16:00,850 --> 00:16:03,360 higit pang mga bagay dito. 258 00:16:03,360 --> 00:16:08,740 Nagdagdag kami ang bagong header maghain upang makuha ang timer function. 259 00:16:08,740 --> 00:16:11,490 Hulaan ko ang ginawa namin na sa mga huling isa rin, at ako ay hindi banggitin ito. 260 00:16:11,490 --> 00:16:13,550 Ngunit ngayon dahil hindi namin nagtatrabaho sa mga imahe, 261 00:16:13,550 --> 00:16:18,720 kailangan naming isama ang SDL header na file ng imahe pati na rin. 262 00:16:18,720 --> 00:16:22,087 Kaya ito ay ang parehong bagay bilang bago, Sinisimulan SDL dito, 263 00:16:22,087 --> 00:16:23,420 parehong pakikitungo sa paglikha ng mga bintana. 264 00:16:23,420 --> 00:16:25,380 Nakita namin na ang bago ngayon. 265 00:16:25,380 --> 00:16:29,870 >> Ngayon kailangan namin upang lumikha ng isang bagay na tinatawag na isang renderer, na kung saan ang uri ng napupunta kasama 266 00:16:29,870 --> 00:16:30,800 sa window. 267 00:16:30,800 --> 00:16:33,860 Ngunit ito ay isang uri ng abstract object na 268 00:16:33,860 --> 00:16:37,370 sa singil ng paggawa ng lahat ng mga pagguhit ng mga operasyon sa mga window. 269 00:16:37,370 --> 00:16:41,580 At ito ang tunay na tumutugon sa isang programa na-load 270 00:16:41,580 --> 00:16:47,880 sa graphics hardware sa iyong computer o sa iyong telepono o anuman. 271 00:16:47,880 --> 00:16:51,005 Kaya ang mga flag na gusto naming ipasa it-- at maaari mong tingnan ang dokumentasyon 272 00:16:51,005 --> 00:16:56,160 upang makakuha ng mas maraming mga detalye here-- ay pagpunta na SDL render pinabilis, na 273 00:16:56,160 --> 00:16:58,550 ang ibig sabihin nito ay magiging gamit ang graphics hardware 274 00:16:58,550 --> 00:17:01,490 at hindi lamang nakukuha sa software. 275 00:17:01,490 --> 00:17:07,390 >> At kami ay pagpunta upang gamitin ang SDL renderer PRESENTVSYNC. 276 00:17:07,390 --> 00:17:12,280 VSYNC ay isang bagay na lamang ay gumagawa ng iyong graphics magmukhang mas mahusay at pinipigilan 277 00:17:12,280 --> 00:17:14,970 ito bagay na tinatawag na screen malaking takot, kung saan ang kalahati 278 00:17:14,970 --> 00:17:17,720 ng isang frame at ang kalahati sa mga susunod na frame makakuha ng diwa at sa parehong oras 279 00:17:17,720 --> 00:17:20,056 at mukha itong kakila-kilabot. 280 00:17:20,056 --> 00:17:23,130 Subalit muli, maaari kang pumunta basahin tungkol na sa inyong sarili. 281 00:17:23,130 --> 00:17:24,319 >> Kaya mayroon kaming ilang mga flag dito. 282 00:17:24,319 --> 00:17:27,810 At kaya lang namin ang pagpunta sa tumawag sa mga function na ito SDL lumikha ng renderer. 283 00:17:27,810 --> 00:17:31,340 Kami ay pagpunta sa bigyan ito ang window upang iugnay sa na taga-render. 284 00:17:31,340 --> 00:17:34,520 Negatibong isa ay nangangahulugan na hindi namin pag-aalaga kung ano ang driver ng graphics kami ay pagpunta sa gamitin. 285 00:17:34,520 --> 00:17:36,603 Kaya dapat na medyo marami na palaging negatibo ang isa, 286 00:17:36,603 --> 00:17:39,010 maliban kung alam mo ang tungkol sa graphics driver. 287 00:17:39,010 --> 00:17:41,650 At pagkatapos lamang kami ay pagpunta upang pumasa ito sa aming mga flag. 288 00:17:41,650 --> 00:17:47,240 Kaya kung na nagbabalik null, pagkatapos namin upang i-print ang mga error tulad ng dati, 289 00:17:47,240 --> 00:17:49,550 ngunit pagkatapos ay din namin ang pagpunta upang sirain ang window 290 00:17:49,550 --> 00:17:54,970 upang linisin ang mga mapagkukunan bago pagtawag SDL umalis at bumabalik. 291 00:17:54,970 --> 00:17:58,110 >> Ngayon, ang mga kagiliw-giliw na bahagi dito ay kung saan-load namin ang aming mga imahe 292 00:17:58,110 --> 00:18:00,870 gamit ang function na ito IMG_load. 293 00:18:00,870 --> 00:18:04,050 Ito ay ang tanging pag-andar kami ay pagpunta gamitin mula sa SDL library ng larawan. 294 00:18:04,050 --> 00:18:05,480 Ito ay ang isa lamang na kailangan namin. 295 00:18:05,480 --> 00:18:12,950 Ito ay isang function na tumatagal ang string iyon ay ang landas ng anumang mga mapagkukunan ng imahe. 296 00:18:12,950 --> 00:18:18,024 At ito ay maaaring maging isang .png, isang GIF, bitmap, anuman ang mga bagay-bagay. 297 00:18:18,024 --> 00:18:19,690 At iyon ang dahilan kung bakit ang function na ito ay kaya maganda. 298 00:18:19,690 --> 00:18:22,560 Ito ay maaaring humawak ng halos anumang format. 299 00:18:22,560 --> 00:18:27,240 Naglo-load ito sa memory at mga tindahan na ito parang isang bagay na tinatawag na isang SDL surface. 300 00:18:27,240 --> 00:18:34,660 >> Ngayon isang SDL ibabaw ay lamang ng isang struct na kumakatawan sa data ng imahe sa memorya. 301 00:18:34,660 --> 00:18:38,054 Kaya maaari mong basahin ang higit pa tungkol sa na sa papeles dalawa. 302 00:18:38,054 --> 00:18:40,720 At kung ang mga error na ito, at pagkatapos ay hindi namin pagpunta sa gawin ang buong bagay na kung saan ang 303 00:18:40,720 --> 00:18:44,480 print namin ang error, isara ang aming resources, at pagkatapos ay umalis sa programa. 304 00:18:44,480 --> 00:18:48,970 Ngayon ang mga kagiliw-giliw na bagay ay, bago maaari naming gumuhit ng imahe na ito sa window, 305 00:18:48,970 --> 00:18:51,390 kailangan namin upang aktwal na gawin itong isang texture. 306 00:18:51,390 --> 00:18:54,460 Ngayon isang texture tumutugma sa data ng imahe load 307 00:18:54,460 --> 00:18:57,820 sa memory hardware sa graphic ni. 308 00:18:57,820 --> 00:19:00,720 >> Kaya isang ibabaw ay nasa main memory, regular memory 309 00:19:00,720 --> 00:19:05,550 na hindi namin ginagamit ang lahat ng semestre, at isang texture ay nasa ito hiwalay VRAM 310 00:19:05,550 --> 00:19:09,410 memory na ang mga kontrol graphics card. 311 00:19:09,410 --> 00:19:13,170 Kaya ang tawag namin sa mga function na ito SDL_CreateTextureFromSurface. 312 00:19:13,170 --> 00:19:17,104 Bigyan namin ito sa aming mga taga-render at ang aming mga ibabaw. 313 00:19:17,104 --> 00:19:19,020 At pagkatapos ay hindi namin talaga tapos na sa ibabaw, 314 00:19:19,020 --> 00:19:20,311 kaya lang kami sa libreng ito. 315 00:19:20,311 --> 00:19:22,210 Hindi natin kailangan ito ngayon. 316 00:19:22,210 --> 00:19:26,650 At pagkatapos ay sa gayon kung ang tawag na ito errored at bumalik null, 317 00:19:26,650 --> 00:19:29,630 pagkatapos kami ay pagpunta sa gawin ang buong error sa pag-uulat muli bagay. 318 00:19:29,630 --> 00:19:30,920 >> Lahat tama. 319 00:19:30,920 --> 00:19:34,810 Dito, na nakukuha namin sa ilang mga aktwal na pag-andar na pag-render. 320 00:19:34,810 --> 00:19:37,730 Kaya pagtawag SDL_RenderClear at pasado ito 321 00:19:37,730 --> 00:19:42,550 ang taga-render na nauugnay sa aming mga window gumagawa lang ng window pumunta itim. 322 00:19:42,550 --> 00:19:47,650 Kaya ito ay nagtanggal na junk na nakita natin sa ang aming window bago at ginagawang itim. 323 00:19:47,650 --> 00:19:50,750 At pagkatapos kami ay pagpunta upang tumawag SDL_RenderCopy, 324 00:19:50,750 --> 00:19:53,010 bigyan ito ng aming renderer, ang aming mga texture. 325 00:19:53,010 --> 00:19:55,800 At kami ay makipag-usap tungkol sa kung ano mga patlang na ito ay nasa isang bit. 326 00:19:55,800 --> 00:19:57,830 Ngunit na pagpunta sa kunin ang data texture 327 00:19:57,830 --> 00:20:03,100 at kopyahin ito papunta sa aming window upang gumuhit ng mga larawan. 328 00:20:03,100 --> 00:20:07,020 Kaya pagkatapos naming nagawa mo na ito ng kopya ang data papunta sa aming mga window, 329 00:20:07,020 --> 00:20:11,180 kami ay may sa gawin ito ng karagdagang pag-andar tinatawag SDL_RenderPresent. 330 00:20:11,180 --> 00:20:15,360 >> At ito ay kagiliw-giliw dahil ito ay makakakuha ng 331 00:20:15,360 --> 00:20:18,770 sa isang paksa tinatawag double buffering. 332 00:20:18,770 --> 00:20:24,380 Kaya double buffering ay isang pamamaraan na gumagawa ng iyong graphics ng maraming mas mahusay na hitsura. 333 00:20:24,380 --> 00:20:28,240 Muli, ito ay pumipigil na screen tearing Kausap ko tungkol sa mas maaga, kung saan 334 00:20:28,240 --> 00:20:29,590 mayroon kang dalawang buffer. 335 00:20:29,590 --> 00:20:32,260 Mayroong isang pabalik buffer in memory at isang harap buffer. 336 00:20:32,260 --> 00:20:36,410 Ang harap buffer ay literal ano ang nasa iyong screen sa ngayon. 337 00:20:36,410 --> 00:20:42,070 Kaya ang ginagawa namin ang lahat ng mga gumuhit pagkakaiba-iba, tulad SDL render kopya o SDL_RenderClear 338 00:20:42,070 --> 00:20:43,080 sa likod buffer. 339 00:20:43,080 --> 00:20:44,800 So baguhin nila ang mga bagay sa likod buffer. 340 00:20:44,800 --> 00:20:48,970 Dito maaaring pagguhit namin ito green square sa buffer likod. 341 00:20:48,970 --> 00:20:52,300 >> Kaya nga kapag tapos na kami sa paggawa ng aming render operasyon, na 342 00:20:52,300 --> 00:20:55,700 Maaaring tumagal ng isang tunay na matagal na panahon, kung ano ang namin ang pagpunta sa gawin 343 00:20:55,700 --> 00:20:57,860 ay lumipat sa buffer. 344 00:20:57,860 --> 00:21:00,720 Kaya ito literal lamang tumatagal ang front buffer at ang buffer likod 345 00:21:00,720 --> 00:21:02,990 at switch ang mga ito, kaya na iyon, agad na, 346 00:21:02,990 --> 00:21:06,630 sa isang operasyon, sa halip ng marahil daan-daan o libu-libo, 347 00:21:06,630 --> 00:21:10,910 lahat ng aming mga bagong render bagay ang nasa screen. 348 00:21:10,910 --> 00:21:13,160 At ito ang humahadlang sa mga bagay-bagay tulad ng mga nagre-refresh ng screen 349 00:21:13,160 --> 00:21:16,710 kapag lamang namin ang iginuhit half ng aming mga bagay para sa mga frame. 350 00:21:16,710 --> 00:21:21,280 Kaya na ang dahilan kung bakit kailangan namin upang tumawag SDL_RenderPresent, pati na rin 351 00:21:21,280 --> 00:21:23,320 bilang SDL_RenderCopy. 352 00:21:23,320 --> 00:21:25,749 >> Muli, lamang kami ay pagpunta maghintay para sa limang segundo. 353 00:21:25,749 --> 00:21:27,540 Pagkatapos kami ay pagpunta sa linisin ang aming mga mapagkukunan. 354 00:21:27,540 --> 00:21:29,540 Kami ay may lubos ng ilang higit pang mga oras na ito. 355 00:21:29,540 --> 00:21:31,750 At pagkatapos lamang kami ay pagpunta upang lumabas mula sa program. 356 00:21:31,750 --> 00:21:35,350 Kaya sabihin gawin iyon. 357 00:21:35,350 --> 00:21:41,880 Pupunta ako mag-type ng gumawa, at pagkatapos ay pinagmumulan katumbas hello-- ito ay 3image.c ngayon. 358 00:21:41,880 --> 00:21:49,632 359 00:21:49,632 --> 00:21:52,240 Lahat ng karapatan, na pinagsama-sama sa walang mga error. 360 00:21:52,240 --> 00:21:57,210 At maaari mong makita dito na hindi ko na ngayon inilabas ang aking image, Hello, CS50! 361 00:21:57,210 --> 00:22:00,560 sa aming mga window, na kung saan mawala pagkatapos ng limang segundo. 362 00:22:00,560 --> 00:22:02,090 >> Ngayon, ito ay mayroon pa ring problema, di ba? 363 00:22:02,090 --> 00:22:05,750 Ito ay hindi isang mahusay na application, dahil kapag sinubukan kong isara ang window, 364 00:22:05,750 --> 00:22:06,500 walang nangyari. 365 00:22:06,500 --> 00:22:09,540 X Iyon ay hindi pa rin sumasagot. 366 00:22:09,540 --> 00:22:17,420 Kaya sabihin kumuha ng isang pagtingin sa mga susunod na file, hello4animation. 367 00:22:17,420 --> 00:22:21,850 Kaya ito ay ang file na ang pagpunta sa kitang ipakilala 368 00:22:21,850 --> 00:22:25,124 gumagalaw at mga kilusan sa aming imahe. 369 00:22:25,124 --> 00:22:27,040 Kaya kami ay pagpunta sa gawin ang mga parehong bagay tulad ng dati, 370 00:22:27,040 --> 00:22:30,190 magpasimula SDL, lumikha ng mga window, lumikha ng mga renderer, 371 00:22:30,190 --> 00:22:33,030 load ang imahe sa memory, lumikha ng mga texture. 372 00:22:33,030 --> 00:22:35,090 Nakita namin na ang lahat ng iyon bago. 373 00:22:35,090 --> 00:22:36,770 Ngayon, ito ay bago. 374 00:22:36,770 --> 00:22:42,305 Kami ay pagpunta sa may isang istraktura na tinatawag isang SDL rect, na kung saan ay isang parihaba lamang. 375 00:22:42,305 --> 00:22:49,950 Kung pumunta kami sa paglipas dito, maaari naming gawin ang isang paghahanap para sa SDL rect, 376 00:22:49,950 --> 00:22:54,040 at maaari mong makita ito ay isang napaka-simpleng istraktura. 377 00:22:54,040 --> 00:22:56,760 Ito ay may isang x, isang y para ang posisyon, at ito 378 00:22:56,760 --> 00:23:02,080 ay may lapad at taas para sa ang laki ng parihaba. 379 00:23:02,080 --> 00:23:07,785 >> Kaya kung ano ang namin ang pagpunta sa gawin ay hindi namin pagpunta upang tukuyin ang SDL rect Dest, 380 00:23:07,785 --> 00:23:09,480 para sa destination. 381 00:23:09,480 --> 00:23:14,130 At ito ay ang lugar sa screen kung saan 382 00:23:14,130 --> 00:23:16,005 kami ay pagpunta sa pagguhit ating larawan, i-right Kaya 383 00:23:16,005 --> 00:23:17,880 kung kami ay magiging paglipat ng mga imahe sa paligid, 384 00:23:17,880 --> 00:23:20,300 pagkatapos ay ang destinasyon kung saan kami ay pagpunta sa gumuhit ng larawan 385 00:23:20,300 --> 00:23:22,620 kailangan na gumagalaw sa paligid. 386 00:23:22,620 --> 00:23:24,910 Kaya kami ay pagpunta sa tawag na ito function na SDL_QueryTexture. 387 00:23:24,910 --> 00:23:27,550 388 00:23:27,550 --> 00:23:33,500 At mapansin ako makapasa address ng dest.w, na kung saan ay ang lapad, 389 00:23:33,500 --> 00:23:36,950 at dest.h, na kung saan ay ang taas. 390 00:23:36,950 --> 00:23:40,425 At kaya SDL_QueryTexture ay pagpunta upang mag-imbak sa mga patlang ang lapad 391 00:23:40,425 --> 00:23:41,675 at ang taas ng aming texture. 392 00:23:41,675 --> 00:23:44,680 393 00:23:44,680 --> 00:23:47,030 >> At pagkatapos ay kung ano ako pagpunta gawin ay pupuntahan ko 394 00:23:47,030 --> 00:23:55,580 upang i-set dest.x na window width minus dest.w, na kung saan ay 395 00:23:55,580 --> 00:23:59,000 ang lapad ng mga engkanto, na hinati sa pamamagitan ng 2. 396 00:23:59,000 --> 00:24:03,860 At ito ay pagpunta sa set up na ito upang na ang mga imahe ay ganap na nakasentro 397 00:24:03,860 --> 00:24:06,780 sa aming window, ang lahat ng karapatan? 398 00:24:06,780 --> 00:24:08,652 Kaya ngayon ay mayroon akong isang posisyon y. 399 00:24:08,652 --> 00:24:10,360 At ito ay pagpunta sa maging isang variable na 400 00:24:10,360 --> 00:24:16,390 ang pagbabago, dahil kami ay pagpunta sa maging paglipat ng mga imahe sa direksyon y. 401 00:24:16,390 --> 00:24:19,050 At ngayon kami ay may isang bagay tinatawag na isang animation loop. 402 00:24:19,050 --> 00:24:21,180 >> Kaya kung paano gumagana ang mga animation gumagana? 403 00:24:21,180 --> 00:24:27,630 Well, maaari tiktikan mata ng tao 12 natatanging mga imahe sa bawat segundo, ang lahat ng karapatan? 404 00:24:27,630 --> 00:24:33,060 Kaya kung flash ka 12 image card sa akin sa isang segundo, nakita ko ang bawat isa sa mga larawang iyon 405 00:24:33,060 --> 00:24:35,950 bilang sarili nitong natatanging mga indibidwal na imahe. 406 00:24:35,950 --> 00:24:39,690 Ngayon, kung flash ka pa mga larawan sa akin sa isang segundo, 407 00:24:39,690 --> 00:24:42,140 pagkatapos ay ang aking mga mata ay magsisimula lumabo ang mga ito nang sama-sama 408 00:24:42,140 --> 00:24:46,920 at nais kong maramdaman ito bilang paggalaw, sa halip ng isang natatanging imahe. 409 00:24:46,920 --> 00:24:51,930 Kaya, halimbawa, mga pelikula at telebisyon, flash sila ng mga imahe sa iyo ng 24 beses 410 00:24:51,930 --> 00:24:52,570 isang segundo. 411 00:24:52,570 --> 00:24:55,110 Kaya na ang 24 mga frame sa bawat segundo. 412 00:24:55,110 --> 00:25:00,136 Screen ng Computer, sa kabilang banda, madalas ay sa 60 mga frame sa bawat segundo. 413 00:25:00,136 --> 00:25:01,260 Iyon ang kanilang bilis refresh. 414 00:25:01,260 --> 00:25:04,650 Iyan ay kung gaano kadalas sila i-refresh ang mga larawan sa screen. 415 00:25:04,650 --> 00:25:08,960 Kaya aming mga target ay magiging 60 frame sa bawat segundo para sa aming mga laro. 416 00:25:08,960 --> 00:25:11,770 417 00:25:11,770 --> 00:25:13,710 >> Kaya sabihin makita na sa code. 418 00:25:13,710 --> 00:25:19,064 Kaya para sa bawat frame, hindi namin unang pagpunta sa mga malinaw na ang window. 419 00:25:19,064 --> 00:25:20,230 Ito ang pangkalahatang pattern. 420 00:25:20,230 --> 00:25:22,450 Palagi kang i-clear ang window sa bawat frame, at pagkatapos ay 421 00:25:22,450 --> 00:25:25,210 gawin ang lahat ng iyong mga guhit operasyon, at pagkatapos ay sa dulo, 422 00:25:25,210 --> 00:25:29,610 huwag RenderPresent magpakita lahat ng bagay sa frame. 423 00:25:29,610 --> 00:25:33,910 At pagkatapos ang iyong pagpunta sa Mayroon ng isang maghintay sa dulo 424 00:25:33,910 --> 00:25:36,340 maghintay hanggang sa susunod na frame ay dapat na magsimula. 425 00:25:36,340 --> 00:25:38,650 >> Kaya kung ako ay gumagawa ng isang pulutong ng complex pagtutuos dito 426 00:25:38,650 --> 00:25:43,100 na kinuha ng higit sa 16 milliseconds, ito ay magiging imposible para sa akin 427 00:25:43,100 --> 00:25:46,890 upang makakuha ng na frame rate ng 60 na Nais ko, dahil ang bawat frame ay 428 00:25:46,890 --> 00:25:48,750 Masyado matagal upang makalkula. 429 00:25:48,750 --> 00:25:52,340 Higit pa rito, talagang aming ginagawa uri ng isang bale-wala na halaga ng trabaho 430 00:25:52,340 --> 00:25:54,820 dito, dahil mayroon lamang isang bagay na kami ay ang pagguhit. 431 00:25:54,820 --> 00:25:59,390 Kaya naghihintay ako lamang 1/60 ng isang second, kung saan ay ang haba 432 00:25:59,390 --> 00:26:01,520 ng isang frame sa pagitan ng mga frame. 433 00:26:01,520 --> 00:26:05,610 Kaya ako uri ng pagpapanggap ginagawa lahat ng aking mga trabaho ay tumatagal ng zero oras. 434 00:26:05,610 --> 00:26:09,050 Ngunit sa isang real game, gusto mo na kailangang mag-alis 435 00:26:09,050 --> 00:26:13,760 ang halaga ng oras na ito kinuha upang gawin lahat ng gawaing ito mula sa iyong oras ng pahinga. 436 00:26:13,760 --> 00:26:16,970 >> Kaya pa rin, kung ano ako ang tunay na ginagawa sa loop na ito? 437 00:26:16,970 --> 00:26:19,070 Clear ko ang window. 438 00:26:19,070 --> 00:26:27,470 I-set ang dest.y, na kung saan ay isang int sa inihagis sa isang int aking aktwal na posisyon y. 439 00:26:27,470 --> 00:26:32,070 Ngayon, gusto kong lumutang resolution para sa aking mga posisyon y sa aking mga laro, 440 00:26:32,070 --> 00:26:34,150 ngunit pagkatapos ay sa aktwal gumuhit ito papunta sa screen, 441 00:26:34,150 --> 00:26:39,070 kailangan nito ints, dahil ito ay sa mga yunit ng pixels, kaya na kung ano ang cast ay para sa. 442 00:26:39,070 --> 00:26:41,745 Pupunta ako upang gumuhit ng mga larawan. 443 00:26:41,745 --> 00:26:45,180 Kaya ito ay ang pinagmulan rectangle. 444 00:26:45,180 --> 00:26:47,060 At ito ay ang destination rectangle. 445 00:26:47,060 --> 00:26:50,310 Kaya ako ay dumaan null para sa ang pinagmulan rectangle 446 00:26:50,310 --> 00:26:53,426 upang sabihin na gusto ko upang gumuhit ng aking buong texture. 447 00:26:53,426 --> 00:26:55,300 Ngunit kung ikaw ay nagkaroon ng maraming mga texture sa iyong mga laro 448 00:26:55,300 --> 00:26:59,120 at ang mga ito lahat sa isang malaking mapa texture na-load sa SDL bilang isa lamang 449 00:26:59,120 --> 00:27:02,850 texture, maaari mong gumamit ng isang source rectangle 450 00:27:02,850 --> 00:27:06,750 upang pumili ng isa sa mga mas maliit na mga texture, ang isa sa mga mas maliit na sprites, 451 00:27:06,750 --> 00:27:09,450 sa labas ng na malaking mapa texture. 452 00:27:09,450 --> 00:27:14,740 >> Kaya muli, ako ng pagpasa aking render, aking texture, at ngayon ang destination. 453 00:27:14,740 --> 00:27:18,320 Ito ay magiging kung saan sa window na ito ay pagpunta sa iguguhit. 454 00:27:18,320 --> 00:27:21,390 At pagkatapos, dahil ako animating ang isang bagay, kailangan ko kilusan, 455 00:27:21,390 --> 00:27:25,150 Pupunta ako sa pag-update ng posisyon engkanto sa bawat frame. 456 00:27:25,150 --> 00:27:30,190 Kaya ko ito pare-pareho na tinatawag na mag-scroll pabilisin sa mga unit ng pixels sa bawat segundo. 457 00:27:30,190 --> 00:27:34,320 Ngayon, sa bawat oras na gawin namin ang isang kilusan, mga frame ay 1/60 lamang ng isang segundo. 458 00:27:34,320 --> 00:27:36,740 Kaya ako pagpunta sa hatiin na sa pamamagitan 60. 459 00:27:36,740 --> 00:27:42,350 At pagkatapos, tingnan natin, Ako pagbabawas na mula y posisyon. 460 00:27:42,350 --> 00:27:44,470 Bakit ako pagbabawas? 461 00:27:44,470 --> 00:27:46,169 Susubukan naming makakuha ng sa na sa isang segundo. 462 00:27:46,169 --> 00:27:48,460 Kaya pagkatapos kong linisin ang aking mga mapagkukunan at ang programa ay higit. 463 00:27:48,460 --> 00:27:49,830 >> Kaya sabihin gawin iyon. 464 00:27:49,830 --> 00:27:52,450 465 00:27:52,450 --> 00:28:03,570 Kaya sabihin pumunta sa make SRCS = hello4 animation.c, ang lahat ng karapatan? 466 00:28:03,570 --> 00:28:05,720 Game. 467 00:28:05,720 --> 00:28:06,770 May pumunta ka. 468 00:28:06,770 --> 00:28:12,690 Kaya ko ito ng pag-scroll up ng window, na kung saan ay medyo kapong baka. 469 00:28:12,690 --> 00:28:17,110 Ngunit hold sa, ako ay pagbabawas mula sa posisyon y sa bawat oras. 470 00:28:17,110 --> 00:28:18,910 Ano kaya ang nangyari doon? 471 00:28:18,910 --> 00:28:24,010 Well, ito ay lumiliko out na sa SDL, at sa katunayan, sa karamihan ng mga graphics computer, 472 00:28:24,010 --> 00:28:28,890 ang pinagmulan para sa mga sistema ng coordinate ay sa itaas na kaliwang bahagi ng window. 473 00:28:28,890 --> 00:28:34,960 >> Kaya napupunta ang positibong x direksyon sa kabuuan ng iyong window sa kanan. 474 00:28:34,960 --> 00:28:38,110 At ang mga positibong y direksyon tunay na napupunta down. 475 00:28:38,110 --> 00:28:40,470 Kaya muli, sa pinagmulan ni kaliwang tuktok ng iyong window, 476 00:28:40,470 --> 00:28:46,190 positive y direksyon ay down, at positibong x ay sa kanan. 477 00:28:46,190 --> 00:28:48,770 Kaya kapag ibawas ko mula sa ang posisyon y, na ang 478 00:28:48,770 --> 00:28:52,640 pagpunta sa gawin itong pumunta sa mga negatibong direksyon y, na kung saan ay up window. 479 00:28:52,640 --> 00:28:55,500 Kaya na kung ano ang nangyayari doon. 480 00:28:55,500 --> 00:28:56,510 Cool. 481 00:28:56,510 --> 00:28:59,240 >> Tingnan natin ang mga susunod na file Hayaan. 482 00:28:59,240 --> 00:29:05,700 Narito ang bahagi ng ipakita kung saan kami ay sa wakas 483 00:29:05,700 --> 00:29:08,920 kumuha na X sa sulok ng window na ang dapat na isara ang window 484 00:29:08,920 --> 00:29:10,660 magtrabaho. 485 00:29:10,660 --> 00:29:12,800 Kaya kung ano ang nangyari? 486 00:29:12,800 --> 00:29:17,520 Magpasimula kaming SDL, lumikha ng mga window, lumikha ng mga renderer, load ang imahe, 487 00:29:17,520 --> 00:29:19,770 lumikha ng mga texture tulad ng nakita natin dati. 488 00:29:19,770 --> 00:29:26,850 Mayroon kaming parehong destination rectangle tulad ng dati, parehong tawag sa query texture. 489 00:29:26,850 --> 00:29:29,780 Ngunit oras na ito, hindi namin pagkatapos pagpunta sa hatiin ang lapad 490 00:29:29,780 --> 00:29:33,110 at ang taas ng aming patutunguhan sa pamamagitan ng 4. 491 00:29:33,110 --> 00:29:36,430 Ito ay ang epekto ng lamang scaling ating larawan down kapag 492 00:29:36,430 --> 00:29:39,884 namin ipakita ito sa window sa pamamagitan ng apat. 493 00:29:39,884 --> 00:29:40,800 Kaya na medyo kapong baka. 494 00:29:40,800 --> 00:29:42,770 Maaari lang namin masukat katulad nito. 495 00:29:42,770 --> 00:29:45,970 Kami ay pagpunta sa simulan ang mga engkanto sa gitna ng screen. 496 00:29:45,970 --> 00:29:49,410 At ngayon kami ay x at y bilis at sila ay parehong pagpunta sa magsimula sa zero. 497 00:29:49,410 --> 00:29:53,740 498 00:29:53,740 --> 00:29:55,880 >> Ito ay ang maling file. 499 00:29:55,880 --> 00:29:56,380 Patawad. 500 00:29:56,380 --> 00:29:57,960 Kaya na ang lahat ng totoo. 501 00:29:57,960 --> 00:30:00,170 Iyan ay sa file na ito ang lahat pa rin. 502 00:30:00,170 --> 00:30:03,210 Mayroon kaming mga hatiin sa pamamagitan ng 4 at lahat ng bagay. 503 00:30:03,210 --> 00:30:07,830 Kaya dito na namin ang aming x at y na posisyon para sa mga sentro ng window. 504 00:30:07,830 --> 00:30:12,480 At namin bigyan ito ng isang paunang bilis ng pare-pareho ang bilis, na 505 00:30:12,480 --> 00:30:15,180 Sa tingin ko ay 300 pixels sa bawat segundo. 506 00:30:15,180 --> 00:30:19,850 Ngayon, mayroon kaming ito int maaaring lamang pati na rin maging isang boolean na tinatawag na malapit hiniling. 507 00:30:19,850 --> 00:30:23,970 At sa halip ng paggawa ng isang walang-katapusang loop sa isang timer dito, 508 00:30:23,970 --> 00:30:29,180 kami ay pagpunta sa ma-animating bilang Hangga't malapit ay hindi hiniling. 509 00:30:29,180 --> 00:30:30,960 >> Kaya paano pinoproseso namin ang mga kaganapan? 510 00:30:30,960 --> 00:30:35,600 Well, SDL queues up pangyayari sa isang literal queue sa likod ng mga eksena. 511 00:30:35,600 --> 00:30:38,860 At pagkatapos ay sa bawat frame, maaari naming dequeue kaganapan 512 00:30:38,860 --> 00:30:43,900 mula sa na queue gamit ito SDL_PullEvent call. 513 00:30:43,900 --> 00:30:46,730 At muli, talagang pumunta basahin tungkol sa mga ito sa papeles. 514 00:30:46,730 --> 00:30:50,450 May ng maraming mga detalye ng impormasyon at ng maraming higit pang mga function na maaari mong gamitin sa mga ito. 515 00:30:50,450 --> 00:30:54,750 Ipasa namin ito ang address ng bagay na ito, SDL_Event 516 00:30:54,750 --> 00:30:56,990 na mayroon kami dito sa stack. 517 00:30:56,990 --> 00:30:58,840 >> Ngayon, kung ano ang isang SDL_event? 518 00:30:58,840 --> 00:31:02,356 Dahil SDL, kung tiningnan namin sa ang documentation-- sabihin 519 00:31:02,356 --> 00:31:07,580 makita, API sa pamamagitan ng kategorya, input mga kaganapan, kaganapan sa paghawak, 520 00:31:07,580 --> 00:31:15,150 maaari naming tumingin sa ang bilang ng iba't-ibang mga kaganapan dito 521 00:31:15,150 --> 00:31:18,600 at maaari naming makita mayroong isang buong tonelada ng mga ito. 522 00:31:18,600 --> 00:31:22,150 Kaya kung ano ito SDL_Event bagay? 523 00:31:22,150 --> 00:31:28,190 524 00:31:28,190 --> 00:31:31,107 SDL_Event ay isang unyon. 525 00:31:31,107 --> 00:31:31,940 Wow, kung ano ang isang union? 526 00:31:31,940 --> 00:31:33,910 Ikaw na marahil hindi kailanman narinig na ng bago. 527 00:31:33,910 --> 00:31:35,610 At iyon ang OK. 528 00:31:35,610 --> 00:31:39,420 >> Ang isang union ay uri ng tulad isang struct, maliban sa isang struct 529 00:31:39,420 --> 00:31:41,960 May espasyo para sa lahat ng kanyang mga patlang at memorya, 530 00:31:41,960 --> 00:31:45,060 samantalang ang isang union lamang ay may sapat na espasyo upang magkasya ang pinakamalaking 531 00:31:45,060 --> 00:31:49,660 isa sa kanyang mga patlang, na nangangahulugan na ito Maaari lamang mag-imbak ng isa sa kanyang mga patlang 532 00:31:49,660 --> 00:31:52,830 sa isang pagkakataon, na uri ng ang akma para sa mga kaganapan, tama? 533 00:31:52,830 --> 00:31:55,810 Maaari naming magkaroon ng isang keyboard kaganapan o isang kaganapan window, 534 00:31:55,810 --> 00:31:59,750 ngunit ang isang kaganapan ay hindi maaaring maging parehong isang keyboard kaganapan at isang event window, 535 00:31:59,750 --> 00:32:05,450 kaya gusto ito ay walang isip na magkaroon ng espasyo para sa pareho ng mga loob ng ating union kaganapan. 536 00:32:05,450 --> 00:32:07,770 Kaya kung nais mong lumikha ng iyong sariling mga unyon, 537 00:32:07,770 --> 00:32:10,020 ito hitsura nang eksakto ang parehong ng paglikha ng isang struct, 538 00:32:10,020 --> 00:32:14,140 maliban na namin ang mga keyword union sa halip na ang struct keyword. 539 00:32:14,140 --> 00:32:17,490 At tandaan, para sa lahat ng mga bagay-bagay sa loob ng iyong unyon, 540 00:32:17,490 --> 00:32:22,020 ang aktwal na variable na mga unyon maaari lamang magkaroon ng isa sa mga halagang iyon 541 00:32:22,020 --> 00:32:24,780 sa isang pagkakataon. 542 00:32:24,780 --> 00:32:29,940 >> Kaya kung paano namin sabihin sa kung anong uri ng kaganapan pop lang namin off ng mga ito queue? 543 00:32:29,940 --> 00:32:33,370 Well, maaari naming subukan para event.type. 544 00:32:33,370 --> 00:32:35,792 At kung na ay pantay-pantay upang SDL_Quit, alam namin 545 00:32:35,792 --> 00:32:37,500 ito ay ang mga kaganapan na ay binuo kapag kami 546 00:32:37,500 --> 00:32:39,510 hit na X sa sulok ng window. 547 00:32:39,510 --> 00:32:44,270 At kami ay maaaring itakda malapit hiniling ay katumbas ng 1. 548 00:32:44,270 --> 00:32:47,230 Ang natitira ay lamang ng ilang mga animation na iyong nakita bago. 549 00:32:47,230 --> 00:32:52,802 Kaya sabihin sige at gumawa na ito at makita kung paano ito gumagana. 550 00:32:52,802 --> 00:32:55,135 Kaya ako pagpunta sa uri ng gumawa at pagkatapos SRCS = hello5_events.c. 551 00:32:55,135 --> 00:33:03,760 552 00:33:03,760 --> 00:33:04,770 Mayroon kaming pumunta. 553 00:33:04,770 --> 00:33:05,780 Games. 554 00:33:05,780 --> 00:33:08,920 >> Ngayon, maaari naming makita ang mga ito ay sa katunayan pinaliit sa pamamagitan ng apat. 555 00:33:08,920 --> 00:33:10,360 At ngayon ito ay nagba-bounce sa paligid. 556 00:33:10,360 --> 00:33:14,630 Mayroon akong ilang mga pagtuklas ng banggaan nangyayari sa mga panig ng window 557 00:33:14,630 --> 00:33:16,840 na maaari naming tingnan ang. 558 00:33:16,840 --> 00:33:21,190 At ano ang mangyayari kapag pumunta ko ba itong isara? 559 00:33:21,190 --> 00:33:22,120 Magsasara ito. 560 00:33:22,120 --> 00:33:22,740 Hindi kapani-paniwala. 561 00:33:22,740 --> 00:33:24,290 Natanggap namin ang kaganapang iyon. 562 00:33:24,290 --> 00:33:26,630 At hawakan namin ito. 563 00:33:26,630 --> 00:33:30,730 >> Kaya ng lingunin ang code. 564 00:33:30,730 --> 00:33:33,020 Kaya kung paano ginawa ko na ito malaki sa paligid tulad na? 565 00:33:33,020 --> 00:33:37,200 Tandaan ako magse-set ang parehong x at y una sa bilis. 566 00:33:37,200 --> 00:33:39,260 At bilis ay isang positibong pare-pareho, sa gayon ay 567 00:33:39,260 --> 00:33:42,680 pagpunta upang makakuha ng ito nagsisimula lapag at sa kanan. 568 00:33:42,680 --> 00:33:45,680 569 00:33:45,680 --> 00:33:50,310 >> Ngayon, ang bawat frame, bilang karagdagan sa pag-asikaso anumang mga kaganapan na maaaring naganap, 570 00:33:50,310 --> 00:33:57,520 Pupunta ako upang makita kung ang aking mga engkanto ay sinusubukan upang pumunta sa labas ng window. 571 00:33:57,520 --> 00:34:03,610 Kaya maaari naming gawin na sa pamamagitan lamang ng paglagay ng tsek x_pos may 0, y_pos 0, at pagkatapos ay 572 00:34:03,610 --> 00:34:07,370 din x_pos at y_pos sa window ng lapad at taas window. 573 00:34:07,370 --> 00:34:11,010 Pansinin na bawas ko ang lapad ng mga engkanto. 574 00:34:11,010 --> 00:34:14,090 At ito ay dahil kung hindi ko nakita ibawas ang lapad ng mga engkanto, 575 00:34:14,090 --> 00:34:17,760 ay ito lamang ang check na sa pinagmulan ng mga engkanto 576 00:34:17,760 --> 00:34:19,690 ay hindi pumunta sa labas ng window. 577 00:34:19,690 --> 00:34:21,480 Ngunit gusto namin ang buong lapad ng mga engkanto 578 00:34:21,480 --> 00:34:24,030 na laging maging sa loob ng window at ang buong taas ng engkanto 579 00:34:24,030 --> 00:34:25,321 na laging maging sa loob ng window. 580 00:34:25,321 --> 00:34:27,429 Kaya na kung ano ang pagbabawas ay para sa. 581 00:34:27,429 --> 00:34:30,080 Ang isang pulutong ng geometry dito maaari maging kapaki-pakinabang upang gumuhit ito 582 00:34:30,080 --> 00:34:33,929 sa papel na may mga coordinate system upang makita kung ano ang nangyayari. 583 00:34:33,929 --> 00:34:38,090 >> Kaya kung ako mabangga, ako lamang reset lang ang posisyon 584 00:34:38,090 --> 00:34:41,400 upang ito ay hindi pagpunta sa labas ng screen. 585 00:34:41,400 --> 00:34:47,179 At ako pagpunta sa, kung ito bounce sa isa sa mga sidewalls, 586 00:34:47,179 --> 00:34:51,469 Pupunta ako upang kontrahin ang x bilis upang ito 587 00:34:51,469 --> 00:34:53,210 nagsisimula na nagba-bounce sa iba pang direksyon. 588 00:34:53,210 --> 00:34:56,210 At katulad, kung hit ito sa tuktok o sa ilalim, 589 00:34:56,210 --> 00:34:59,820 Pupunta ako upang itakda ang y kabilisan kapantay ng negatibong y bilis, 590 00:34:59,820 --> 00:35:01,690 upang ito bounce back. 591 00:35:01,690 --> 00:35:03,860 Kaya ito lamang kung paano namin nakuha na dito. 592 00:35:03,860 --> 00:35:07,560 >> At ang mga posisyon sa pag-update tulad ng nakita natin dati, 593 00:35:07,560 --> 00:35:12,510 hatiin sa pamamagitan ng 60, dahil hindi namin paghawak ng 1/60 ng isang segundo lamang. 594 00:35:12,510 --> 00:35:15,750 At pagkatapos ay pag-render, eksaktong katulad ng dati. 595 00:35:15,750 --> 00:35:19,810 At kaya na ang lahat ng bagay na nangyayari sa ang file na ito. 596 00:35:19,810 --> 00:35:22,490 Kaya na kung paano namin ang mga kaganapan. 597 00:35:22,490 --> 00:35:29,260 Ang pangunahing bagay na mag-alis dito ay ito SDL_PullEvent function. 598 00:35:29,260 --> 00:35:33,020 At dapat mong basahin ang tiyak ang babasahin pa tungkol sa SDL_Event 599 00:35:33,020 --> 00:35:38,630 unyon, dahil ang ganitong uri ng data ay tunay, tunay mahalaga, dahil ginagamit namin ito 600 00:35:38,630 --> 00:35:40,690 para sa lahat ng uri ng mga kaganapan. 601 00:35:40,690 --> 00:35:46,539 >> Halimbawa, ginagamit namin ito para keyboard mga kaganapan, na kung saan ay kung ano ang file na ito ay para sa. 602 00:35:46,539 --> 00:35:47,330 Kaya kung ano ang mayroon tayo? 603 00:35:47,330 --> 00:35:50,180 Mayroon kaming ang mga parehong bagay tulad ng dati, magpasimula SDL, lumikha ng isang window, 604 00:35:50,180 --> 00:35:55,260 lumikha ng isang renderer, load ang imahe sa memory, lumikha ng mga texture. 605 00:35:55,260 --> 00:36:00,530 Muli, kami ay pagpunta sa magkaroon ng ganitong Dest parihaba, 606 00:36:00,530 --> 00:36:04,890 kami ay pagpunta upang baguhin ang imahe sa pamamagitan ng apat, gawin itong isang bit mas maliit. 607 00:36:04,890 --> 00:36:08,000 Ngayon, kami ay pagpunta upang simulan ang engkanto sa gitna ng screen. 608 00:36:08,000 --> 00:36:12,090 Ngunit oras na ito, kami ay pagpunta upang i-set ang paunang x at y velocity sa zero, 609 00:36:12,090 --> 00:36:15,140 dahil ang keyboard ay pagpunta sa control iyon. 610 00:36:15,140 --> 00:36:18,900 At bukod dito, kami ay pagpunta sa subaybayan ang mga variable na ito 611 00:36:18,900 --> 00:36:20,450 pataas, pababa, pakaliwa, o pakanan. 612 00:36:20,450 --> 00:36:23,090 At na ang pagpunta sa panatilihin track ng kung hindi namin 613 00:36:23,090 --> 00:36:27,370 pinindot ang pindutan sa keyboard na tumutugma sa pataas, pababa, pakaliwa, 614 00:36:27,370 --> 00:36:28,460 at kanan. 615 00:36:28,460 --> 00:36:32,440 >> Ngayon, ito ang uri ng pag-iisip dahil maaari naming gamitin W, A, S, 616 00:36:32,440 --> 00:36:35,480 D dito, o sa aktwal na mga arrow key. 617 00:36:35,480 --> 00:36:38,590 Susubukan naming makita na sa isang segundo lang. 618 00:36:38,590 --> 00:36:41,140 Kaya kami ay pagpunta upang i-proseso mga kaganapan tulad ng dati. 619 00:36:41,140 --> 00:36:42,530 Hilahin namin ang kaganapan. 620 00:36:42,530 --> 00:36:45,840 Ngunit ngayon kami ay pagpunta sa lumipat sa uri ng kaganapan. 621 00:36:45,840 --> 00:36:47,710 Kung ito ay SDL_Quit, hindi namin pagpunta sa set ng malapit 622 00:36:47,710 --> 00:36:49,990 humiling na isa, tulad lamang ng dati. 623 00:36:49,990 --> 00:36:52,315 Na humahawak sa mga x in sa sulok ng window, 624 00:36:52,315 --> 00:36:55,050 upang ang aming window talagang magsasara. 625 00:36:55,050 --> 00:37:00,110 >> Kung hindi, kung makuha namin ang isang SDL key down event, na nangangahulugan pinindot namin ang isang key, 626 00:37:00,110 --> 00:37:04,470 pagkatapos ay kung ano kami ay pagpunta sa gawin ay hindi namin pagpunta upang lumipat sa mga bagay na ito dito, 627 00:37:04,470 --> 00:37:11,370 saan means-- kaya event.key nangangahulugan gamutin ang aming union kaganapan, 628 00:37:11,370 --> 00:37:15,490 pumunta at makakuha ng key istraktura ng kaganapan sa loob nito. 629 00:37:15,490 --> 00:37:18,810 Kaya ito ay lumiliko out na ito union ay isang mahalagang istraktura ng kaganapan. 630 00:37:18,810 --> 00:37:22,820 At pagkatapos ay pumunta sa key istraktura larangan nito kaganapan 631 00:37:22,820 --> 00:37:26,140 tinatawag keysym at pagkatapos scancode. 632 00:37:26,140 --> 00:37:29,480 At muli, basahin tiyak ang mga babasahin tungkol dito. 633 00:37:29,480 --> 00:37:31,220 Keyword input lubos na interesante. 634 00:37:31,220 --> 00:37:34,020 Maaari kang makakuha ng mga code ng pag-scan o key codes. 635 00:37:34,020 --> 00:37:38,590 At ito ay isang maliit na dalubhasa, ngunit ang dokumentasyon ay lubos na mabuti. 636 00:37:38,590 --> 00:37:43,380 >> Kaya kung makita natin ang pag-scan ng code para aming key press pagiging W o up, 637 00:37:43,380 --> 00:37:45,450 kami ay pagpunta upang i-set up katumbas ng 1. 638 00:37:45,450 --> 00:37:47,240 At pagkatapos naming magsimula ng mga switch na. 639 00:37:47,240 --> 00:37:52,980 Kung ito ay isang o kaliwa, namin itakda ang natitira upang 1, et iba pa, at iba pa, para sa mga pababa at kanan. 640 00:37:52,980 --> 00:37:57,080 Ngayon, out na ito sa panlabas na lumipat, kung makita natin ang isang susi up event, 641 00:37:57,080 --> 00:38:00,730 Nangangahulugan ito na inilabas namin ang isang key at hindi na namin ang pagpindot sa mga ito. 642 00:38:00,730 --> 00:38:05,380 Kaya ako ng pagpunta sa sabihin up katumbas ng 0, kaliwang katumbas ng 0, down katumbas ng 0, right 643 00:38:05,380 --> 00:38:08,260 katumbas ng 0, at iba pa. 644 00:38:08,260 --> 00:38:12,070 >> At napansin na namin sa bawat isa sa mga dalawang mga kaso ilagay sa tabi mismo ng isa't isa 645 00:38:12,070 --> 00:38:14,490 na walang hiwalay na code para sa unang kaso, na 646 00:38:14,490 --> 00:38:18,180 Nangangahulugan ito na kung ito ay isang S o pababa karapatan dito, 647 00:38:18,180 --> 00:38:20,520 ito ay pagpunta sa execute ang code na ito. 648 00:38:20,520 --> 00:38:22,090 Kaya na medyo magaling. 649 00:38:22,090 --> 00:38:24,830 Ito ang humahadlang sa amin na kinakailangang gawin ng mas maraming kondisyon at ifs at mga bagay 650 00:38:24,830 --> 00:38:26,980 tulad niyan. 651 00:38:26,980 --> 00:38:29,420 >> Kaya kami ay pagpunta sa matukoy ang bilis. 652 00:38:29,420 --> 00:38:31,020 Itinakda namin ang bilis sa 0. 653 00:38:31,020 --> 00:38:33,910 Pagkatapos kung up ay pinindot at hindi down, pagkatapos namin 654 00:38:33,910 --> 00:38:37,450 itakda ang y bilis sa mga negatibong bilis. 655 00:38:37,450 --> 00:38:42,930 Tandaan negatibong, dahil ang negatibong y direksyon ay up. 656 00:38:42,930 --> 00:38:45,540 At ang mga positibong y direksyon ay down. 657 00:38:45,540 --> 00:38:47,510 Kung pababa ay pinindot at hindi up, pagkatapos ay hindi namin 658 00:38:47,510 --> 00:38:53,860 pagpunta sa itakda ito sa positibong bilis, na nangangahulugan na babaan ang screen. 659 00:38:53,860 --> 00:38:55,460 Parehong bagay sa kaliwa at kanan. 660 00:38:55,460 --> 00:38:58,200 >> At pagkatapos kami ay pagpunta upang i-update mga posisyon tulad ng dati. 661 00:38:58,200 --> 00:39:00,740 Kami ay pagpunta sa gawin banggaan pagtuklas sa hangganan, 662 00:39:00,740 --> 00:39:04,290 ngunit hindi kami ay pagpunta sa i-reset ang bilis, dahil ang bilis ay lamang 663 00:39:04,290 --> 00:39:06,780 kontrolado ng keyboard. 664 00:39:06,780 --> 00:39:11,230 Ngunit kami ay pagpunta sa i-reset ang posisyon upang panatilihin ito sa window. 665 00:39:11,230 --> 00:39:14,400 At kami ay pagpunta upang i-set ang posisyon sa struct 666 00:39:14,400 --> 00:39:17,400 at pagkatapos ay gawin ang lahat ng rendering bagay-bagay mula sa bago. 667 00:39:17,400 --> 00:39:20,750 Kaya sabihin makita kung ano ang ginagawa nito. 668 00:39:20,750 --> 00:39:25,460 Kaya gumawa hayaan SRCS-- makita, ito ay hello6_keyboard.c. 669 00:39:25,460 --> 00:39:38,140 670 00:39:38,140 --> 00:39:38,820 >> Oh hindi. 671 00:39:38,820 --> 00:39:40,150 Kaya namin nakuha ang ilang mga babala dito. 672 00:39:40,150 --> 00:39:43,840 At na lang sinasabi na hindi namin suriin para sa bawat solong posibleng uri 673 00:39:43,840 --> 00:39:45,610 ng kaganapan. 674 00:39:45,610 --> 00:39:49,470 Iyon ay OK, dahil may 236 sa mga ito o kaya. 675 00:39:49,470 --> 00:39:51,760 Kaya ako pagpunta upang huwag pansinin ang mga babala. 676 00:39:51,760 --> 00:39:53,530 Ito ay pinagsama-sama pa rin fine. 677 00:39:53,530 --> 00:39:56,100 Kaya ako pagpunta upang i-play ang laro. 678 00:39:56,100 --> 00:39:57,590 Ito ay hindi gumagalaw. 679 00:39:57,590 --> 00:40:04,150 Ngunit ngayon, kapag mash ko sa aking keyboard, Ang maaari kong gawin ang ilang mga kilusan WASD dito, 680 00:40:04,150 --> 00:40:06,870 Gamitin ko ang aking mga arrow key rin. 681 00:40:06,870 --> 00:40:10,070 At mapansin, kahit na ako pagpindot karapatan sa ngayon, 682 00:40:10,070 --> 00:40:13,804 hindi ito ay pagpunta sa labas ng bintana, dahil reset ko ito sa bawat frame. 683 00:40:13,804 --> 00:40:14,720 Kaya na medyo kapong baka. 684 00:40:14,720 --> 00:40:19,420 Maaari mong isipin ang paglipat sa paligid Mario sa ilang mga arrow key o ng isang bagay na tulad ng. 685 00:40:19,420 --> 00:40:22,880 At oo, ang X ay hindi gumagana. 686 00:40:22,880 --> 00:40:26,900 >> Kaya final file kami ay pagpunta upang tumingin sa, hellow7_mouse. 687 00:40:26,900 --> 00:40:29,600 Ito ay tungkol sa pagkuha ng input mouse. 688 00:40:29,600 --> 00:40:34,790 Kaya sa isang ito, kami ay import ang mga header matematika, 689 00:40:34,790 --> 00:40:38,100 dahil kami ay pagpunta sa may isang maliit na piraso ng math dito. 690 00:40:38,100 --> 00:40:45,260 Parehong lumang, parehong mga lumang bagay-bagay, patutunguhan, parehong old, nakita na bago. 691 00:40:45,260 --> 00:40:46,910 Well, ito ay kawili-wili. 692 00:40:46,910 --> 00:40:51,730 Kaya hindi namin pabalik sa paglalagay ng tsek lamang para sa SDL umalis kaganapan. 693 00:40:51,730 --> 00:40:52,460 Bakit na? 694 00:40:52,460 --> 00:40:55,110 Kaya maaari kang makakuha mouse input mula sa mga kaganapan. 695 00:40:55,110 --> 00:40:57,670 Tulad nang lumipat ang mouse, makakakuha ka ng isang kaganapan para sa na. 696 00:40:57,670 --> 00:41:00,520 Kapag ang isang pindutan ng mouse ay pinindot, maaari kang makakuha ng isang kaganapan para sa na. 697 00:41:00,520 --> 00:41:05,760 >> Subalit mayroong isa pang, bahagyang mas simple marahil, API para sa pagkuha ng input mouse. 698 00:41:05,760 --> 00:41:09,500 At na lang SDL estado get mouse. 699 00:41:09,500 --> 00:41:14,370 Kaya Mayroon akong isang int para sa x at y para sa posisyon ng cursor. 700 00:41:14,370 --> 00:41:18,910 Ipasa ko ito sa SDL_GetMouseState, na nagtatakda ng mga ito. 701 00:41:18,910 --> 00:41:22,200 At ito ang posisyon sa coordinate system ng window. 702 00:41:22,200 --> 00:41:25,520 Kaya kung ang masa ay sa kaliwang itaas ng window, na gagawin 0, 0. 703 00:41:25,520 --> 00:41:28,040 704 00:41:28,040 --> 00:41:33,380 >> Ngayon, kung ano ako pagpunta sa gawin ay pupuntahan ko upang gawin ang isang maliit na piraso ng vector math. 705 00:41:33,380 --> 00:41:36,910 Taya ko naisip mo na hindi mo gusto makita na sa CS50, ngunit dito ito ay. 706 00:41:36,910 --> 00:41:40,720 Pupunta ako sa gawin ang ilang mga vector math upang makuha ang vector 707 00:41:40,720 --> 00:41:43,840 mula sa imahe sa cursor. 708 00:41:43,840 --> 00:41:53,280 At kaya kung bakit ang mayroon ako ito pagbabawas dito? 709 00:41:53,280 --> 00:42:01,350 Well, kung ginamit ko na lang Dest .-- kaya Kailangan ko upang i-translate ang mouse x 710 00:42:01,350 --> 00:42:05,166 at y sa pamamagitan ng kalahati ang lapad at ang taas ng imahe, 711 00:42:05,166 --> 00:42:08,040 dahil gusto ko sa gitna ng image na pagpunta patungo sa mouse, 712 00:42:08,040 --> 00:42:10,160 hindi sa pinagmulan ng mga imahe. 713 00:42:10,160 --> 00:42:15,650 >> Kaya ito lamang upang tiyakin na ako pinag tungkol sa gitna ng imahe dito. 714 00:42:15,650 --> 00:42:19,510 Pagkatapos namin makuha delta x at y, na ang pagkakaiba mula sa mga target 715 00:42:19,510 --> 00:42:23,430 sa aktwal na posisyon ng mga imahe. 716 00:42:23,430 --> 00:42:25,690 At pagkatapos ay maaari naming makuha ang distansya dito, na 717 00:42:25,690 --> 00:42:29,140 ay magiging Pythagorean teorama, square root of x 718 00:42:29,140 --> 00:42:32,720 ulit x plus y beses y. 719 00:42:32,720 --> 00:42:38,400 >> Ngayon upang maiwasan ang jitter, at maaari kong ipakita sa mo kung ano ang nagagawa nito kung hindi ko gawin ito, 720 00:42:38,400 --> 00:42:45,830 kung distansya sa pagitan ng cursor at ang imahe center ay mas mababa sa limang, 721 00:42:45,830 --> 00:42:48,730 Tingin lang ako sa hindi pagpunta sa ilipat ang imahe. 722 00:42:48,730 --> 00:42:52,900 Kung hindi man, kami ay itakda ang bilis. 723 00:42:52,900 --> 00:42:55,960 At kami ay itakda ito upang ang bilis ay laging pare-pareho. 724 00:42:55,960 --> 00:42:58,770 At ang net resulta ng lahat ng ito matematika ay na ang imahe 725 00:42:58,770 --> 00:43:01,660 ay pagpunta sa ilipat patungo ang cursor. 726 00:43:01,660 --> 00:43:08,470 >> Ngayon, ito ay lumiliko out na SDL_GetMouseState, 727 00:43:08,470 --> 00:43:14,490 bilang karagdagan sa pagtatakda ng x at y arguments dito, 728 00:43:14,490 --> 00:43:21,340 nagbabalik din ito sa isang int na tumutugma sa estado ng ang mga pindutan ng mouse. 729 00:43:21,340 --> 00:43:24,600 Kaya hindi namin maaaring basahin na direkta, ngunit maaari naming 730 00:43:24,600 --> 00:43:29,090 gamitin ang mga macros, ang isang solong bitwise operator, hindi na nakakatakot, 731 00:43:29,090 --> 00:43:30,650 lamang ng isang bitwise at. 732 00:43:30,650 --> 00:43:38,320 Kaya sinasabi namin mga pindutan, na kung saan ay ang resulta ng ating SDL_GetMouseState, kung na 733 00:43:38,320 --> 00:43:43,990 at bitwise at, ito macro dito, SDL_BUTTON_LEFT. 734 00:43:43,990 --> 00:43:47,680 >> Kaya ito ay pagpunta upang malutas lamang sa bitmap na tumutugma 735 00:43:47,680 --> 00:43:51,090 sa kaliwang pindutan ng mouse pipi. 736 00:43:51,090 --> 00:43:55,470 At kaya kung ang bitwise at nangyayari at ito ay 737 00:43:55,470 --> 00:43:59,340 hindi zero, na nangangahulugan kaliwang pindutan ay pipi, 738 00:43:59,340 --> 00:44:04,320 pagkatapos ay aktwal na kami ay pagpunta upang kontrahin pareho ang x at ang y velocity, 739 00:44:04,320 --> 00:44:06,700 na kung saan ay kailangan lang gumawa ng mga takas na imahe. 740 00:44:06,700 --> 00:44:07,980 Update posisyon. 741 00:44:07,980 --> 00:44:10,920 Collisions detections, nakita ito lahat bago, rendering, ang lahat ng karapatan. 742 00:44:10,920 --> 00:44:11,510 Gumawa natin ito. 743 00:44:11,510 --> 00:44:14,200 744 00:44:14,200 --> 00:44:16,050 Kaya ba kayong gumawa ng SRCS = hello7_mouse.c. 745 00:44:16,050 --> 00:44:21,720 746 00:44:21,720 --> 00:44:22,220 Great. 747 00:44:22,220 --> 00:44:23,490 Walang mga error. 748 00:44:23,490 --> 00:44:24,900 At game. 749 00:44:24,900 --> 00:44:26,440 >> Kaya dito mayroon ko ang aking mouse. 750 00:44:26,440 --> 00:44:29,000 At ang imahe ay sa katunayan habol ang aking mouse. 751 00:44:29,000 --> 00:44:33,140 Ngayon, sa isang laro na gagawin mo, baka ito ay tulad ng isang kaaway habol 752 00:44:33,140 --> 00:44:35,240 sa iyong maliit na karakter o anuman. 753 00:44:35,240 --> 00:44:37,440 Ngunit dito na namin ang mga image habol ang mouse. 754 00:44:37,440 --> 00:44:41,000 At kapag nag-click ako, ang mouse Nagsisimula habol ang image 755 00:44:41,000 --> 00:44:42,860 at ang imahe ay tumatakbo ang layo mula mouse. 756 00:44:42,860 --> 00:44:43,810 Kaya na medyo cool. 757 00:44:43,810 --> 00:44:47,770 At pansinin muli, may pa rin ang banggaan detection dito. 758 00:44:47,770 --> 00:44:53,930 >> Kaya na ay ang huling maliit demo na-set up ko dito. 759 00:44:53,930 --> 00:44:58,870 At tumagal ng isang pagtingin sa isa pang bagay ipaalam. 760 00:44:58,870 --> 00:45:02,970 Kaya bumalik dito, nabanggit ko ito jitter. 761 00:45:02,970 --> 00:45:05,000 Lahat tama. 762 00:45:05,000 --> 00:45:12,890 Kaya kung distansya ay mas mababa sa limang pixels, Nakaupo ako x at y bilis sa zero. 763 00:45:12,890 --> 00:45:15,960 Ano ang mangyayari kung natin mapupuksa ang na? 764 00:45:15,960 --> 00:45:19,070 Kaya ako pagpunta sa gawin ito lamang. 765 00:45:19,070 --> 00:45:23,820 766 00:45:23,820 --> 00:45:30,150 Mangyaring patawarin ito horrendous style, ngunit nagkomento namin ang tamang code. 767 00:45:30,150 --> 00:45:38,080 Kaya ako pagpunta sa i-save na at gawin ang mga parehong utos mula sa harap upang gawin itong. 768 00:45:38,080 --> 00:45:38,785 >> Lahat tama. 769 00:45:38,785 --> 00:45:39,660 At ngayon kung ano ang mangyayari? 770 00:45:39,660 --> 00:45:43,260 771 00:45:43,260 --> 00:45:43,760 Good. 772 00:45:43,760 --> 00:45:45,801 Kami ay sumusunod pa rin ang mouse tulad ng dati, 773 00:45:45,801 --> 00:45:49,310 ngunit kapag kami makakuha sa mouse, Nakakuha kami ng ganitong gross jitter. 774 00:45:49,310 --> 00:45:50,320 Ano kaya ang nangyari doon? 775 00:45:50,320 --> 00:45:52,600 Well, sa aming vector math, tandaan namin 776 00:45:52,600 --> 00:45:57,540 paglaan ng distansiya sa pagitan ng cursor at ang gitna ng imahe? 777 00:45:57,540 --> 00:46:00,710 Well, pati na pamamaraang 0, namin simulan ang pagkuha 778 00:46:00,710 --> 00:46:06,280 tulad ng ganitong uri ng mga loko-uugali kung saan ang imahe ay uri ng 779 00:46:06,280 --> 00:46:08,910 tulad ng oscillating sa paligid ng cursor. 780 00:46:08,910 --> 00:46:12,000 At na sa paglikha ng ito jitter. 781 00:46:12,000 --> 00:46:13,020 At iyan ay talagang pangit. 782 00:46:13,020 --> 00:46:15,103 At marahil ay hindi nais ang iyong mga laro sa paggawa na, 783 00:46:15,103 --> 00:46:17,350 maliban kung ito ay isang uri ng espesyal na epekto. 784 00:46:17,350 --> 00:46:21,960 >> Kaya na ang dahilan kung bakit mayroon kaming lamang ito arbitrary 785 00:46:21,960 --> 00:46:27,150 cut off ng limang pixels, na kung saan namin sabihin kung ito ay sa loob ng limang pixels, hindi namin mabuti. 786 00:46:27,150 --> 00:46:29,560 Hindi namin kailangan upang ilipat ang imahe anymore. 787 00:46:29,560 --> 00:46:32,260 Kaya na kung ano ang nangyayari doon. 788 00:46:32,260 --> 00:46:37,390 789 00:46:37,390 --> 00:46:40,870 >> Kaya na medyo marami ito. 790 00:46:40,870 --> 00:46:44,390 Alam mo na ngayon kung paano lumikha ng isang window, i-load ang isang imahe, 791 00:46:44,390 --> 00:46:49,330 gumuhit ng isang larawan ng window, makakuha ng input keyboard, kumuha ng input mouse, 792 00:46:49,330 --> 00:46:52,190 may isang bungkos ng iba pang input na gusto mo ay hindi 793 00:46:52,190 --> 00:46:56,070 malaman kung paano makakuha kung gagastusin mo lamang ng isang ilang minuto sa pagtingin sa mga babasahin. 794 00:46:56,070 --> 00:46:59,670 Kaya ang tunay na may ganap ng isang ilang mga tool sa iyong pagtatapon ngayon 795 00:46:59,670 --> 00:47:01,650 na magsulat ng isang ganap na laro. 796 00:47:01,650 --> 00:47:05,030 >> Ngayon, ang mga pangangailangan ng ilang mga audio bawat laro, ngunit ang mga babasahin audio 797 00:47:05,030 --> 00:47:06,460 ay isa ring mahusay. 798 00:47:06,460 --> 00:47:09,200 At ako ay nais na taya na kung nauunawaan mo ang lahat ng mga bagay-bagay 799 00:47:09,200 --> 00:47:14,560 usapan natin ang tungkol ngayon sa ang mga imahe, at ibabaw, 800 00:47:14,560 --> 00:47:18,370 ang mga bintana, at lahat ng bagay, at pagkatapos ay uunawa ng mga audio API ay hindi 801 00:47:18,370 --> 00:47:21,170 magiging na masama. 802 00:47:21,170 --> 00:47:27,420 Kaya ako inaabangan ang nakakakita ano kang lumikha ng sa SDL. 803 00:47:27,420 --> 00:47:31,595