้ข้อห้ามข้อที่ 1 ในการจัด Event ภายในเกม by

29
Jun
0

**ที่เขียนไว้ว่า ข้อที่ 1 ตั้งแต่ใน Title เลย เพราะว่า ณ ตอนนี้มีข้อเดียวที่เจอมากับตัวแบบชัดเจนครับ ว่าอนาคตจะไม่ทำแบบนี้อีกแล้ว ถ้าอนาคตเจอเหตุการณ์แบบเดียวกันอีกจะมาอัพเพิ่มเป็น ข้อ ที่ 2 3 4 ละกัน**

ในเดือนนี้(มิ.ย.57) เกม Cybermon มีกิจกรรมพิเศษเป็น อีเวนท์ล่าบอสครับ

สิ่งที่เกิดขึ้นคือ ผมกำหนดไว้ว่า พออีเวนท์เหลือ 3 วันสุดท้ายแล้ว ของรางวัลจะดรอปมากขึ้นเป็น 2 เท่า เพื่อจูงใจคนเล่นให้มาร่วมืกิจกรรมเยอะๆ (ทั้งอีเวนท์มีเวลา14วัน) ซึ่งส่วนนี้เป็นส่วนที่ไม่ได้แจ้งกับคนเล่นไว้ก่อนเพราะว่า แน่นอนถ้าคนเล่นรู้ก่อน ก็จะไม่มีใครเล่นเลยในช่วงแรกของกิจกรรม จะมาเล่นกันในช่วงท้ายหมดเพราะว่าคุ้มกว่า

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

สุดท้ายทีมเลยจำเป็นต้องมอบรางวัลให้กับคนเล่นที่ทุ่มไปแล้วในช่วงแรกในได้เท่าๆกับในช่วงท้าย นั่นก็คือการเพิ่มของรางวัลที่คนเล่นได้รับไปแล้วในช่วงแรกอีกเท่านึง

ดังนั้นสิ่งที่ผมสรุปได้ว่าห้ามทำอีกในการจัด Event ภายในเกมคือ

“ห้ามทำEvent ซ้อน Event ที่ทำให้คนที่เล่น Event เดียวกันในช่วงแรกเสียเปรียบคนที่เล่นในช่วงที่สอง ถ้ามันคือ Event เดียวกันก็ควรมีกฎเหมือนกันชัดเจนตั้งแต่แรกไปเลย”

มาใช้ EventEmitter กันดีกว่า by

31
Jan
1

EventEmitter คือ class ที่เอาไว้สร้างเหตุการณ์ต่างๆ สำหรับ Node.JS ถ้าเปรียบเทียบกับงานที่ทุกคนคงรู้จักกันก็เช่น event onclick เมื่อมีการคลิกให้ทำการเรียก function ที่กำหนดให้อัตโนมัติ ในบางภาษาจะเรียก AddEventListener นั่นเอง บางคนอาจจะคิดว่าทำต้องทำต้องเป็น event ด้วยในเมื่อเรียก function ตรงๆ ก็ได้ คำตอบคือการทำงานของ class EventEmitter จะเป็นการประกาศดักรอ event เมื่อ event เกิดขึ้นจึงค่อยทำงาน ซึ่งรูปแบบการทำงานจะเป็นลักษณะ passive รอถูกเรียก และสามารถประกาศรอรับ event กี่ที่ก็ได้ ทุกๆ ที่จะโดนเรียกทั้งหมด ทำให้สามารถทำงานได้สะดวกขึ้น

EventEmitter จะมีสอง method หลักๆ ที่ใช้งานคือ on และ emit ซึ่ง on เอาไว้ดักรอ event แล้วค่อยเรียก callback function ให้ทำงาน (AddEventListener)  ส่วน emit เอาไว้เป็นตัวสั่งการให้เกิด event ชื่อที่กำหนด และจะไปเรียก callback function ที่ประกาศรอไว้ในตอนแรกจนครบโดยอัตโนมัติ (ใน flash emit ก็คือ dispatchEvent นั่นเอง)

ตัวอย่าง code:
var EventEmitter = require('events').EventEmitter;
var util = require('util');
// create the class
var MyClass = function () { }
// inherit class
MyClass.prototype.__proto__ = EventEmitter.prototype;

var obj = new MyClass();
obj.on('startProgram', function(arg){
console.log('startProgram event run '+arg);
});

obj.on('startProgram', function(arg){
console.log('startProgram event run point 2 '+arg);
});

obj.emit('startProgram', '1');

ผลลัพธ์
startProgram event run 1
startProgram event run point 2 1

จะเห็นได้ว่าประกาศ on ไว้ 2 ที่ ก็จะโดนเรียกทั้ง 2 ที่ ซึ่งเวลาใช้งานจริงสามารถประกาศ on ที่ไฟล์อื่นก็ได้ (แต่ต้องส่ง instance ของ class ไปเพื่อเรียกใช้ด้วย) ทำให้เวลาทำงานจริงเราสามารถกำหนดโครงสร้างต่างๆ ได้ง่าย ตัวอย่างการใช้งาน EventEmitter อีกตัวที่เห็นได้ชัดก็คือ Socket.IO ที่ใช้ติดต่อส่งข้อมูลผ่าน network ไปยัง client นั่นเอง หรือแม้แต่ express ก็ใช้ EventEmitter นี่เช่นกัน จะเห็นได้ว่า EventEmitter เหมาะสำหรับงานทางด้าน network เป็นที่สุด เอาไว้สร้าง code ส่วนที่เป็น asynchronous ได้โดยง่าย

