Hướng dẫn lập trình Alice

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.2 MB, 64 trang )

Bắt đầu với Alice

Được thực hiện bởi Ruthie Tucker

dưới sự hướng dẫn của giáo sư Susan Rodger
Đại học Duke, tháng 7 2008

</div>
<span class='text_page_counter'>(2)</span><div class='page_container' data-page=2></div>
<span class='text_page_counter'>(3)</span><div class='page_container' data-page=3>

Điều đầu tiên trong việc tạo thế giới
Alice là chọn background.

Khi bạn mở Alice, hộp thoại sẽ tự
động xuất hiện. Bạn có thể nhấn
vào thẻ “Templates”.

Hôm nay, chúng ta sẽ chọn phông
nền nước.

Nhấn vào “water” và sau đó nhấn
vào nút “open”.

</div>
<span class='text_page_counter'>(4)</span><div class='page_container' data-page=4>

<i>Sau khi bạn chọn phơng nền Water, màn hình của bạn sẽ trông như </i>
<i>thế này.</i>

</div>
<span class='text_page_counter'>(5)</span><div class='page_container' data-page=5>

Bây giờ, hãy thêm

objects

vào thế

giới. Chúng ta sẽ thêm vào con

cá vàng và cô tiên.

Bên phải của khung hiển thị, nhấn

vào nút

“Add Objects.”

</div>
<span class='text_page_counter'>(6)</span><div class='page_container' data-page=6>

Khi bạn nhấn vào

“add objects”

amột thư viện các đối tượng sẽ

xuất hiện, trên màn hình, phía dưới phơng nền Water.

<i>Đây là thư viện đối tượng sẵn có trên máy tính của bạn. Nó bao </i>
<i>gồm nhiều thư mục, mỗi thư mục sẽ chứa các đối tượng trong </i>
<i>đó. </i>

</div>
<span class='text_page_counter'>(7)</span><div class='page_container' data-page=7>

Chọn thư mục

animals

và cuộn cho

đến khi bạn tìm thấy

Goldfish

.

Nhấn vào

Goldfish

.

Nhấn vào

“Add instance to world.”

<i>Cá vàng sẽ xuất hiện trong thế giới của </i>

<i>bạn.</i>

</div>
<span class='text_page_counter'>(8)</span><div class='page_container' data-page=8>

<i>Đầu tiên chúng ta cần thêm vào cô </i>
<i>tiên.</i>

Nhấn vào

“Local

Gallery”

để quay trở

về thư viện sẵn có

trên máy tính.

</div>
<span class='text_page_counter'>(9)</span><div class='page_container' data-page=9>

Bây giờ, cuộn đến thư mục

“Fantasy” .

Sau đó chọn thư mục

“Fairies”.

<b>Thêm đối tượng – Cô tiên</b>

Thêm cô tiên vào thế giới
của bạn, bằng cách nhấn
vào cơ ta và sau đó nhấn

“Add Instance to World”.

</div>
<span class='text_page_counter'>(10)</span><div class='page_container' data-page=10>

Khi bạn thêm đối tượng vào thế giới,
chúng sẽ xuất hiện trong danh
sách bên tay trái màn hình của
bạn.

<i>Danh sách này được gọi là Object </i>
<i>Tree.</i>

<i>Lúc này, bạn đã có 2 đối tượng trong thế </i>
<i>giới của bạn, con cá và cơ tiên.</i>

</div>
<span class='text_page_counter'>(11)</span><div class='page_container' data-page=11>

<i>Bây giờ hãy nhìn bên phải màn </i>

<i>hình.</i>

<i>Tất cả các nút có hình mặt người </i>

<i>ở trên sẽ giúp bạn định vị được </i>

<i>đối tượng.</i>

<b>Định vị đối tượng</b>

Nhấn vào white arrow, hãy thử nhấn vào
cô tiên và di chuyển cô ta.

