การปรับเกมของคุณให้เหมาะสมกับการทำงานบน Facebook.com

The Web Games on Facebook and Facebook Gameroom platforms are no longer available for new submissions. This documentation is intended solely for developers with existing games. To learn more, read our blog post.

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

การปรับเลย์เอาท์ให้เหมาะสม

เลย์เอาท์แบบปรับเปลี่ยนได้ช่วยให้คุณสามารถขยายขนาดของเกมให้เข้ากับขนาดเบราว์เซอร์ของผู้เล่นได้ ทั้งนี้ เมื่อเปิดใช้งาน จะช่วยให้ iframe ที่มีเกมของคุณอยู่ขยายเต็มพื้นที่ว่างตามความกว้างและ/หรือความสูงของหน้าต่างเบราว์เซอร์

ลักษณะที่เนื้อหาแอพของคุณจะปรับขนาดครอบคลุมพื้นที่ว่างสำหรับเว็บเกม Facebook และไม่มีความกว้างและความสูงแบบปรับเปลี่ยนได้

หากต้องการเปิดใช้งานเลย์เอาท์แบบปรับเปลี่ยนได้ คุณจะต้องกำหนดค่าการตั้งค่าสำหรับแอพของคุณภายในแดชบอร์ดของแอพเสียก่อน ไปที่หน้า "การตั้งค่า" สำหรับแอพของคุณ และค้นหาแอพในส่วน Facebook ซึ่งจะมีลักษณะตามรูปภาพด้านล่าง

การตั้งค่าเลย์เอาท์แบบปรับเปลี่ยนได้ที่พบในแดชบอร์ดของแอพ

ความกว้างแบบตายตัว

การตั้งค่าความกว้างแบบตายตัวเป็น No จะเป็นการกำหนดความกว้างของ iframe ที่มีเกมของคุณอยู่ให้เป็น 100% จากนั้น ระบบจะจัดเนื้อหาของคุณให้ชิดซ้าย และ iframe จะปรับขนาดให้เต็มหน้าหากผู้เล่นเปลี่ยนความกว้างของหน้าต่างเบราว์เซอร์

การตั้งค่าความกว้างแบบตายตัวเป็น Yes จะเป็นการบังคับให้ iframe ใช้ความกว้างที่ 760 พิกเซล ทั้งนี้ โดยค่าเริ่มต้นแล้ว องค์ประกอบ <body> ของ iframe ในเบราว์เซอร์ส่วนใหญ่จะมี margin:8px ดังนั้น เนื้อหาของคุณจะมีขนาดเป็น 744 พิกเซล เว้นแต่จะมีการแทนที่

ความสูงแบบตายตัว

การตั้งค่าความสูงแบบตายตัวเป็น No จะเป็นการกำหนดความสูงของ iframe ที่มีเกมของคุณอยู่ให้เป็น 100% หากมีการปรับขนาดหน้าต่างเบราว์เซอร์ iframe ก็จะปรับขนาดตามไปด้วย และแถบเลื่อนจะปรากฏขึ้นหากเนื้อหาเกินความสูงที่มีอยู่

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

เลย์เอาท์แบบปรับเปลี่ยนได้

เมื่อคุณเปิดใช้งานความกว้างและความสูงแบบปรับเปลี่ยนได้โดยกำหนดการตั้งค่าแบบตายตัวเป็น No คุณก็จะต้องพัฒนาแอพของคุณให้รองรับขนาดที่ผันแปรได้และการปรับขนาดแบบไดนามิก เนื่องจากผู้ชมสามารถปรับขนาดเบราว์เซอร์ได้ทุกเมื่อ