ปัญหา Click Event กับภาพ PNG พื้นหลังโปร่งใสใน Flash by

31
May
0

เคยไหมเมื่อต้องการ Import ภาพนามสกุล PNG ที่มีพื้นหลังโปร่งใส แล้วมีปัญหาเวลารับเหตุการณ์ Click Mouse ตรงที่เมื่อ Click ในส่วนที่เป็นพื้นโปร่งใสแล้วดันทำเหตุการณ์ไปด้วย เช่น

มีภาพ PNG ดังนี้

applepic

สร้างไฟล์ Flash ขึ้นมา 1 ไฟล์ และ Import ภาพแล้วนำไปทำเป็น Movie Clip แล้วตั้งชื่อว่า apple จากนั้นตั้ง Event ดังนี้

apple.addEventListener(MouseEvent.CLICK, clickApple);
function clickApple(e:MouseEvent)
{
trace("Wow!");
}

เมื่อกด Ctrl + Enter แล้วลองคลิกในส่วนที่เป็นพื้นหลังใส รอบๆ แอปเปิล สังเกตว่าจะขึ้นข้อความ Wow! ทั้งๆ ที่ไม่ได้กดในส่วนที่เป็นแอปเปิลเลย เพราะ Flash จะมองส่วนที่เป็นรูปภาพทั้งหมดไม่ว่าพื้นหลังจะใสก็ตาม ดังนั้นจากภาพตัวอย่างด้านล่างนี้ ถ้าคลิกในบริเวณในกรอบฟ้า ก็จะแสดงผล Wow! ทั้งหมด

appleborder

วิธีการทำให้ Event ตรวจจับเฉพาะส่วนของแอปเปิล นั่นคือการใช้ Class สำเร็จรูปที่มีชื่อว่า InteractivePNG ซึ่งจะทำให้เราสามารถแก้ไขปัญหาในบทความนี้ได้ ซึ่ง ดาวน์โหลดได้ที่นี่

เมื่อดาวน์โหลดมาแล้วให้แตกไฟล์และ Copy Folder ชื่อ com ไปไว้ที่เดียวกับไฟล์ Flash ที่บันทึกไว้ จากนั้นให้แก้ไข Movie Clip รูปแอปเปิ้ลที่ใช้งานด้านบนด้วยการไปที่ Library แล้วคลิกขวาที่ Movie Clip ที่ใช้งาน เลือก Properties…  ให้กดติ้กถูกที่ Export for Actionscript และในช่อง class ให้ใส่ com.mosesSupposes.bitmap.InteractivePNG ดังภาพ  (หากไม่มีรายละเอียดดังกล่าวให้แก้ไข ให้กดปุ่ม Advanced ก่อน)

screen-shot-2556-05-31-at-90338-pm

จากนั้นให้ลองกด Ctrl + Enter เพื่อรันใหม่ จะพบว่าเมื่อกดพื้นหลังใสบริเวณรอบแอปเปิลจะไม่ขึ้นข้อความ Wow! แล้ว จะขึ้นเฉพาะตอนที่กดโดนแอปเปิลเท่านั้น

ดาวน์โหลดตัวอย่างที่เสร็จสมบูรณ์ได้ที่

Javascript: Event DOM loaded by

28
Feb
0

ปกติในการแทรก Javascript ลงไปบนหน้า HTML เราจะมีรูปแบบการเรียก script ลงไปอยู่สองแบบคือ

- แบบแรก แทรกโค้ดลงไปใน tag script เลย โดย script จะถูกเรียกเมื่อ หน้านั้นถูกโหลดไปถึงบรรทัดนั้น

- แบบที่สอง เกิดขึ้นเนื่องจากแบบแรกจะมีปัญหาหากเราต้องเรียกใช้งาน Element บน HTML เช่น Div , Form ต่างๆ เนื่องจากบางส่วนอาจจะโหลดไม่เสร็จ

เราจึงต้องการแทรก Script หลังจากทุกอย่างในหน้าทำการโหลดเรียบร้อยแล้วด้วย

<body onload=”init()”>

หรือ prototype

Event.observe(window, ‘load’, init, false);

ดูเหมือนจะเรียบร้อยดี แต่แล้วก็มีปัญหาเพิ่มขึ้นมาคือ onload มันจะทำงานหลังจาก “ทุกอย่าง” ในหน้าโหลดเสร็จจริงๆ ซึ่งหมายถึงเราต้องรอโหลดรูป / css ทั้งหมดให้ครบก่อนถึงจะเริ่มใช้งาน

ทำให้เกิดปัญหาว่า เราไม่สามารถ run javascript ได้เลยถ้ารูปโหลดไม่เสร็จ ยิ่งเวปที่มี javascript เยอะ หรือเป็น Ajax ก็ยิ่งมีปัญหาหนักคือทำอะไรไม่ได้เลยจนกว่ารูปจะโหลดเสร็จหมด

วิธีการแก้ปัญหา หากใช้ Prototype Js อยู่แล้ว

document.observe(“dom:loaded”,init);

หรือถ้าไม่ได้ใช้ก็สามารถ load script มาใช้ได้ที่

http://www.brothercake.com/site/resources/scripts/domready/

 เราชนะรอบ 4 | ยืมเงิน 3000 ด่วน | แอพกู้เงิน | แอพเงินด่วน | สินเชื่อออนไลน์อนุมัติทันที | Site Map | กู้เงินก้อน | กระเป๋าตัง | thisshop และ ยืมเงินฉุกเฉิน 5000 ด่วน