construct 2 : local storage

บันทึกข้อมูลด้วย local storage

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

รูปแบบการบันทึก local storage

การบันทึกข้อมูลใน local storage จะมีรูปแบบคล้ายกับการบันทึกข้อมูลลงในตาราง ที่มีสองคอลัมน์ คือ Key และ Value

ค่าในคอลัมน์ Key  เป็นค่าที่ใช้จำแนกความแตกต่างของข้อมูลที่บันทึกไว้ใน local storage ที่สำคัญค่าที่กำหนดให้เป็น key จะต้องไม่ซ้ำกัน เป็นค่าที่มีความจำเพาะ  เช่น HighScore Level เป็นต้น ค่าเหล่านี้จะใช้ในการอ้างอิงถึงข้อมูลที่เก็บอยู่ภายใน

ค่าในคอลัมน์ Value  เป็นค่าข้อมูลที่สัมพันธ์กับ key จะเป็นตัวเลข ข้อความ หรือค่าใน array ก็ได้ ทำให้สามารถจัดเก็บข้อมูลขนาดใหญ่ ลงใน key เพียงตัวเดียวได้

Local Storage is asynchronous.

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

ยกตัวอย่าง การอ่านข้อมูล score จาก local storage จะมีขั้นตอนดังนี้
1. ใช้คำสั่ง action Get เพื่อขออ่านจาก key "score"
2. สร้างเหตุการณ์ on item "score" get
3. สร้างคำสั่งเพื่อรับค่า จาก ItemValue


Local Storage conditions

On any item get  จะทำงานเหตุการณ์นี้ เมื่อการอ่านข้อมูลทั้งหมดเสร็จสิ้น

On any item removed  จะทำงานเหตุการณ์นี้ หลังจากที่ลบข้อมูลเสร็จสิ้น

On any item set  จะทำงานเหตุการณ์นี้ หลังจากที่บันทึกข้อมูลเสร็จสิ้น

On item exists  จะทำงานเหตุการณ์นี้ หลังจากการตรวจสอบค่า key ที่เก็บใน local storage เสร็จสิ้น ถ้าไม่พบ key ที่ค้นหา จะไม่มีการทำงานใดๆ แต่ถ้าพบ key ต้องใช้คำสั่ง Get เพื่ออ่านข้อมูลมาเก็บที่ItemValue

On item get  จะทำงานเหตุการณ์นี้ หลังจากที่อ่านข้อมูลจาก key ที่กำหนดสำเร็จ ข้อมูลของ key จะถูกมาเก็บที่ ItemValue

On item missing  จะทำงานเหตุการณ์นี้ หลังจากการตรวจสอบค่า key ที่เก็บใน local storage เสร็จสิ้น แล้วไม่พบ key ที่ค้นหา

On item removed  จะทำงานเหตุการณ์นี้ หลังจากลบค่า key ที่เก็บใน local storage เสร็จสิ้น

On item set  จะทำงานเหตุการณ์นี้ หลังจากที่บันทึกข้อมูลสำหรับ key ที่กำหนดสำเร็จ ข้อมูลใหม่จะถูกบันทึกลงหน่วยความจำ

Compare key  ใช้สำหรับเปรียบเทียบค่าที่เก็บไว้ใน Key กับค่า key ปัจจุบัน

Compare value  ใช้สำหรับเปรียบเทียบค่าปัจจุบันของ ItemValue ที่ได้จากการอ่านค่าข้อมูล

On all key names loaded  จะทำงานเหตุการณ์นี้ หลังจากที่อ่านข้อมูลจาก key ที่กำหนดสำเร็จ โดยจะได้ชื่อ key ในรูปแบบของแถวลำดับ อ้างอิงด้วย KeyCount และ KeyAt

On error จะทำงานเหตุการณ์นี้ เมื่อเกิดข้อผิดพลาดในการใช้ local storage เช่น เขียนข้อมูลไม่สำเร็จ หรือ พื้นที่ในการจัดเก็บข้อมูลเต็ม โดยข้อผิดพลาดจะถูกเก็บไว้ที่ ErrorMessage

On storage cleared  จะทำงานเหตุการณ์นี้ หลังจากที่ล้างข้อมูลในหน่วยความจำ และหน่วยความจำว่าง

Is processing gets  คืนค่าสถานะของการอ่านข้อมูลเป็น True  เมื่ออยู่ในระหว่างการอ่านข้อมูล

Is processing sets  คืนค่าสถานะของการบันทึกข้อมูลเป็น True  เมื่ออยู่ในระหว่างการบันทึกข้อมูล

On all gets complete  จะทำงานเหตุการณ์นี้ เมื่อการอ่านข้อมูลทั้งหมดเสร็จสิ้น เช่น มีการอ่านข้อมูล 10 ตัว ที่เกิดขึ้นในขณะเดียวกัน เหตุการณ์นี้จะทำงาน เมื่อการอ่านข้อมูลทั้ง 10 ตัว เสร็จสิ้น