แอพของคุณควรปรับขนาดให้รองรับการใช้งานบนพื้นที่ว่างของหน้าจอได้ทุกรูปแบบ และหากจำเป็น ให้รับเหตุการณ์ window.onresize แบบ JavaScript เพื่อปรับเลย์เอาท์แบบไดนามิก ในหลายกรณี HTML และ CSS สามารถรับมือกับเลย์เอาท์แบบไดนามิกได้โดยไม่ต้องใช้ JavaScript แต่หากคุณได้ระบุขนาดขององค์ประกอบเป็นหน่วยสัมบูรณ์ (Absolute unit) คุณอาจจำเป็นต้องเรียกใช้โค้ดในระหว่างที่มีเหตุการณ์ window.onresize หากต้องการป้องกันไม่ให้เกิดการปรับเลย์เอาท์ที่มากเกินไปหรือสั่นไหว เราอาจขอแนะนำให้เรียกใช้ตัวจัดการการปรับขนาดเพียง 30-60 ครั้งต่อวินาที หรือเมื่อการเปลี่ยนขนาดนั้นเกินจากเกณฑ์บางส่วน

ตัวอย่าง HTML

สำหรับแอพ HTML ให้ตั้งค่าความสูงและความกว้างสำหรับองค์ประกอบหลักของแอพเป็น 100% หากคุณจำเป็นต้องปรับทิศทางขององค์ประกอบ UI ใดๆ ในแอพ HTML คุณก็สามารถทำได้ผ่านเหตุการณ์ window.onresize เช่นเดียวกับหน้า HTML ปกติทั้งหมด

ตัวอย่างโค้ดด้านล่างจะกำหนดองค์ประกอบ HTML <div>, ตั้งค่าสีพื้นหลังเป็นสีฟ้า และปรับขนาดให้ครอบคลุมพื้นที่ว่างของเบราว์เซอร์ โดยจะรับเหตุการณ์ window.onresize และพิมพ์ขนาด <div> ในปัจจุบันออกมาหากเบราว์เซอร์มีการปรับขนาด

<html>
  <head>
    <title>Fluid Layout HTML Example</title>
  </head>
  <body style="margin:0; padding:0; border:0; background-color:#000000">
    <div id="allContent" style="background-color: #0000FF; height:100%">
      <div id="output" style="color: #FFFFFF;" />
    </div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script type="text/javascript">
      FB.init({appId : 'APP ID',});
      function echoSize() {
        document.getElementById('output').innerHTML ="HTML Content Width: " + window.innerWidth +" Height: " + window.innerHeight;
        console.log(window.innerWidth + ' x ' + window.innerHeight);
      }
      echoSize();
      window.onresize = echoSize;
    </script>
  </body>
</html>

การจัดการกับเลย์เอาท์แบบปรับเปลี่ยนได้ใน Flash

หากคุณกำลังสร้างแอพ Flash คุณจะต้องตั้งค่าขนาดเริ่มต้นสำหรับแท็ก <object> เป็น 100% สำหรับทั้งความสูงและความกว้าง ซึ่งจะช่วยให้ไคลเอ็นต์ Flash ของคุณสามารถเติมเต็มพื้นที่ว่างทั้งหมดที่มีอยู่ได้ จากนั้น โค้ด ActionScript ของคุณจะต้องรับและจัดการกับเหตุการณ์ Event.RESIZE สำหรับอ็อบเจ็กต์ stage ระบบจะส่งเหตุการณ์นี้ทุกครั้งที่ผู้เล่นเปลี่ยนขนาดของ swf ให้ใช้เหตุการณ์นี้ในการจัดเลย์เอาท์องค์ประกอบ UI ของคุณให้สอดคล้องกัน

การจัดการกับกล่องโต้ตอบและป๊อปอัพเมนูใน Flash หรือปลั๊กอินอื่นๆ

ในขณะที่เกมแบบ Flash หรือเกมที่ใช้ปลั๊กอินกำลังทำงานอยู่ ผู้เล่นก็อาจโต้ตอบกับองค์ประกอบ UI ต่างๆ ที่เป็นส่วนหนึ่งของ Facebook ซึ่งบางครั้งส่งผลให้เกมของคุณถูกปิดทับได้ ในบางครั้ง เหตุการณ์เช่นนี้ก็เกิดขึ้นได้เนื่องจากการดำเนินการจากเกมของคุณ (เช่น การเปิดกล่องการเข้าสู่ระบบขึ้นมา) และบางครั้งก็เกิดขึ้นเนื่องจากผู้เล่นโต้ตอบกับองค์ประกอบของ Facebook เกี่ยวกับเกมของคุณ (เช่น หน้าต่าง Messenger)

