[renpy] ทำร้านค้าแบบ Advanced + Imagemap

Thaigraph › หน้าฟอรั่ม › Ren'Py › [renpy] ทำร้านค้าแบบ Advanced + Imagemap ...

ดู: 2312\|ตอบ: 14	go [renpy] ทำร้านค้าแบบ Advanced + Imagemap

NOOKFUFU2

ผู้คุมกฏไทยกราฟ

Rank: 7 Rank: 7 Rank: 7

โพสต์เมื่อ 19-5-2015 12:58 |แสดงโพสต์ทั้งหมด

[renpy] ทำร้านค้าแบบ Advanced + Imagemap

รูปแบบการเขียนก็จะเป็นการนำโค๊ดจากบทความ - [renpy] ทำร้านค้าแบบ Advanced ซึ่งข้าพเจ้าได้อธิบายแต่ละขั้นตอนไปแบบละเอียดไปแล้ว มาในทความนี้ก็จะเป็นการนำ Imagemap มาใช้ร่วมกันเพื่อให้เกมส์ดูมีสีสันน่าสนใจขึ้นนะคะ

รูปแบบการทำงาน:
1. เมื่อเริ่มเกมส์ผู้เล่นจะได้รับเงินเพิ่มเติม และให้ ren'py แสดงค่าเงินคงเหลือทั้งหมดให้ผู้เล่นทราบ
2. จากนั้นผู้เล่นจะเข้าร้านขายขนม (โชว์หน้า Imagemap ขึ้นมา) และให้แสดงค่าเงินคงเหลือล่าสุดที่มุมจอขวาบน
3. ในกรณีที่ราคาสินค้า มากกว่า จำนวนเงินที่ผู้เล่นมีอยู่ ren'py จะแจ้งว่า "คุณไม่มีเงินพอซื้อ" แล้วกลับไปที่หน้าร้านขายขนมใหม่อีกครั้ง
4. หลังจากผู้เล่นเลือกซื้อขนมที่ต้องการได้แล้ว ก็ให้ ren'py ทวนอีกครั้งว่าผู้เล่นเพิ่งซื้อสินค้าอะไรไป และราคาเท่าไหร่ และเหลือผู้เล่นเงินอยู่เท่าไหร่
5. ในกรณีที่ผู้เล่นคลิกที่ "ปุ่มออกจากร้าน" ren'py จะออกจากระบบการศินค้าทันที

เอาละมาเริ่มกันเลย:
เริ่มแรกก็ทำภาพที่จะเป็น Map ขึ้นมาก่อนค่ะ วิธีการทำภาพ Map คุณสามารถศึกษาเพิ่มเติมได้จากบทความนี้ค่ะ [renpy] วิธีทำ Imagemap ภายในเกมส์

ต่อไปก็มาความฟังก์ชั่นสำหรับให้แสดงค่าเงินล่าสุดที่หน้าจอเกมส์ โดยตอนแรกเราจะสั่งให้มันซ่อนไว้ก่อน (ให้แสดงเฉพาะบนหน้า Imagemap เท่านั้น)

ให้นำโค๊ดนี้ไปใส่ที่ไฟล์ options.rpy ค่ะ

init:
$ current_money = 0
$ currentmoney = current_money
$ update_money = False
python hide:
def updatemoney():
if update_money:
ui.text("%d" % (current_money), color="#ffffff", size=40 , bold = True, xalign=0.91,yalign=0.21)
config.overlay_functions.append(updatemoney)

คัดลอกไปที่คลิปบอร์ด

แล้วก็ให้นำตัวอย่างโค๊ดนี้ไปใส่ไว้ที่ไฟล์ script.rpy ค่ะ (ถ้าคุณนำไปใส่โดยตรงแล้วสั่งรันโปรแกรมเลย มันจะ Error เพราะคุณยังไม่มีภาพ Map ) สำหรับภาพ ImageMap และตัวอย่างไฟล์จะมีให้โหลดที่ลิงค์ด้านล่างนะค่ะ

