Thaigraph

 

   

ค้นหา
Thaigraph หน้าฟอรั่ม Ren'Py [renpy] ทำร้านค้าแบบ Advanced + Imagemap ...
ดู: 1844|ตอบ: 13
go

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

Rank: 7Rank: 7Rank: 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 ค่ะ
  1. init:
  2.     $ current_money = 0
  3.     $ currentmoney = current_money
  4.     $ update_money = False
  5.     python hide:
  6.         def updatemoney():
  7.             if update_money:
  8.                 ui.text("%d" % (current_money), color="#ffffff", size=40 , bold = True, xalign=0.91,yalign=0.21)
  9.                
  10.         config.overlay_functions.append(updatemoney)
คัดลอกไปที่คลิปบอร์ด

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

  1. define b = Character('คิมหันต์', color="#f8f092")

  2. init python:
  3.     class Item:
  4.         def __init__(self, name, cost):
  5.             self.name = name
  6.             self.cost = cost

  7.     class Inventory:
  8.         def __init__(self, money=100):
  9.             self.money = money
  10.             self.items = []

  11.         def buy(self, item):
  12.             if self.money >= item.cost:
  13.                 self.money -= item.cost
  14.                 self.items.append(item)
  15.                 return True
  16.             else:
  17.                 return False

  18.         def earn(self, amount):
  19.             self.money += amount

  20.         def has_item(self, item):
  21.                 if item in self.items:
  22.                     return True
  23.                 else:
  24.                     return False

  25. label start:

  26.     python:
  27.         inventory = Inventory()
  28.         cake_strawberry = Item("เค้กสตอเบอรี่", 55)
  29.         cupcake_mix_fruit = Item("คัพเค้กผลไม้รวม", 45)
  30.         cake_mix_fruit = Item("เค้กผลไม้รวม", 50)
  31.         roll_strawberry = Item("โรลสตอเบอรี่", 30)
  32.         roll_green_tea = Item("โรลชาเขียว", 30)
  33.         roll_chocolate = Item("โรลช็อคกาแล๊ต", 30)
  34.         hbd_1 = Item("เค้กวันเกิด 1 ชั้น", 159)
  35.         hbd_2 = Item("เค้กวันเกิด 2 ชั้น", 550)
  36.         hbd_3 = Item("เค้กวันเกิด 3 ชั้น", 480)

  37.     b "อุ้ย! เจอเงิน 100 บาท"

  38.     $ inventory.earn(100) #เพิ่มเงินเข้าไปอีก 100 บาท
  39.     $ current_money = inventory.money #ตรงนี้จะมีเงินรวมอยู่เท่ากับ 200 บาท

  40.     b "ตอนนี้ฉันมีเงินอยู่ %(current_money)d บาท"
  41.     b "หิวขนมจังเลย.... T T ไปหาซื้อขนมอร่อยๆ มากินดีกว่า"
  42.     "(...คุณรีบตรงไปที่ร้านเบอเกอรี่ใกล้บ้าน...)"
  43.     jump bakeryshop
  44.    
  45. label bakeryshop:

  46.     $ update_money = True #แสดงยอดเงินล่าสุด
  47.    
  48.     #อ้างอิงตัวแปร "ราคาของสินค้า"
  49.     $ cake_strawberrycost = cake_strawberry.cost
  50.     $ cupcake_mix_fruitcost = cupcake_mix_fruit.cost
  51.     $ cake_mix_fruitcost = cake_mix_fruit.cost
  52.     $ roll_strawberrycost = roll_strawberry.cost
  53.     $ roll_green_teacost = roll_green_tea.cost
  54.     $ roll_chocolatecost = roll_chocolate.cost
  55.     $ hbd_1cost = hbd_1.cost
  56.     $ hbd_2cost = hbd_2.cost
  57.     $ hbd_3cost = hbd_3.cost
  58.    
  59.     #อ้างอิงตัวแปร "ชื่อของสินค้า"
  60.     $ cake_strawberryname = cake_strawberry.name
  61.     $ cupcake_mix_fruitname = cupcake_mix_fruit.name
  62.     $ cake_mix_fruitname = cake_mix_fruit.name
  63.     $ roll_strawberryname = roll_strawberry.name
  64.     $ roll_green_teaname = roll_green_tea.name
  65.     $ roll_chocolatename = roll_chocolate.name
  66.     $ hbd_1name = hbd_1.name
  67.     $ hbd_2name = hbd_2.name
  68.     $ hbd_3name = hbd_3.name
  69.    
  70.     $ name_bakery = inventory.items

  71.    
  72.     call screen bakery_shop
  73.     $ result = _return

  74.     if result == "cake_strawberry":
  75.         
  76.         if inventory.buy(cake_strawberry):
  77.             $ update_money = False
  78.             b "คุณได้ซื้อ%(cake_strawberryname)s  ราคา %(cake_strawberrycost)d บาท"
  79.             jump game_continues            

  80.     elif result == "cupcake_mix_fruit":
  81.         if inventory.buy(cupcake_mix_fruit):
  82.             $ update_money = False
  83.             b "คุณได้ซื้อ%(cupcake_mix_fruitname)s ราคา %(cupcake_mix_fruitcost)d บาท"
  84.             jump game_continues
  85.       
  86.     elif result == "cake_mix_fruit":                     
  87.         if inventory.buy(cake_mix_fruit):
  88.             $ update_money = False
  89.             b "คุณได้ซื้อ%(cake_mix_fruitname)s ราคา %(cake_mix_fruitcost)d บาท"
  90.             jump game_continues
  91.         
  92.     elif result == "roll_strawberry":
  93.         if inventory.buy(roll_strawberry):
  94.             $ update_money = False
  95.             b "คุณได้ซื้อ%(roll_strawberryname)s ราคา %(roll_strawberrycost)d บาท"
  96.             jump game_continues
  97.         
  98.     elif result == "roll_green_tea":
  99.         if inventory.buy(roll_green_tea):
  100.             $ update_money = False
  101.             b "คุณได้ซื้อ%(roll_green_teaname)s ราคา %(roll_green_teacost)d บาท"
  102.             jump game_continues
  103.         
  104.     elif result == "roll_chocolate":
  105.         if inventory.buy(roll_chocolate):
  106.             $ update_money = False
  107.             b "คุณได้ซื้อ%(roll_chocolatename)s ราคา %(roll_chocolatecost)d บาท"
  108.             jump game_continues
  109.         
  110.     elif result == "HBD_1":
  111.         if inventory.buy(hbd_1):
  112.             $ update_money = False
  113.             b "คุณได้ซื้อ%(hbd_1name)s ราคา%(hbd_1cost)d บาท"
  114.             jump game_continues
  115.         
  116.     elif result == "HBD_2":
  117.         if inventory.buy(hbd_2):
  118.             $ update_money = False
  119.             b "คุณได้ซื้อ%(hbd_2name)s ราคา%(hbd_2cost)d บาท"
  120.             jump game_continues
  121.         
  122.     elif result == "HBD_3":
  123.         if inventory.buy(hbd_3):
  124.             $ update_money = False
  125.             b "คุณได้ซื้อ%(hbd_3name)s  ราคา %(hbd_3cost)d บาท"
  126.             jump game_continues

  127.     elif result == "next":
  128.         jump game_continues


  129. label fallthrough:
  130.     $ result = renpy.imagemap("image/no_money.jpg", "image/no_money.jpg", [
  131.                            (0, 0, 800, 600, "click")])
  132.     if result == "click":
  133.         jump bakeryshop

  134. label game_continues:
  135.     $ update_money = False
  136.     b "(และฉันก็เดินออกจากร้าน)"
  137.     $ current_money = inventory.money
  138.     b "ฉันเหลือเงิน %(current_money)d บาท"

  139.     if inventory.has_item(cake_strawberry):
  140.         b "จะกิน %(cake_strawberryname)s ให้อิ่มเลย"

  141.     elif inventory.has_item(cupcake_mix_fruit):
  142.         b "จะกิน %(cupcake_mix_fruitname)s ให้อิ่มเลย"

  143.     elif inventory.has_item(cake_mix_fruit):
  144.         b "จะกิน %(cake_mix_fruitname)s ให้อิ่มเลย"

  145.     elif inventory.has_item(roll_strawberry):
  146.         b "จะกิน%(roll_strawberryname)s ให้อิ่มเลย"

  147.     elif inventory.has_item(roll_green_tea):
  148.         b "จะกิน %(roll_green_teaname)s ให้อิ่มเลย"

  149.     elif inventory.has_item(roll_chocolate):
  150.         b "จะกิน %(roll_chocolatename)s ให้อิ่มเลย"

  151.     elif inventory.has_item(hbd_1):
  152.         b "จะกิน %(hbd_1name)s ให้อิ่มเลย"

  153.     elif inventory.has_item(hbd_2):
  154.         b "จะกิน %(hbd_2name)s ให้อิ่มเลย"

  155.     elif inventory.has_item(hbd_3):
  156.         b "จะกิน %(hbd_3name)s ให้อิ่มเลย"

  157.     else:
  158.         b "เฮ้อ..  กลับบ้านไปต้มมาม่ากินดีกว่า -*- "
  159.    
  160. screen bakery_shop:
  161.     imagemap:
  162.         ground "image/bakery_shop.jpg"  #ชื่อภาพแบบปกติ
  163.         hover "image/bakery_shop_hover.jpg" #ชื่อภาพเมื่อเอาเม้าส์วางทับ

  164.         hotspot (81, 115, 122, 145) clicked Return("cake_strawberry")
  165.         hotspot (230, 115, 155, 135) clicked Return("cupcake_mix_fruit")
  166.         hotspot (404, 115, 129, 145) clicked Return("cake_mix_fruit")
  167.         hotspot (81, 260, 122, 154) clicked Return("roll_strawberry")
  168.         hotspot (230, 260, 155, 154) clicked Return("roll_green_tea")
  169.         hotspot (404, 260, 129, 154) clicked Return("roll_chocolate")
  170.         hotspot (81, 429, 122, 134) clicked Return("HBD_1")
  171.         hotspot (230, 429, 155, 134) clicked Return("HBD_2")
  172.         hotspot (404, 429, 129, 134) clicked Return("HBD_3")
  173.         hotspot (611, 491, 155, 72) clicked Return("next")
  174.         