On all sets complete  จะทำงานเหตุการณ์นี้ เมื่อการบันทึกข้อมูลทั้งหมดเสร็จสิ้น เช่น มีการบันทึกข้อมูล 10 ตัว ที่เกิดขึ้นในขณะเดียวกัน เหตุการณ์นี้จะทำงาน เมื่อการบันทึกข้อมูลทั้ง 10 ตัว เสร็จสิ้น


Local Storage actions

Check item exists เป็นคำสั่งสำหรับตรวจสอบ Key ที่ถูกเก็บอยู่ใน local storage ถ้าพบ key ที่ต้องการ จะตอบสนองต่อเหตุการณ์ On item exists  แต่ถ้าไม่พบ จะตอบสนองกับเหตุการณ์ On item missing

Get item  เป็นคำสั่งอ่านค่าข้อมูลของ key จากหน่วยความจำ จะตอบสนองกับเหตุการณ์ On item get และค่าที่ได้จะถูกเก็บไว้ที่ ItemValue

Remove item  เป็นคำสั่งในการลบ key ออกจากหน่วยความจำ จะตอบสนองกับเหตุการณ์ On item removed

Set item เป็นคำสั่งบันทึกข้อมูลลงใน local storage จะตอบสนองกับเหตุการณ์ On item set

Clear storage  เป็นคำสั่งล้างข้อมูลจาก local storage ให้เป็นค่าว่าง จะตอบสนองกับเหตุการณ์ On storage cleared

Get all key names  เป็นคำสั่งอ่านค่า key ทั้งหมดที่เก็บใน local storage โดยจะทำงานกับเหตุการณ์ On all key names loaded ผลการทำงานจะได้แถวลำดับของชื่อ key และอ้างถึงด้วย KeyCount และ KeyAt


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

Random ค่าใน array ไม่ให้ซ้ำกัน

มีเพื่อนๆ น้องๆ หลายคนมาก สอบถามเรื่องของการอ่านค่าที่เก็บไว้ใน array ของโปรแกรม construct 2 ออกมาใช้งาน หรือมาแสดง ให้เปลี่ยนลำดับไปทุกครั้งที่ทำงาน แรกๆ ก็พอตอบคำถามได้ แต่หลังๆ มา เริ่มมีมากขึ้น ผมก็งานเยอะ ไม่ค่อยได้ตอบ วันนี้เลยพักงานตัวเอง มาเขียนเนื้อหาเกี่ยวกับ array เอาไว้ ให้ได้อ่านศึกษากันก่อน
การสุ่ม (Random) ตำแหน่งที่จะแสดงค่าใน array นั้น มีการนำไปใช้ประโยชน์อย่างกว้างขวาง ในการสร้างเกม การเปลี่ยนตำแหน่ง Sprite หรือประยุกต์ใช้กับการสร้างสื่อการสอน การทำแบบทดสอบที่มีการสลับตัวเลือก
ผมไม่กล่าวถึงการสร้าง array นะครับ ถ้ายังไม่เข้าใจ อ่านเพิ่มเติมตรงนี้ก่อน (construct 2 : array)

ในบทความนี้ ผมมี array ชื่อ myArray ที่เก็บชื่อผลไม้ 5 ชนิด ดังนี้

หลักการสุ่มค่าใน array แบบไม่ให้ซ้ำ มีหลักการง่ายๆ คือ ถ้าสุ่มได้แล้วลบทิ้ง จึงไม่มีโอกาสจะสุ่มได้ค่าเดิมอีกครั้ง
ขั้นตอนการทำงาน
1. ทำซ้ำตามจำนวนรอบที่ต้องการ แต่ต้องไม่เกินขนาดของ array ที่มี
2.  สุ่มค่าตำแหน่ง array  ระหว่าง 0 ถึง ขนาดของ array เก็บที่ตัวแปร pos_x
3.  แสดงค่าหรือนำค่าที่เก็บใน array ที่ตำแหน่ง pos_x ไปใช้งาน
4.  ลบค่าจาก array ในตำแหน่ง pos_x

ตัวอย่างคำสั่งใน event sheet

ผลการทำงาน จะได้ ชื่อผลไม้ที่แสดงสลับตำแหน่ง ไม่ซ้ำกัน

จากเนื้อหาที่กล่าวไปข้างต้น สามารถนำไปประยุกต์ให้เข้ากับงานที่ต้องการได้ เช่น สลับตำแหน่งของ sprite ที่สร้างขึ้น โดยการเก็บตำแหน่งไว้ใน array ก่อน แล้วสุ่มตำแหน่งที่จะ create object จาก array มาใช้ในขั้นตอนการ create object เป็นต้น  ขอให้สนุกกับการใช้งาน array นะครับ