วิธีเลเยอร์ย้ายและนำกราฟิกไปด้านหน้า

การใช้ Corona SDK เพื่อจัดการกราฟิก

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

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

วิธีการตลาดแอปของคุณ

หมายเหตุ: เพื่อที่จะทำตามบทแนะนำนี้คุณจะต้องมีภาพสองภาพคือ image1.png และ image2.png ภาพเหล่านี้สามารถเป็นภาพที่คุณเลือกได้ แต่บทแนะนำจะทำงานได้ดีที่สุดถ้าคุณมีภาพประมาณ 100 พิกเซลโดย 100 พิกเซล ซึ่งจะช่วยให้คุณสามารถมองเห็นสิ่งที่เกิดขึ้นกับภาพได้อย่างง่ายดาย

ในการเริ่มต้นเราจะเปิดไฟล์ใหม่ชื่อ main.lua และเริ่มสร้างโค้ดของเรา:

displayMain = display.newGroup (); displayFirst = display.newGroup (); displaySecond = display.newGroup (); global_move_x = display.contentWidth / 5;

ส่วนของโค้ดนี้ตั้งค่าห้องสมุด UI ของเราและประกาศผ่านกลุ่มการแสดงผล: displayMain, displayFirst และ displaySecond เราจะใช้ข้อมูลเหล่านี้เพื่อจัดทำกราฟิกของเราก่อนและย้ายไป ตัวแปร global_move_x ถูกตั้งค่าเป็น 20% ของความกว้างของหน้าจอเพื่อให้เราสามารถเห็นการเคลื่อนไหวได้

() displayMain: แทรก (displayFirst); displayMain: แทรก (displaySecond); displayFirst: toFront (); displaySecond: toFront (); พื้นหลังพื้นหลัง = display.newImage ("image1.png", 0.0); displayFirst: แทรก (พื้นหลัง); พื้นหลังพื้นหลัง = display.newImage ("image2.png", 0.0); displaySecond: แทรก (พื้นหลัง); ปลาย

ฟังก์ชัน setupScreen แสดงให้เห็นถึงวิธีเพิ่มกลุ่มการแสดงผลลงในกลุ่มการแสดงผลหลัก นอกจากนี้เรายังใช้ฟังก์ชัน toFront () เพื่อสร้างเลเยอร์กราฟิกที่แตกต่างกันด้วยเลเยอร์ที่เราต้องการด้านบนตลอดเวลาที่ประกาศล่าสุด

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

นอกจากนี้เรายังได้เพิ่มรูปภาพลงในแต่ละกลุ่ม เมื่อเราเริ่มแอปภาพที่สองควรอยู่ด้านบนของรูปแรก

หน้าที่ screenLayer () displayFirst: toFront (); ปลาย

เราได้จัดกลุ่มกราฟิกไว้ด้วยการแสดงกลุ่มที่สองที่ด้านบนสุดของกลุ่ม displayFirst ฟังก์ชันนี้จะย้าย displayFirst ไปด้านหน้า

ฟังก์ชัน moveOne () displaySecond.x = displaySecond.x + global_move_x; ปลาย

ฟังก์ชัน moveOne จะเลื่อนภาพที่สองไปทางขวาโดยความกว้าง 20% ของหน้าจอ เมื่อเราเรียกใช้ฟังก์ชันนี้กลุ่ม displaySecond จะอยู่หลังกลุ่ม displayFirst

ฟังก์ชั่น moveTwo () displayMain.x = displayMain.x + global_move_x; ปลาย

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

setupScreen (); timer.performWithDelay (1000, screenLayer); timer.performWithDelay (2000, moveOne); timer.performWithDelay (3000, movetwo);

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

เมื่อเปิดแอปคุณควรมี image2.png ที่ด้านบนของ image1.png ฟังก์ชั่น screenLayer จะทำการถ่ายภาพและนำ image1.png ไปด้านหน้า ฟังก์ชัน moveOne จะย้าย image2.png ออกจากภายใต้ image1.png และฟังก์ชัน moveTwo จะยิงครั้งสุดท้ายโดยย้ายทั้งสองภาพในเวลาเดียวกัน

วิธีการแก้ไข iPad แบบช้า

สิ่งสำคัญคือต้องจำไว้ว่าแต่ละกลุ่มเหล่านี้อาจมีภาพอยู่หลายสิบภาพ และเช่นเดียวกับฟังก์ชั่น moveTwo จะย้ายทั้งสองรูปด้วยรหัสเดียวภาพทั้งหมดภายในกลุ่มจะใช้คำสั่งที่กำหนดให้กับกลุ่ม

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

บทแนะนำนี้ใช้การแสดงผลวัตถุ เรียนรู้เพิ่มเติมเกี่ยวกับออบเจ็กต์ที่แสดง

วิธีการเริ่มต้นพัฒนาแอป iPad