Học làm game (1) - Tổng quan

Thông tin môn học

Thông tin chung

-        Mã môn học: 20CT3208

-        Tên môn học: Phát triển ứng dụng game

-        Số tín chỉ: 3 [2 lý thuyết (30 tiết)  – 1 thực hành (30 tiết)]

-        Là học phần tự chọn

Mục tiêu môn học

-        Học phần cung cấp cho sinh viên các kiến thức cơ bản về các nguyên lý lập trình game, đồng thời cung cấp các kiến thức về các thành phần, đối tượng chính để tạo ra một game chạy trên máy tính và di động.

-        Học phần giới thiệu chủ yếu về phần mềm Unity, các thành phần cơ bản về Unity 2D và phương pháp lập trình với mã lệnh C#.

-        Học phần cũng trang bị các kỹ năng làm việc nhóm, thiết kế và triển khai ứng dụng đơn giản, biên dịch và chạy được trên các thiết bị; kỹ năng đọc, tìm kiếm tài liệu tiếng Anh.

Đánh giá môn học

-        Chuyên cần: 10%

-        Trắc nghiệm: 20%

-        Lab, bài tập: 20%

-        Thi cuối kì (máy): 50%

1         Tổng quan

1.1       Tổng quan về game

Phần này tập trung tìm hiểu về các chủ đề sau:

- Game là gì

- Các loại game

- Quy trình làm

- Các vị trí công việc

- Công nghệ

Game là gì

Trò chơi (game) là một hình thức chơi có cấu trúc, có luật chơi, mục đích để giải trí hoặc vui chơi.

Trò chơi là bất kì hoạt động nào nhằm mục đích tạo ra sự ưng ý, thỏa mãn mà không có tính định trước.

 Trò chơi thường gồm 2 phần: môi trường và luật chơi.

– Môi trường: bao gồm các thành tố được sử dụng trong quá trình chơi (ví dụ: sân, bóng, thẻ, lá bài, xúc xắc, bảng, máy tính, điện thoại).

– Luật chơi là các quy tắc khi chơi

Tiêu chí của một trò chơi:

– Luật chơi, quy tắc

– Mục tiêu

– Tiến trình chơi luôn thay đổi, có tính ngẫu nhiên, ít lặp lại, tương tác, luôn có cơ hội cho mọi người

– Cạnh tranh, thử thách

Các loại game

– Trò chơi để giải trí

– Trò chơi có thành tích, phần thưởng

– Chơi một mình, theo nhóm, trực tuyến

– Có khán giả, không có khán giả

– Kĩ năng, chiến lược, trí óc

– Giáo dục, mô phỏng, tâm lý

Một số loại game cụ thể

Sports

Thể thao

(bóng đá, bóng rổ, quần vợt)

Lawn games

Trò chơi trên sân nhỏ

(bắn bi, nhảy dây, lò cò)

Tabletop games

Trò chơi của nhóm nhỏ, trong sinh hoạt, bữa tiệc.

Dexterity and coordination games

Trò chơi phối hợp, phản xạ

(bi lắc, bida, rút gỗ)

Board games

Bàn cờ

(cơ vua, cờ tướng, cờ vây)

Card games

Chơi bài

 

Dice games

Chơi xúc xắc

(cá ngựa, tài xỉu)

Domino and tile games

Domino

Pencil and paper games

Chơi bằng giấy bút

(ca-ro, giải ô chữ)

Guessing games

Video games

Trò chơi điện tử

Online games

Trò chơi trực tuyến

Role-playing games

Business games

Simulation

 

1.2       Trò chơi điện tử là gì

Trò chơi điện tử (video games), cũng được gọi là Trò chơi trên máy tính là trò chơi trên thiết bị điện tử, trong đó người chơi sẽ tương tác với giao diện hoặc thiết bị (như bàn phím, cần điều khiển, bộ điều khiển, màn hình cảm ứng) để tạo phản hồi nghe/nhìn trên thiết bị như tivi, màn hình máy tính, màn hình cảm ứng, tai nghe thực tế ảo.

Phân loại trò chơi điện tử theo thiết bị:

– Hộp/thùng điện tử

– Bảng điều khiển

– Máy tính cá nhân (PC)

– Điện thoại thông minh/máy tính bảng

– Thực tế ảo/Thực tế tăng cường

– Đám mây (remote cloud)

Phân loại theo kiểu chơi:

– Chơi một mình

– Chơi nhiều người

Phân loại theo mục đích chơi:

– Trò chơi thông thường: được thiết kế theo kiểu dễ tiếp cận, cách chơi đơn giản, nhìn qua là có thể đoán được cách chơi, luật chơi. Hướng đến thị trường đại chúng.