define b = Character('คิมหันต์', color="#f8f092")
init python:
class Item:
def __init__(self, name, cost):
self.name = name
self.cost = cost
class Inventory:
def __init__(self, money=100):
self.money = money
self.items = []
def buy(self, item):
if self.money >= item.cost:
self.money -= item.cost
self.items.append(item)
return True
else:
return False
def earn(self, amount):
self.money += amount
def has_item(self, item):
if item in self.items:
return True
else:
return False
label start:
python:
inventory = Inventory()
cake_strawberry = Item("เค้กสตอเบอรี่", 55)
cupcake_mix_fruit = Item("คัพเค้กผลไม้รวม", 45)
cake_mix_fruit = Item("เค้กผลไม้รวม", 50)
roll_strawberry = Item("โรลสตอเบอรี่", 30)
roll_green_tea = Item("โรลชาเขียว", 30)
roll_chocolate = Item("โรลช็อคกาแล๊ต", 30)
hbd_1 = Item("เค้กวันเกิด 1 ชั้น", 159)
hbd_2 = Item("เค้กวันเกิด 2 ชั้น", 550)
hbd_3 = Item("เค้กวันเกิด 3 ชั้น", 480)
b "อุ้ย! เจอเงิน 100 บาท"
$ inventory.earn(100) #เพิ่มเงินเข้าไปอีก 100 บาท
$ current_money = inventory.money #ตรงนี้จะมีเงินรวมอยู่เท่ากับ 200 บาท
b "ตอนนี้ฉันมีเงินอยู่ %(current_money)d บาท"
b "หิวขนมจังเลย.... T T ไปหาซื้อขนมอร่อยๆ มากินดีกว่า"
"(...คุณรีบตรงไปที่ร้านเบอเกอรี่ใกล้บ้าน...)"
jump bakeryshop
label bakeryshop:
$ update_money = True #แสดงยอดเงินล่าสุด
#อ้างอิงตัวแปร "ราคาของสินค้า"
$ cake_strawberrycost = cake_strawberry.cost
$ cupcake_mix_fruitcost = cupcake_mix_fruit.cost
$ cake_mix_fruitcost = cake_mix_fruit.cost
$ roll_strawberrycost = roll_strawberry.cost
$ roll_green_teacost = roll_green_tea.cost
$ roll_chocolatecost = roll_chocolate.cost
$ hbd_1cost = hbd_1.cost
$ hbd_2cost = hbd_2.cost
$ hbd_3cost = hbd_3.cost
#อ้างอิงตัวแปร "ชื่อของสินค้า"
$ cake_strawberryname = cake_strawberry.name
$ cupcake_mix_fruitname = cupcake_mix_fruit.name
$ cake_mix_fruitname = cake_mix_fruit.name
$ roll_strawberryname = roll_strawberry.name
$ roll_green_teaname = roll_green_tea.name
$ roll_chocolatename = roll_chocolate.name
$ hbd_1name = hbd_1.name
$ hbd_2name = hbd_2.name
$ hbd_3name = hbd_3.name
$ name_bakery = inventory.items
call screen bakery_shop
$ result = _return
if result == "cake_strawberry":
if inventory.buy(cake_strawberry):
$ update_money = False
b "คุณได้ซื้อ%(cake_strawberryname)s ราคา %(cake_strawberrycost)d บาท"
jump game_continues
elif result == "cupcake_mix_fruit":
if inventory.buy(cupcake_mix_fruit):
$ update_money = False
b "คุณได้ซื้อ%(cupcake_mix_fruitname)s ราคา %(cupcake_mix_fruitcost)d บาท"
jump game_continues
elif result == "cake_mix_fruit":
if inventory.buy(cake_mix_fruit):
$ update_money = False
b "คุณได้ซื้อ%(cake_mix_fruitname)s ราคา %(cake_mix_fruitcost)d บาท"
jump game_continues
elif result == "roll_strawberry":
if inventory.buy(roll_strawberry):
$ update_money = False
b "คุณได้ซื้อ%(roll_strawberryname)s ราคา %(roll_strawberrycost)d บาท"
jump game_continues
elif result == "roll_green_tea":
if inventory.buy(roll_green_tea):
$ update_money = False
b "คุณได้ซื้อ%(roll_green_teaname)s ราคา %(roll_green_teacost)d บาท"
jump game_continues
elif result == "roll_chocolate":
if inventory.buy(roll_chocolate):
$ update_money = False
b "คุณได้ซื้อ%(roll_chocolatename)s ราคา %(roll_chocolatecost)d บาท"
jump game_continues
elif result == "HBD_1":
if inventory.buy(hbd_1):
$ update_money = False
b "คุณได้ซื้อ%(hbd_1name)s ราคา%(hbd_1cost)d บาท"
jump game_continues
elif result == "HBD_2":
if inventory.buy(hbd_2):
$ update_money = False
b "คุณได้ซื้อ%(hbd_2name)s ราคา%(hbd_2cost)d บาท"
jump game_continues
elif result == "HBD_3":
if inventory.buy(hbd_3):
$ update_money = False
b "คุณได้ซื้อ%(hbd_3name)s ราคา %(hbd_3cost)d บาท"
jump game_continues
elif result == "next":
jump game_continues
label fallthrough:
$ result = renpy.imagemap("image/no_money.jpg", "image/no_money.jpg", [
(0, 0, 800, 600, "click")])
if result == "click":
jump bakeryshop
label game_continues:
$ update_money = False
b "(และฉันก็เดินออกจากร้าน)"
$ current_money = inventory.money
b "ฉันเหลือเงิน %(current_money)d บาท"
if inventory.has_item(cake_strawberry):
b "จะกิน %(cake_strawberryname)s ให้อิ่มเลย"
elif inventory.has_item(cupcake_mix_fruit):
b "จะกิน %(cupcake_mix_fruitname)s ให้อิ่มเลย"
elif inventory.has_item(cake_mix_fruit):
b "จะกิน %(cake_mix_fruitname)s ให้อิ่มเลย"
elif inventory.has_item(roll_strawberry):
b "จะกิน%(roll_strawberryname)s ให้อิ่มเลย"
elif inventory.has_item(roll_green_tea):
b "จะกิน %(roll_green_teaname)s ให้อิ่มเลย"
elif inventory.has_item(roll_chocolate):
b "จะกิน %(roll_chocolatename)s ให้อิ่มเลย"
elif inventory.has_item(hbd_1):
b "จะกิน %(hbd_1name)s ให้อิ่มเลย"
elif inventory.has_item(hbd_2):
b "จะกิน %(hbd_2name)s ให้อิ่มเลย"
elif inventory.has_item(hbd_3):
b "จะกิน %(hbd_3name)s ให้อิ่มเลย"
else:
b "เฮ้อ.. กลับบ้านไปต้มมาม่ากินดีกว่า -*- "
screen bakery_shop:
imagemap:
ground "image/bakery_shop.jpg" #ชื่อภาพแบบปกติ
hover "image/bakery_shop_hover.jpg" #ชื่อภาพเมื่อเอาเม้าส์วางทับ
hotspot (81, 115, 122, 145) clicked Return("cake_strawberry")
hotspot (230, 115, 155, 135) clicked Return("cupcake_mix_fruit")
hotspot (404, 115, 129, 145) clicked Return("cake_mix_fruit")
hotspot (81, 260, 122, 154) clicked Return("roll_strawberry")
hotspot (230, 260, 155, 154) clicked Return("roll_green_tea")
hotspot (404, 260, 129, 154) clicked Return("roll_chocolate")
hotspot (81, 429, 122, 134) clicked Return("HBD_1")
hotspot (230, 429, 155, 134) clicked Return("HBD_2")
hotspot (404, 429, 129, 134) clicked Return("HBD_3")
hotspot (611, 491, 155, 72) clicked Return("next")