</div>
<span class='text_page_counter'>(12)</span><div class='page_container' data-page=12>

Nhấn

vào nó và di chuyển cơ

tiên sao cho cơ ta lơ lửng trên

mặt nước

<b>Định vị đối tượng – Up & down</b>

</div>
<span class='text_page_counter'>(13)</span><div class='page_container' data-page=13>

Nút này được dùng để xoay

đối tượng

(spin)

.

Thử xoay con cá vàng sao cho nó
song song với màn hình.

</div>
<span class='text_page_counter'>(14)</span><div class='page_container' data-page=14>

<i>Bất kể lúc nào bạn làm sai trong Alice, </i>
<i>bạn cũng có thể nhấn vào nút Undo và </i>
<i>Alice sẽ trả về thao tác gần nhất.</i>

</div>
<span class='text_page_counter'>(15)</span><div class='page_container' data-page=15>

<i>của bạn về phía sau hoặc phía </i>
<i>trước. </i>

Sử dụng nó để làm cho cơ tiên

nghiêng nhẹ về phía trước.

</div>
<span class='text_page_counter'>(16)</span><div class='page_container' data-page=16>

<i>Nút tiếp theo là tumble. Nó sẽ di </i>
<i>chuyển đối tượng của bạn đến tất </i>
<i>cả các nơi.</i>

Sử dụng nó để di chuyển cơ tiên sao
cho cơ ta hướng mặt về phía con cá.

<i>Lưu ý: Nếu bạn khơng thích vị trí </i>
<i>của cơ ta, nhấn “Undo” và </i>
<i>thử di chuyển lại.</i>

</div>
<span class='text_page_counter'>(17)</span><div class='page_container' data-page=17>

<i>Nút này sẽ làm cho đối tượng của </i>

<i>bạn lớn hoặc nhỏ hơn.</i>

Nhấn vào nó và làm cho con cá

vàng lớn hơn cơ tiên.

<b>Định vị đối tượng – Resize</b>

Bây giờ hãy di chuyển con cái xuống. Di
chuyển sao cho con cá hơi nhơ lên
khỏi mặt nước.

</div>
<span class='text_page_counter'>(18)</span><div class='page_container' data-page=18>

Cịn 1 nút nữa nhưng chúng ta

KHÔNG

sử dụng.

Nút này sẽ

copy

đối tượng của

bạn, tuy nhiên, về sau nó sẽ

gây ra một số vấn đề

VÌ THẾ

KHƠNG SỬ DỤNG NÓ

!

Tốt hơn là bạn nên thêm đối

tượng từ thư viện nếu bạn

muốn.

<b>Định vị đối tượng – Copy</b>

</div>
<span class='text_page_counter'>(19)</span><div class='page_container' data-page=19>

Nhấn vào nút “done” để thoát khỏi thư viện đối
tượng.

Lúc này, màn hình của bạn sẽ trơng như thế này:
<b>Định vị đối tượng</b>

</div>
<span class='text_page_counter'>(20)</span><div class='page_container' data-page=20>

<i>Dummy Camera được thiết kế để lưu </i>
<i>lại vị trí camera trong lúc bạn di </i>

<i>chuyển camera xung quanh. </i>

Một lần nữa, nhấn vào nút “add
objects” và tìm nút màu xám bên
dưới các nút định vị đối tượng.

Nhấn vào nút

“more

controls >>”

.

</div>
<span class='text_page_counter'>(21)</span><div class='page_container' data-page=21>

Một khi bạn nhấn vào nút

“more controls”

bạn sẽ thấy

một menu xổ xuống.

Nhấn vào

“drop dummy at

camera”

.

Chỉ nhấn

1 lần

!

</div>
<span class='text_page_counter'>(22)</span><div class='page_container' data-page=22>

Khi bạn thả camera giả vào.
Một thư mục sẽ xuất hiện
trong object tree được gọi là

“Dummy Objects.”