คัดลอกไปที่คลิปบอร์ด

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



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



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




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




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




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




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




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


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


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

Rank: 1

โพสต์เมื่อ 6-8-2015 18:15 |แสดงโพสต์ทั้งหมด

ขอบคุณมากค่ะ

Rank: 1

โพสต์เมื่อ 4-9-2015 09:00 |แสดงโพสต์ทั้งหมด
กำลังหาสคริปแบบนี้อยู่พอดีเลย ขอบคุณมากๆค่ะ

Rank: 1

โพสต์เมื่อ 9-9-2015 15:20 |แสดงโพสต์ทั้งหมด
ขอบคุณมากๆครับกำลังหัดทำ

Rank: 1

โพสต์เมื่อ 5-12-2015 21:15 |แสดงโพสต์ทั้งหมด
ขอบคุณค่ะ กำลังอยากรู้วิธีพอดี

Rank: 1

โพสต์เมื่อ 19-12-2015 09:39 |แสดงโพสต์ทั้งหมด
ขอบคุณค่ะ

Rank: 1

โพสต์เมื่อ 25-12-2015 22:23 |แสดงโพสต์ทั้งหมด

Rank: 1

โพสต์เมื่อ 16-2-2016 20:50 |แสดงโพสต์ทั้งหมด
ขอบคุณครับ

Rank: 1

โพสต์เมื่อ 12-7-2016 20:49 |แสดงโพสต์ทั้งหมด
ขอบคุณครับ สุดยอดเลย

Rank: 1

โพสต์เมื่อ 8-11-2016 14:14 |แสดงโพสต์ทั้งหมด
กำลังหาอยู่เลย
คุณต้องเข้าสู่ระบบก่อนจึงจะสามารถตอบกลับ เข้าสู่ระบบ | สมัครสมาชิก


Thaigraph

GMT+7, 24-9-2018 05:03 , Processed in 0.120185 second(s), 22 queries .

Powered by Discuz! X1.5

© 2001-2010 Comsenz Inc. Thai Language by DiscuzThai! Team.

Top 10 Best Sellers in Clothing for 2017 Top 10 Best Sellers in Clothing Best Sellers in Clothing
Top 10 Best Sellers in Books reviewer 2017 Top 10 Best Sellers in Books Best Sellers in Books