Ví dụ: Tetris

 

Candy crush saga


– Trò chơi giáo dục: dùng để dạy học, có thể chơi ở nhà hoặc tại lớp học. Ví dụ: The oregon trail, Carmen Sandiego, Minecraft

– Trò chơi ứng dụng (applied games): dùng trong huấn luyện bay, lái xe, thể dục thể thao, quảng cáo. Ví dụ: Wii fit, flight simulator.

– Trò chơi nghệ thuật: dùng để truyền đạt một câu chuyện, một thông điệp bằng một tác phẩm nghệ thuật. Ví dụ: Passage, flower, cancer  

1.3       Quy trình làm game

Đọc tài liệu này: https://gamemaker.io/en/blog/stages-of-game-development

Quy trình làm game thường gồm 7 bước:


– Lập kế hoạch (planning)

– Tiền sản xuất (pre-production)

– Sản xuất (production)

– Kiểm thử (testing)

– Tiền phát hành (pre-launch)

– Phát hành (launch)

– Sau phát hành (post-launch)

1.4       Các vị trí công việc

Ứng với các công đoạn phát triển game, sẽ cần con người làm việc tại mỗi công đoạn, ví dụ:

Quản lý dự án game (project manager)

Xây dựng kế hoạch thực hiện, theo dõi tiến độ, quản lý nhân sự, quản lý ngân sách, đảm bảo chất lượng sản phẩm,…

Thiết kế game (game designer)

Thiết kế cốt truyện và nội dung; xây dựng nhân vật, bối cảnh; thiết kế các tương tác.

Họa sĩ  game (game artist)

 

Dựa trên phác thảo của Game Designer, sử dụng các công cụ vẽ 2D, 3D, công cụ phối cảnh để tạo ra hình ảnh sinh động và chân thực cho game. Cụ thể là tạo ra nhân vật, phong cảnh, đồ vật, xe cộ, trang phục, kết cấu bề mặt, công cụ và các chi tiết khác xuất hiện trong trò chơi. 

Diễn hoạt game (game animator)

Biến các nhân vật tĩnh thành động, làm cho nhân vật chuyển động mượt mà, biểu cảm sắc thái đa dạng, tự nhiên, phù hợp với bối cảnh game.

Lập trình game (game programmer, developer)