Nếu bạn nhấn vào dấu + bên cạnh thư
mục Dummy Objects, danh sách các
camera giả của bạn sẽ xuất hiện.

Lúc này, chỉ có một camera thêm vào, gọi
là “Dummy”.

</div>
<span class='text_page_counter'>(23)</span><div class='page_container' data-page=23>

Nhấn phải chuột ở “Dummy” <i>(control + click đối với Macs) và chọn </i>

rename để đổi tên camera.
Hãy đổi tên nó thành “Start.”

</div>
<span class='text_page_counter'>(24)</span><div class='page_container' data-page=24>

Bây giờ, chúng ta có thể di

chuyển camera đến vị trí khác

bằng cách sử dụng

mũi tên tím

phía dưới màn hình.

Di chuyển

camera sao cho nó

lại gần với cô tiên.

</div>
<span class='text_page_counter'>(25)</span><div class='page_container' data-page=25>

Hãy thả vào một

Dummy Camera

khác tại vị trí của cơ tiên và đặt

tên nó là

“Fairy.”

Nhấn phải chuột

vào

camera

trong

object tree

</div>
<span class='text_page_counter'>(26)</span><div class='page_container' data-page=26>

Nhấn phải chuột vào Camera và
chọn “methods”, -> “camera
set point of view to” ->

“Dummy Objects”, -> “Start”.

• <i><sub>Điều này giúp bạn đặt camera </sub></i>

</div>
<span class='text_page_counter'>(27)</span><div class='page_container' data-page=27>

Hãy tạo camera cho con cá và

đặt tên

“Fish.”

</div>
<span class='text_page_counter'>(28)</span><div class='page_container' data-page=28>

Cuối cùng, đặt vị trí của

camera ban đầu quay về vị trí

“Start”

.

Nhấn vào

“Done”

ở góc dưới

phải để thốt khỏi màn hình

“add objects”

.

</div>
<span class='text_page_counter'>(29)</span><div class='page_container' data-page=29></div>
<span class='text_page_counter'>(30)</span><div class='page_container' data-page=30>

<i>Khoảng trống lớn giữa màn hình của bạn gọi là “Method Editor.” Method </i>
<i>editor được sử dụng để thêm hành động cho nhân vật.</i>

</div>
<span class='text_page_counter'>(31)</span><div class='page_container' data-page=31>

Đây là tất cả những hành động mà cơ tiên có thể làm.
Bạn có thể nhìn thấy nó bằng cách nhấn vào cơ tiên

trong object tree và chọn thẻ methods.

</div>
<span class='text_page_counter'>(32)</span><div class='page_container' data-page=32>

Lúc này thay vì bạn nhấn phải chuột,

kéo

camera set point of view to

vào method

editor.

Đặt khung nhìn của camera thành “

Fairy

.”

</div>
<span class='text_page_counter'>(33)</span><div class='page_container' data-page=33>

Nhấn vào

lichenZenspider

để quay trở lại

các hành động của cô tiên.

Nhấn vào hành động có tên là “

Wink

,”

kéo

và thả

nó vào khung method editor.

</div>
<span class='text_page_counter'>(34)</span><div class='page_container' data-page=34>

Khi bạn nhấn play, cơ tiên sẽ nháy mắt phải
của cơ ta.

Đóng cửa sổ “World Running” khi đoạn phim
chạy xong.

Hãy thử kéo và thả vào các hành động khác
nhau, sau đó nhấn play để xem chúng
làm gì.

Lưu ý rằng hành động “flap wing”
yêu cầu bạn cho duration và

amount.

</div>
<span class='text_page_counter'>(35)</span><div class='page_container' data-page=35>

Nếu bạn muốn xóa bất
kỳ dòng nào, chỉ cần

nhấn phải chuột ngay
dịng đó và chọn

“delete.”

<b>Hành động – Delete</b>