คัดลอกไปที่คลิปบอร์ด

ทดสอบการทำงาน:

- แสดงจำนวนเงินคงเหลือให้ผู้เล่นทราบ

- ให้ผู้เล่นเข้าร้านขายขนมเพื่อเลือกสินค้า ทดสอบเลือกซื้อ เค้ก 3 ชั้นซึ่งมีราคาสูงกว่าจำนวนเงินที่ผู้เล่นมี

- เกมส์ทำการเตือนว่าเงินไม่พอ ผู้เล่นไม่สามารถซื้อสินค้าชิ้นนี้ได้ แล้วกลับไปแสดงหน้าร้านขายขนมอีกครั้ง

- จากนั้นทดลองเลือกซื้อ โรลช็อคกาแล๊ต ซึ่งราคาถูกกว่า และผู้เล่นสามารถซื้อได้

- โปรแกรมแจ้งว่าผู้เล่นเพิ่งได้ทำการซื้อสินค้าชนิดใด และราคาเท่าไหร่ไป

- บอกผู้เล่นได้ทราบว่าตอนนี้เขาเหลือเงินเท่าไหร่แล้ว

จบแล้วค่ะ ^^" โค๊ดบางตัวอาจจะเขียนเกินๆ มาบ้างนะคะ ไม่ได้ลบออก พอดีเขียนๆ ออกมาเลย ไม่มีเวลาเช็ค
ตัวอย่างไฟล์เกมส์และภาพ Map ประกอบโหลดได้ที่นี่ค่ะ แล้วพบกันใหม่บทความหน้านะคะ
[hide][/hide]

เวคเตอร์รูปขนมน่ารักๆ โหลดเพิ่มเติมได้ที่นี่นะคะ http://www.thaigraph.com/forum-68-1.html เพื่ออยากเอาไปใช้ (เป็นไฟล์ .AI ต้องใช้โปรแกรม Illustrator เปิด)
บทความโดย NOOKFUFU2
(ขอสงวนสิทธิ์ให้เผยแพร่เฉพาะเว็บไทยกราฟเท่านั้น!!!)

ไฟล์แนบ: คุณจำเป็นต้องเข้าสู่ระบบก่อนจึงจะสามารถดูและดาวน์โหลดไฟล์แนบได้ หากยังไม่มีแอคเคานต์หรือยังไม่ได้เป็นสมาชิก กรุณาสมัครสมาชิก
บางบทความคุณจำเป็นต้องสมัครสมาชิกแบบ VIP และ SUPERVIP ถึงจะเข้าอ่านบทความได้