หากต้องการรับมือให้ได้เป็นอย่างดี คุณอาจต้องสร้างภาพหน้าจอแบบไดนามิกของแอพขึ้นมา จากนั้นแทนที่องค์ประกอบ <object> ด้วยรูปภาพนี้ คุณจะต้องทำการแทนที่ดังกล่าวนี้ภายใน 200 มิลลิวินาที ซึ่งจะช่วยให้กล่องโต้ตอบแสดงได้อย่างถูกต้องและทำให้ผู้ใช้ได้รับประสบการณ์ซึ่งเป็นที่น่าพอใจมากขึ้น

วิธีที่ดีที่สุดคือให้สร้างฟังก์ชั่นในโค้ด Flash ที่จะเก็บภาพหน้าจอในรูปแบบ JPEG หรือรูปแบบกะทัดรัดแบบอื่นๆ สำหรับสไตล์กราฟิกของคุณ จากนั้น Base64 จะเข้ารหัสสตริงดังกล่าว แล้วหยุดเกมของคุณไว้ชั่วคราว ให้แสดงฟังก์ชั่นดังกล่าว (ซึ่งอาจเรียกว่า exportScreenshot เป็นต้น) กับ JavaScript ตามความเหมาะสม (ตัวอย่างเช่น ใน Flash คุณก็จะใช้ฟังก์ชั่น flash.external.ExternalInterface.addCallback) นอกจากนี้ ให้แสดงฟังก์ชั่นที่จะทำให้เกมของคุณกลับมาทำงานอีกครั้งเมื่อกลับมาเป็นจุดสนใจ

จากนั้น ในโค้ด JavaScript ของคุณ ให้เขียนฟังก์ชั่นตัวรับที่จะเรียกใช้เมื่อเกมของคุณไม่ได้เป็นจุดสนใจหรือกลับมาเป็นจุดสนใจ แล้วลงทะเบียนกับสภาพแวดล้อมของ Facebook โดยการส่งไปยัง FB.init() ในรูปแบบพารามิเตอร์ hideFlashCallback ระบบจะส่งพจนานุกรมพารามิเตอร์ให้กับตัวรับ ซึ่งจะมีคีย์ที่เรียกว่า state ที่จะถูกตั้งค่าเป็น opened หากคุณควรจะซ่อนเกมเอาไว้ โดยในกรณีนี้ ตัวรับควรเรียกใช้เมธอด exportScreenshot ของแอพ Flash, ใช้ข้อมูลรูปภาพที่เข้ารหัส Base64 เพื่อสร้าง URL ข้อมูล และสร้าง src ขององค์ประกอบ img ทั้งนี้ การดำเนินการนี้ควรย้ายองค์ประกอบที่แอพของคุณมีอยู่ออกไปจากหน้าจอโดยใช้เมธอด FB.Canvas.hideFlashElement ใน JS SDK และแทนที่ด้วย img ดังกล่าว หากพจนานุกรมพารามิเตอร์ที่ส่งไปยังตัวรับไม่มี state: "opened" ก็ให้นำแอพ Flash ของคุณกลับขึ้นมาบนหน้าจอแทนโดยใช้ FB.Canvas.showFlashElement

คุณอาจต้องการส่งออกภาพหน้าจอที่ได้ปรับเปลี่ยนแล้ว โดยการสุ่มตัวอย่างลงเหลือขนาด 1/4 (ซึ่งจะส่งผลให้รูปภาพแสดงแบบเบลอ) หรือทำให้สีทึบขึ้นเพื่อให้ดูเหมือนรูปภาพจางหายไปกับพื้นหลัง ซึ่งจะช่วยให้ผู้เล่นเข้าใจได้ชัดเจนขึ้นว่าจุดสนใจไม่ได้อยู่ที่เกม แต่อยู่ที่องค์ประกอบ UI ใดก็ตามที่ปรากฏขึ้นทับเกมอยู่

การหลีกเลี่ยงการโหลดซ้ำโดยตั้งค่า `urlhandler`