</div>
<span class='text_page_counter'>(36)</span><div class='page_container' data-page=36>

<i>Đây là những hành động đơn giản </i>
<i>mà cô tiên có thể làm.</i>

<i>Đây là những hành động mà bằng </i>
<i>cách kết hợp chúng, bạn sẽ tạo </i>
<i>ra các hành động khác cho cô </i>

</div>
<span class='text_page_counter'>(37)</span><div class='page_container' data-page=37>

Hãy bắt đầu từ những thứ đơn giản. Đi đến thẻ methods của cô tiên và chọn
nút màu xám “Create new method.”

Đặt tên là “Talk.” Một thẻ mới “lichenZenSpider.Talk” sẽ xuất hiện bên cạnh
thẻ “world.my first method” trong khung method editor.

</div>
<span class='text_page_counter'>(38)</span><div class='page_container' data-page=38>

Bây giờ hãy nhìn vào các hành
động đơn giản của cơ tiên và tìm
ra hành động “say”.

Kéo và thả nó vào khung method
editor.

• Chọn “other…”, nó sẽ xuất hiện
hộp thoại cho bạn gõ vào.

• Gõ “I’m flying!” và nhấn OK.

</div>
<span class='text_page_counter'>(39)</span><div class='page_container' data-page=39>

<i>Hãy thử nó một lần nữa nhưng </i>

<i>hãy cho nói một gì đó khác.</i>

<i>Bây giờ bạn </i>

<i>hãy thử chạy </i>

<i>chương </i>

</div>
<span class='text_page_counter'>(40)</span><div class='page_container' data-page=40>

<i>Sự kiện là cách để gọi </i>

<i>hành động mà bạn tạo </i>

<i>khi chạy chương trình</i>

<i>Cửa sổ event editor nằm </i>

<i>ở góc phải trên màn hình </i>

<i>của bạn.</i>

Chúng ta muốn cơ tiên nói “I’m flying” và câu cịn lại khi chúng ta

nhấn phím

space bar

.

Để làm điều đó, chúng ta sẽ

thêm sữ kiện

và

gọi

hành động

Talk

mà

chúng ta đã viết.

</div>
<span class='text_page_counter'>(41)</span><div class='page_container' data-page=41>

Nhấn vào “create new
event”

Bạn sẽ thấy danh sách
các sự kiện trong cửa sổ
events editor.

Chọn “when a key is typed”

Sau khi nhấn vào nó, bạn sẽ
được như thế này.

</div>
<span class='text_page_counter'>(42)</span><div class='page_container' data-page=42>

Nhấn vào “nothing” và chọn

lichenZenSpider -> Talk.

Nhấn vào “any key” và chọn Space.

<i>Cửa sổ event editor sẽ giống như thế này.</i>

</div>
<span class='text_page_counter'>(43)</span><div class='page_container' data-page=43>

Hãy thử chạy

Mỗi lần bạn nhấn

space bar

, cơ tiên sẽ nói “I’m flying”, và sau đó

là “This is fun!”

</div>
<span class='text_page_counter'>(44)</span><div class='page_container' data-page=44>

Bây giờ, hãy làm cho cô tiên bay xung quanh con
cá.

Nhấn vào cô tiên trong object tree và vào thẻ

methods.

Nhấn nút “create new method.”

<b>Hành động – FairyFly</b>

Sau khi nhấn vào nó, sẽ xuất
hiện hộp thoại bảo bạn đặt
tên cho hành động mới vừa
tạo.

Hãy đặt tên là “FairyFly”.

</div>
<span class='text_page_counter'>(45)</span><div class='page_container' data-page=45>

Đầu tiên, chúng ta sẽ đặt camera quay về vị trí ban

đầu.

Nhấn vào camera trong object tree. Đi đến danh
sách các hành động của nó và tìm “camera set
point of view to.”

Kéo nó vào method editor.

Chọn “Dummy Objects” -> “Start”.