Dựa trên các thiết kế, sử dụng ngôn ngữ lập trình (C++, C#,JavaScript, Python, …v.v) để hiện thực hóa các thiết kế, ý tưởng thành các đoạn mã, xử lý các tương tác từ người chơi.

Chuyên viên Kiểm thử, đảm bảo chất lượng (game tester, quality assurance)

Kiểm thử, trải nghiệm, để phát hiện các lỗi, các bất thường trong game liên quan đến thiết kế, logic, lập trình. Đảm bảo game có chất lượng.

Các công việc khác

Biên kịch (writer), chuyên viên marketing, kĩ sư hệ thống (engineer), kĩ sư âm thanh, game thủ, biên dịch.

1.5       Công nghệ

Ứng với mỗi công đoạn sản xuất game, chúng ta cần sử dụng các công cụ và công nghệ tương ứng. Tùy theo, loại game sẽ sử dụng công cụ và công nghệ phù hợp.

Lập kế hoạch

 

Tiền sản xuất

 

Sản xuất

 

Kiểm thử

 

Tiền phát hành

 

Phát hành

 

Hậu phát hành

 

1.6       Xem và đọc thêm

– Game: https://en.wikipedia.org/wiki/Game

– Video game: https://en.wikipedia.org/wiki/Video_game

– Quy trình làm game: https://gamemaker.io/en/blog/stages-of-game-development

– Các phong cách nghệ thuật trong tạo game: https://gamemaker.io/en/blog/2d-game-art-styles

1.7       Bài tập và thực hành

Bài tập 1. Với mỗi loại trò chơi, bạn hãy trải nghiệm ít nhất 2 trò chơi, mô tả ngắn gọn về mục đích và luật chơi.

Loại trò chơi

Tên trò chơi

Mô tả ngắn gọn về mục đích và luật chơi

Trò chơi thông thường

 

 

 

 

Trò chơi giáo dục

 

 

 

 

Trò chơi ứng dụng

 

 

 

 

Trò chơi nghệ thuật

 

 

 

 

Bài tập 2. Bạn hãy cho biết yêu cầu về kiến thức, kĩ năng và thái độ đối với mỗi vị trí việc làm trong nghề game.

Quản lý dự án game

 

Thiết kế game

 

Họa sĩ game

 

Diễn hoạt game

 

Lập trình game

 

Chuyên viên kiểm thử, đảm bảo chất lượng

 

Biên kịch

 

Biên dịch

 

Chuyên viên marketing

 

Kĩ sư hệ thống

 

Kĩ sư âm thanh

 

Game thủ

 

1.8       Câu hỏi ôn tập

Câu 1.________ được thiết kế theo kiểu dễ tiếp cận, cách chơi đơn giản, nhìn qua là có thể đoán được cách chơi, luật chơi. Hướng đến thị trường đại chúng.

A. Trò chơi ứng dụng

B. Trò chơi giáo dục

C. Trò chơi nghệ thuật

D. Trò chơi thông thường

Câu 2. Quy trình làm game gồm các công đoạn, theo thứ tự đúng là:

A. Tiền sản xuất > Sản xuất > Kiểm thử > Lập kế hoạch > Tiền phát hành > Phát hành > Hậu phát hành

B. Lập kế hoạch > Tiền sản xuất > Kiểm thử > Sản xuất > Tiền phát hành > Phát hành > Hậu phát hành

C. Lập kế hoạch > Sản xuất > Tiền sản xuất > Kiểm thử > Tiền phát hành > Phát hành > Hậu phát hành

D. Lập kế hoạch > Tiền sản xuất > Sản xuất > Kiểm thử > Tiền phát hành > Phát hành > Hậu phát hành

Câu 3. Một số công việc trong lĩnh vực làm game gồm:

A. Game Designer, Game Artist, Game Animator, Game Developer, Game Tester

B. Game Designer, Game Over, Game Animator, Game Developer, Game Tester

C. Game Designer, Game Artist, Game Browser, Game Developer, Game Tester

D.  Game Ruler, Game Artist, Game Animator, Game Developer, Game Tester

Câu 4. Chữ “D” trong game 2D hoặc 3D là viết tắt của:

A. Digital

B. Display

C. Developer

D. Dimension

Đáp án: 1(D), 2(D), 3(A), 4(D)

-----

Cập nhật: 20/2/2023

Bài sau: Học làm game (2) - Lập kế hoạch

-----

Bạn muốn tự học HTML bài bản? Xem thêm

Web front-end (16) - HTML - Hình ảnh_Bài tập

-----

1.1.1       Bài tập và thực hành

Bài tập 1. Viết lại các đoạn mã trong phần lý thuyết.

Bài tập 2. Adding an SVG to a page.

In this exercise, we’ll add some SVG images to the Black Goose Bistro page that we worked on in Chapter 4. The materials for this exercise are available online at learningwebdesign.com/5e/materials or at [https://drive.google.com/file/d/11GFULoxJ4vAzQfeMQeTTD_1UmAv5GqmA/view?usp=sharing]. You will find everything in a directory called ch07\Exercise 07-02\svg. The resulting code is provided with the materials.

This exercise has two parts: first, we’ll replace the logo with an SVG version, and second, we’ll add a row of social media icons at the bottom of the page.

Part I: Replacing the logo

1. Open blackgoosebistro.html in a text editor. It should look just like we left it in Chapter 4.

2. Just for fun, let’s see what happens when you make the current PNG logo really large. Add width="500" height="500" to the img tag. Save the file and open it in the browser to see how blurry bitmapped images get when you size them larger. Yuck.

3. Let’s replace it with an SVG version of the same logo by using the inline SVG method. In the svg folder, you will find a file called blackgoose-logo.svg. Open it in your text editor and copy all of the text (from <svg> to </svg>).

4. Go back to the blackgoosebistro.html file and delete the entire img element (be careful not to delete the surrounding markup). Paste the SVG text in its place. If you look closely, you will see that the SVG contains two circles, a gradient definition, and two paths (one for the starburst shape and one for the goose).

5. Next, set the size the SVG should appear on the page. In the opening svg tag, add width and height attributes set to 200px each.

<h1><svg width="200px" height="200px" …

Save the file and open the page in the browser. You should see the SVG logo in place, looking a lot like the old one.

6. Try seeing what happens when you make the SVG logo really big! Change the width and height to 500 pixels, save the file, and reload the page in the browser. It should be big and sharp! No blurry edges like the PNG. OK, now put the size back to 200 × 200 or whatever looks good to you.

Part II: Adding icons

7. Next we’re going to create a footer at the bottom of the page for social media icons. Below the Location & Hours section, add the following (the empty paragraph is where we’ll add the logos):

<footer>

<p>Please visit our social media pages</p>

<p> </p>

</footer>

8. Use the img element to place three SVG icons: twitter.svg, facebook.svg, and instagram.svg. Note that they are located in the icons directory. There are also icons for Tumblr and GitHub if you’d like extra practice. Here’s a head start on the first one:

<p><img src="icons/twitter.svg" alt="twitter"></p>

9. Save the file and open it in the browser. The icons should be there, but they are huge. Let’s write a couple of style rules to make the footer look nice. We haven’t done much with style rules yet, so just copy exactly what you see here inside the style element in the head of the document:

footer {

border-top: 1px solid #57b1dc;

text-align: center;

padding-top: 1em;

}

footer img {

width: 40px;

height: 40px;

margin-left: .5em;

margin-right: .5em;

}

10. Save the file again and open it in the browser. Go ahead and play around with the style settings, or even the code in the inline SVG, if you’d like to get a feel for how they affect the appearance of the images. It’s kinda fun.

Bài tập 3. Sử dụng Developer tools của trình duyệt web và lệnh window.devicePixelRatio của JavaScript, cho biết giá trị device-pixel-ratios của một số thiết bị: laptop, iPhone 12 Pro, iPad Air, Samsung Galaxy?

[Hướng dẫn làm bài tập]

Bài tập 2.

[blackgoosebistro.html]

<!DOCTYPE html>

<html>

 

<head>

<meta charset="utf-8">

<title>Black Goose Bistro</title>

<style>

body {

  background-color: #faf2e4;

  margin: 0 10%;

  font-family: sans-serif;

  }

h1 {

  text-align: center;

  font-family: serif;

  font-weight: normal;

  text-transform: uppercase;

  border-bottom: 1px solid #57b1dc;

  margin-top: 30px;

}

h2 {

  color: #d1633c;

  font-size: 1em;

}

footer {

    border-top: 1px solid #57b1dc;

    text-align: center;

    padding-top: 1em;

}

footer img {

  width: 40px;

  height: 40px;

  margin-left: .5em;

  margin-right: .5em;

}

</style>

</head>

 

<body>

 

<h1>

<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 148 148">

  <circle fill="#CD582C" cx="74" cy="74" r="74"/>

  <circle fill="#F7941E" stroke="#92D4F4" stroke-width="2" stroke-miterlimit="10" cx="74" cy="74" r="70.5"/>

  <radialGradient id="a" cx="74" cy="74" r="69.586" gradientUnits="userSpaceOnUse">

    <stop offset="0" stop-color="#F9ED32"/>

    <stop offset=".214" stop-color="#F8D72C"/>

    <stop offset=".75" stop-color="#F7A621"/>

    <stop offset="1" stop-color="#F7941E"/>

  </radialGradient>

  <path fill="url(#a)" d="M74 4.4l2.7 48.9L92 6.8 82 54.7l26.8-41-22.1 43.7 36.5-32.6-32.6 36.5 43.7-22.1-41 26.8 47.9-10-46.5 15.3 48.9 2.7-48.9 2.7L141.2 92 93.3 82l41 26.8-43.7-22.1 32.6 36.5-36.5-32.6 22.1 43.7-26.8-41 10 47.9-15.3-46.5-2.7 48.9-2.7-48.9L56 141.2l10-47.9-26.8 41 22.1-43.7-36.5 32.6 32.6-36.5-43.7 22.1 41-26.8L6.8 92l46.5-15.3L4.4 74l48.9-2.7L6.8 56l47.9 10-41-26.8 43.7 22.1-32.6-36.5 36.5 32.6-22.1-43.7 26.8 41L56 6.8l15.3 46.5"/>

  <path d="M89.1 27.9s-1.6 1.3-1.8 3.4C87 33.4 86 37 87.2 40c2 5 4.9 8.7 4.9 8.7s2.9 4.7 4.8 6.3c1.8 1.6 5.8 6.3 5.8 11.6 0 2.9-.3 9.5-1.1 11.6-.8 2.1.2 8.1-2.6 11-2.8 2.9-5 4.7-5.5 6-.5 1.3-5.3 4.2-6.6 6-1.3 1.8-7.1 8.4-7.1 8.4l-1.3 12.3 2.6 2.9 6.6 1.3 2.8.4s-4.2.7-1.5 1.5 2.9 1.8 2.9 1.8l-6-.5 1.6 2.9h-1.8c-1.8 0-5.3-3.2-5.3-3.2s-7.1-1.8-7.1-3.2c0-1.3 1.6-1.6 1.6-2.9 0-2.8 1.3-.2 1.1-12.1 0 0-2.9-2.1-4.5-.8s-1.6 2.9-5 3.4-9.2-.3-9.2-.3-1.3 7.1-1.6 8.1c-.3 1.1 0 2.9 0 2.9l2.4 1s5.4 1.1 7.5 1.3c2.1.3 5.6 2.6 5.6 2.6s-3.9-.3-2.9 2.9c.4 1.1-5.8-3.2-5.8-1.6s1.1 1.6-1.1 1.6c-2.1 0-2.6-1.6-4.7-2.9-2.1-1.3-3.9-2.9-4.7-3.4-.8-.5-1.3-.8-1.3-2.1s1.6-2.4 1.8-4.7c.3-2.4 2.9-5.3 1.1-6.3-1.8-1.1-2.9-.3-7.1-3.9-4.2-3.7-1.8-3.9-5-8.7-3.2-4.7-1.3-8.1-7.1-8.4-20.8-1.1-9.5-4.2-10.8-4.5-1.3-.3-2.1-1.6-2.6-2.6-.5-1.1 1.1-1.6 7.9-.8 0 0 3.7-3.2 11.3-3.9 3-.3 6.3-4.2 11-6 4.7-1.8 8.9-1.6 14.4-4.8 4-2.3 12.2-4.7 12.2-4.7s6-5.3 5.3-8.1C82.3 53.2 79 46 79 46s-2.2-5.6-2.2-10.6.8-11.6 2.1-13.9c1.3-2.4 2.1-6 8.4-6.6 6.3-.5 8.7 3.7 8.7 3.7s.5 1.6 1.4 2.1c.8.5 11.1 1.3 10.2 3.6-.4 1 .3 1.1-1.3 1.8-1.6.8-7.4.5-8.9.5-1.8.2-8.3 1.3-8.3 1.3z"/>

</svg><br>Black Goose Bistro</h1>

 

<h2>The Restaurant</h2>

<p>The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly to highlight the freshest local ingredients.</p>

 

<h2>Catering</h2>

<p>You have fun. <em>We'll handle the cooking.</em> Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers.</p>

 

<h2>Location and Hours</h2>

<p>Seekonk, Massachusetts;<br>

Monday through Thursday 11am to 9pm; <br>Friday and Saturday, 11am to midnight</p>

 

<footer>

<p>Please visit our social media pages</p>

<p>

<img src="icons/twitter.svg" alt="twitter">

<img src="icons/facebook.svg" alt="facebook">

<img src="icons/instagram.svg" alt="instagram">

</p>

</footer>

</body>

</html>

[Kết quả trên trình duyệt]


Bài tập 3. Sử dụng Developer tools của trình duyệt web và lệnh window.devicePixelRatio của JavaScript, cho biết giá trị device-pixel-ratios của một số thiết bị: laptop, iPhone 12 Pro, iPad Air, Samsung Galaxy?

– Xem hướng dẫn cách làm trong phần Hiển thị ảnh linh hoạt.

– Kết quả tham khảo:

laptop – 1x

iPhone 12 Pro – 3x

iPad Air – 2x

Samsung Galaxy S8+ - 4x

1.1.2       Câu hỏi ôn tập

Câu 1. Phát biểu nào không đúng, khi nói về phần tử img?

A. Img là phần tử kiểu inline

B. srcalt là 2 thuộc tính bắt buộc phải có

C. Trong mọi trường hợp, bạn nên thiết lập sẵn kích thước cố định cho ảnh

D. Bạn có thể sử dụng tính chất cache hình ảnh của trình duyệt, để tăng tốc độ hiển thị trang web.

Câu 2. Trong thuật ngữ “ảnh SVG”, từ SVG là viết tắt của?

A. Satify Vector Graphics

B. Static Vector Graphics

C. Scalable Vector Graphics

D. Scalable Vertical Graphics

Câu 3. Trong phần hiển thị ảnh SVG, có nói tới kĩ thuật “fallbacks”, nó là cái gì?

A. Là kĩ thuật làm mờ ảnh

B. Là kĩ thuật làm rõ ảnh

C. Là kĩ thuật “cache ảnh” trong trình duyệt

D. Là giải pháp dự phòng, trong trường hợp không tải được ảnh SVG

Câu 4. Responsive web design is a type of web design that allows web pages to __(1)___ to the screen size of the device that they are being viewed on. This means that whether a user is viewing a web page on a desktop computer, a tablet, or a smartphone, the page will be able to adjust its ___(2)___ in order to provide the best possible experience for that particular device.

A. (1) adapt, (2) HTML document

B. (1) display, (2) HTML document

C. (1) disappear, (2) colors

D. (1) adapt, (2) layout and content

Đáp án: 1 (C), 2 (C), 3(D), 4(D)

-----

Cập nhật: 14/1/2023

Tải tài liệu đầy đủ: Tự học HTML căn bản