เมธอด JavaScript SDK FB.Canvas.setUrlHandler() จะลงทะเบียนการเรียกกลับ ซึ่งช่วยให้เกมของคุณสามารถจัดการได้อย่างเหมาะสมในสถานการณ์ที่ผู้ใช้คลิกลิงก์ที่ใดที่หนึ่งใน Facebook Chrome ซึ่งโดยปกติแล้วจะทำให้ระบบโหลดเกมของคุณซ้ำ ตัวอย่างมีดังต่อไปนี้

เรื่องราวทิกเกอร์ทั้งหมด
บุ๊กมาร์ก
คำขอจากรายการดร็อปดาวน์บุ๊กมาร์ก
เรื่องราวเกี่ยวกับการแจ้งเตือนคำขอ

ตัวอย่างเช่น เมื่อผู้ใช้คลิกที่เรื่องราวทิกเกอร์เกี่ยวกับเพื่อนที่ทำภารกิจในเกมของคุณได้สำเร็จ โดยค่าเริ่มต้นแล้ว ระบบจะส่งเบราว์เซอร์ไปยัง URL ของความสำเร็จนั้นๆ เกมของคุณสามารถเลือกที่จะลงทะเบียนการเรียกกลับแทนได้ เพื่อแสดงความสำเร็จภายในแอพพลิเคชั่น

ระบบจะเรียกใช้การเรียกกลับพร้อมช่องที่มีพาธไปยัง URL โดยสัมพันธ์กับ URL เว็บเกม Facebook ของแอพพลิเคชั่น ตัวอย่างเช่น หาก URL ที่จะได้รับการโหลดคือ

http://apps.facebook.com/yourgameXYZ/achievements/cheevo1.php
  ?fb_source=canvas_ticker
  &fb_ticker_mod=achievement
  &fb_action_types=games.achieves

ระบบก็จะเรียกใช้การเรียกกลับของคุณพร้อมพารามิเตอร์ที่เป็นพจนานุกรมอย่างเช่น

{ 
  path: "/achievements/cheevo1.php?fb_source=canvas_ticker&fb_ticker_mod= achievement&fb_action_types=games.achieves" 
}

โปรดทราบว่าการเรียกใช้ FB.Canvas.setUrlHandler() แต่ละครั้งจะแทนที่การเรียกใช้ที่ตั้งค่าไว้ก่อนหน้านั้น หากมีการตั้งค่าไว้ นอกจากนี้ ระบบจะส่งเฉพาะลิงก์ที่นำไปยังเกมของคุณบน Facebook (กล่าวคือ ขึ้นต้นด้วย apps.facebook.com/your_app/) เข้ารับการประมวลผลแบบอินไลน์

การจัดการกับ WebGL ในเบราว์เซอร์ที่ไม่รองรับ

หากเกมสำหรับเว็บเกม Facebook ของคุณใช้ WebGL ให้ตั้งค่า WebGL เป็น "ใช่" ในการตั้งค่าแอพในส่วนเว็บเกม Facebook ซึ่งจะช่วยให้ Facebook สามารถปรับประสบการณ์ WebGL ให้เหมาะกับผู้เล่นได้

ผู้เล่นที่ใช้เบราว์เซอร์ที่ไม่รองรับ WebGL ก็จะเห็นหน้าต่อไปนี้ขณะพยายามเข้าเล่นเกมของคุณ หน้านี้จะแสดงลิงก์ที่นำไปยังเว็บเบราว์เซอร์ที่เข้ากันได้กับ WebGL และ (หากเกมของคุณพร้อมให้เล่นใน Facebook Gameroom) ลิงก์ไปยังไคลเอ็นต์ Gameroom

หากคุณไม่ต้องการเปลี่ยนเส้นทางของผู้เล่นไปยังหน้านี้ คุณสามารถปิดใช้งานการเปลี่ยนเส้นทางได้โดยตั้งค่าแทนที่ประสบการณ์การใช้งานที่ไม่รองรับ WebGL เป็น "ใช่" หากดำเนินการดังกล่าวนี้ คุณจะต้องจัดการประสบการณ์สำหรับเบราว์เซอร์ที่ไม่รองรับ WebGL ในเกมของคุณ