</div>
<span class='text_page_counter'>(46)</span><div class='page_container' data-page=46>

Bây giờ hãy cho cô tiên vỗ cánh.

Nhấn vào lichenZenspider trong object
tree và sau đó chọn thẻ “methods”.
Kéo hành động flapWings vào.

<b>Hành động – FairyFly</b>

</div>
<span class='text_page_counter'>(47)</span><div class='page_container' data-page=47>

<i>Trước khi chúng ta kiểm tra thử, chúng ta cần thay đổi trong cửa sổ events </i>
<i>editor cho hành động FairyFly được thực hiện.</i>

Chúng ta cần thay đổi sự kiện “when the world starts” thành hành động
“FairyFly”. Nhấn vào mũi tên kế bên chữ “world.my first method” và
chọn “lichenZenSpider” -> “FairyFly”.

</div>
<span class='text_page_counter'>(48)</span><div class='page_container' data-page=48>

Cửa event editor sẽ trơng như hình trên.

Hãy thử chạy chương trình. Camera của bạn sẽ quay về vị trí ban đầu và cơ
tiên sẽ vỗ cánh.

<b>Hành động– FairyFly</b>

</div>
<span class='text_page_counter'>(49)</span><div class='page_container' data-page=49>

Quay trở lại các hành động của cơ tiên và chọn “

turn

”, kéo thả nó

vào khung method editor.

Cho cô tiên

turn left 1 revolution

.

</div>
<span class='text_page_counter'>(50)</span><div class='page_container' data-page=50>

<i>Chương trình của </i>
<i>bạn sẽ trơng như </i>
<i>thế này</i>

<b>Hành động – FairyFly</b>

Hãy thử chạy.

</div>
<span class='text_page_counter'>(51)</span><div class='page_container' data-page=51>

Đầu tiên, hãy cho cô ta vẫy cánh và
quay cùng 1 lúc.

Nhìn vào phía dưới màn hình và tìm
nút “Do Together.”

Kéo và thả nó vào method

editor. Sau đó đặt đoạn “flap
wings” và đoạn “turn” vào

trong đó.

Hãy thử chạy chương trình

</div>
<span class='text_page_counter'>(52)</span><div class='page_container' data-page=52>

Sau khi nhấn vào mũi tên thì một menu nhỏ sẽ xuất hiện.
Chọn “asSeenBy” -> “goldfish” -> “the entire goldfish”.

Để làm cho cô tiên bay xung quanh con cá, chúng ta cần chọn
“more” bên cạnh đoạn code “Turn”.

</div>
<span class='text_page_counter'>(53)</span><div class='page_container' data-page=53>

<i>Nó sẽ làm cho cơ tiên quay xung quanh con cá.</i>

Hãy chạy thử chương trình.

<i>Hãy làm cho cô tiên cưỡi </i>
<i>lên lưng con cá sau khi đã </i>
<i>bay xung quanh.</i>

</div>
<span class='text_page_counter'>(54)</span><div class='page_container' data-page=54>

Đầu tiên chúng ta sẽ tạo hành động mới và đặt tên nó là “RideFish.”
Nhấn vào “lichenZenspider”, chọn thẻ “methods”. Nhấn “create new

method” và đặt tên nó là “RideFish.”

Bên trong method editor, kéo lệnh “move to” và chọn “goldfish” ->
“the entire goldfish.” Code của bạn sẽ trông như thế này.

</div>
<span class='text_page_counter'>(55)</span><div class='page_container' data-page=55>

<i>Lúc này chúng ta cần một cách nào đó để dán cô </i>
<i>tiên và con cá vàng để khi con cá vàng di chuyển, </i>
<i>cơ tiên sẽ di chuyển theo nó.</i>

Chúng ta sẽ sử dụng vehicle property. Bạn có
thể tìm thấy nó trong thẻ properties của cơ tiên.
<b>Hành động – RideFish</b>

Kéo thuộc tính vehicle vào khung method editor và chọn goldfish -> the entire
goldfish.

</div>
<span class='text_page_counter'>(56)</span><div class='page_container' data-page=56>

Hãy làm sự kiện cho hành động
này.

Nhấn vào “create new event” trong
cửa sổ events editor.

Chọn “let the arrow keys move
subject.”

Nó sẽ tự động đặt là

camera.

Thay đổi nó bằng cách
nhấn vào, chọn goldfish

-> the entire goldfish.

</div>
<span class='text_page_counter'>(57)</span><div class='page_container' data-page=57>

<i>Bạn có thể đặt chúng vào cùng với nhau. Hãy lưu ý rằng vào lúc bắt đầu hành </i>
<i>động trong method editor, có một hành động tên là “World.myfirstmethod.” Hành </i>
<i>động này dành cho việc nói lên cốt truyện của bạn. Hãy lưu ý rằng có rất nhiều thẻ </i>
<i>ở bên trên. Bạn có thể xem từng hành động bằng cách nhấn vào các thẻ đó. </i>

Nhấn vào thẻ “world.my first method”. Đây là thẻ mà chúng ta đặt tồn bộ code
chính. Code của bạn sẽ trơng khác với của tôi.

</div>
<span class='text_page_counter'>(58)</span><div class='page_container' data-page=58>

Đầu tiên chúng ta sẽ đặt camera trong “world.myfirstmethod” vào “Start”.
Kéo vào “camera set point of view to” và chọn “Dummy Objects” -> “Start”

</div>
<span class='text_page_counter'>(59)</span><div class='page_container' data-page=59>

<i>Nếu bạn nhìn vào bên dưới các hành động của cô tiên, </i>
<i>bạn sẽ thấy các hành động mà bạn đã viết. Chúng ta </i>
<i>có thể đặt chúng vào world.myfirstmethod để nói lên </i>
<i>câu chuyện. Hãy đặt vào hành động cô tiên bay xung </i>
<i>quanh và sau đó là cưỡi lên con cá.</i>

Kéo “FairyFly” và “Ridefish” vào World.myfirstmethod.

</div>
<span class='text_page_counter'>(60)</span><div class='page_container' data-page=60>

Bây giờ chúng ta sẽ sử dụng
sự kiện “When the world
starts” để gọi nó.

Nhấn vào mũi tên để thay đổi
thành “my first method.”

<i>Lúc này bạn sẽ thấy khi bạn chạy chương trình, cơ tiên sẽ bay xung </i>
<i>quanh con cá và sau đó đậu lên lưng nó.</i>

</div>
<span class='text_page_counter'>(61)</span><div class='page_container' data-page=61>

Tìm thuộc tính vehicle

của camera và kéo
thả nó vào giữa 2
dòng “FairyFly” và
“RideFish” trong code
của bạn.

Đặt nó thành

“goldfish” -> “the
entire goldfish”.

<i>Bạn có nhận thấy rằng khi chúng ta cho con cá di chuyển ra khỏi camera, </i>
<i>chúng ta khơng cịn nhìn thấy nó nữa. Hãy đặt camera thành một vehicle </i>
<i>của con cá!</i>

</div>
<span class='text_page_counter'>(62)</span><div class='page_container' data-page=62>

<i>Nếu sau này bạn muốn gỡ cô tiên ra khỏi con cá hoặc gỡ camera ra, dưới đây là </i>
<i>các hướng dẫn:</i>

<i>Để gỡ cô tiên ra khỏi con cá, đặt thuộc tính vehicle của cơ tiên trờ về “world”.</i>
<i>Để gỡ camera ra khỏi con cá, cũng đặt thuộc tính vehicle của nó trở về “world.” </i>

Khi bạn đã hồn tất, hãy thử
chạy chương trình.

</div>
<span class='text_page_counter'>(63)</span><div class='page_container' data-page=63>