ส่วนหลัง

สุดยอดคู่มือภาษาประมวลผลส่วนที่ 1: พื้นฐาน



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

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



คู่มือขั้นสูงสุดสำหรับภาษาประมวลผลส่วนที่ 1: ความรู้พื้นฐาน



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



สิ่งที่คุณควรรู้อยู่แล้ว

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

วิธีการติดตาม

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



เริ่มกันเลย!

ภาษาประมวลผลคืออะไร?

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



การประมวลผลเป็นภาษาโปรแกรมภาพที่ช่วยให้คุณสามารถร่างด้วยรหัสเพื่อที่จะพูดได้ อย่างไรก็ตามมันไม่ใช่ภาษาการเขียนโปรแกรมด้วยตัวเองอย่างแน่นอนมันคือสิ่งที่พวกเขาเรียกว่าภาษาการเขียนโปรแกรม 'Java-esque' ซึ่งหมายความว่าภาษานี้สร้างขึ้นบนแพลตฟอร์ม Java แต่ไม่ใช่ Java per se มันขึ้นอยู่กับ Java และโค้ดทั้งหมดของคุณจะได้รับการประมวลผลล่วงหน้าและแปลงเป็นโค้ด Java โดยตรงเมื่อคุณกดปุ่ม run คลาส PApplet ของ Java เป็นคลาสพื้นฐานสำหรับการประมวลผลภาพร่างทั้งหมด เพื่อเป็นตัวอย่างเรามาดูโค้ดประมวลผลพื้นฐานสองสามบล็อก:

public void setup() { // setup codes goes here } public void draw() { // draw codes goes here }

บล็อกโค้ดเหล่านี้จะถูกแปลงเป็นแบบนี้:



public class ExampleFrame extends Frame { public ExampleFrame() { super('Embedded PApplet'); setLayout(new BorderLayout()); PApplet embed = new Embedded(); add(embed, BorderLayout.CENTER); embed.init(); } } public class Embedded extends PApplet { public void setup() { // setup codes goes here } public void draw() { // draw codes goes here } }

คุณจะเห็นว่าบล็อกโค้ดการประมวลผลถูกห่อหุ้มด้วยคลาสที่ขยายมาจาก PApplet ของ Java ดังนั้นคลาสทั้งหมดที่คุณกำหนดในรหัสการประมวลผลของคุณ (ถ้ามี) จะถือว่าเป็นคลาสภายใน

ความจริงที่ว่าการประมวลผลเป็นแบบ Java ทำให้เรามีข้อได้เปรียบมากมายโดยเฉพาะอย่างยิ่งถ้าคุณเป็นไฟล์ นักพัฒนา Java . ไวยากรณ์ไม่เพียง แต่คุ้นเคย แต่ยังช่วยให้คุณสามารถทำสิ่งต่างๆเช่นการฝังโค้ด Java, ไลบรารี, ไฟล์ JAR ในภาพร่างของคุณโดยใช้แอพเพล็ตการประมวลผลโดยตรงในแอปพลิเคชัน Java ของคุณการกำหนดคลาสและการใช้ชนิดข้อมูลมาตรฐานเช่น int ลอยถ่านและอื่น ๆ คุณสามารถเขียนรหัส Pocessing ได้โดยตรงจาก Eclipse หากต้องการ ใช้เวลาพอสมควร เพื่อตั้งค่า สิ่งหนึ่งที่คุณไม่สามารถทำได้คือใช้ส่วนประกอบ AWT หรือ Swing ในภาพร่างการประมวลผลของคุณเนื่องจากมันขัดแย้งกับลักษณะการประมวลผลแบบวนซ้ำ แต่ไม่ต้องกังวลเราจะไม่ทำสิ่งที่น่าสนใจในบทความนี้



พื้นฐานของการประมวลผล

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

โหนด js เทียบกับ php ประสิทธิภาพ

กำลังประมวลผล IDE



หากคุณอ่านจนถึงตรงนี้แล้วและยังไม่ได้ดาวน์โหลด Processing IDE โปรดดำเนินการต่อ ทำมัน . ตลอดทั้งบทความฉันจะสรุปงานง่าย ๆ ให้คุณได้ลองทำด้วยตัวเองคุณสามารถฝึกฝนได้ก็ต่อเมื่อคุณมี IDE และทำงานได้ นี่คือคำแนะนำสั้น ๆ ของ IDE การประมวลผล มันง่ายมากและอธิบายตัวเองได้ดังนั้นฉันจะพูดสั้น ๆ

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

ปุ่มที่ดูเหมือนผีเสื้อทางด้านขวาของการวิ่งและหยุดคือปุ่ม ดีบักเกอร์ . การใช้ดีบักเกอร์จำเป็นต้องมีบทความอื่น ๆ โดยเฉพาะ มันอยู่นอกขอบเขตของบทความนี้ดังนั้นคุณสามารถเพิกเฉยได้ในตอนนี้ ดรอปดาวน์ถัดจากปุ่มดีบักเกอร์คือที่ที่คุณเพิ่ม / ตั้งค่าม็อด Mods ให้ฟังก์ชันบางอย่างแก่คุณอนุญาตให้คุณเขียนโค้ดสำหรับ Android อนุญาตให้คุณเขียนโค้ดใน Python และอื่น ๆ ม็อดยังอยู่นอกขอบเขตดังนั้นคุณสามารถเก็บไว้ในโหมด Java เริ่มต้นและละเว้นได้เช่นกัน

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

ไม่มีอะไรจะพูดถึงเกี่ยวกับโปรแกรมแก้ไขโค้ดมากนักมันเป็นเพียงที่ที่คุณเขียนโค้ดของคุณ มีหมายเลขบรรทัด (!) การประมวลผลเวอร์ชันเก่าไม่มีแบบนั้นและคุณคงนึกไม่ออกว่าฉันมีความสุขแค่ไหนเมื่อได้เห็นครั้งแรก

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

สถาปนิกโซลูชันบริการเว็บของ amazon

ตั้งค่าบล็อก

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

public void setup() { // Size of our sketch will be 800x600, // and use the P2D rendering engine. size(800, 600, P2D); // We could have used this function instead of size() // fullScreen(P2D); // The background color of our sketch will be black // by default, unless specified otherwise background(0); // We could have used this to set a background image. // Note that size of our sketch should be the same as the image. // background(loadImage('test.jpg')); // Shapes and objects will be filled with red by default, // unless specified otherwise. fill(255,0,0); // Shaped and objects will have a white border by default, // unless specified otherwise. stroke(255); }

วิธีการที่เกี่ยวข้องกับการจัดรูปแบบ (พื้นหลังการเติมเส้นโครงร่าง) จะอธิบายไว้ที่ส่วนคุณสมบัติและการตั้งค่า สำหรับตอนนี้สิ่งที่คุณต้องรู้คือการตั้งค่าและการกำหนดค่าที่เราตั้งไว้ที่นี่มีผลต่อภาพร่างทั้งหมดของเราอย่างไร รหัสที่เขียนที่นี่ใช้เพื่อกำหนดชุดกฎเกณฑ์พื้นฐานที่ใช้บังคับตลอดทั้งร่าง สิ่งที่คุณควรทำความเข้าใจในส่วนนี้คือวิธีการด้านล่าง:

ขนาด() - ตามชื่อที่แนะนำฟังก์ชันนี้ใช้เพื่อกำหนดขนาดของร่างของเรา จะต้องอยู่ในบรรทัดแรกของบล็อกโค้ดการตั้งค่า สามารถใช้ได้ในรูปแบบต่อไปนี้:

  • ขนาด (กว้างสูง);
  • ขนาด (ความกว้างความสูงตัวแสดงผล);

สามารถกำหนดค่าความกว้างและความสูงเป็นพิกเซล ฟังก์ชั่นขนาดยอมรับพารามิเตอร์ตัวที่สามเรนเดอร์ซึ่งใช้เพื่อตั้งค่าเอ็นจินการเรนเดอร์ที่ร่างของเราจะใช้ โดยค่าเริ่มต้นตัวแสดงผลจะถูกตั้งค่าเป็น P2D ตัวแสดงผลที่มีอยู่ ได้แก่ P2D (การประมวลผล 2D), P3D (การประมวลผล 3D, ควรใช้หากสเก็ตช์ของคุณจะมีกราฟิก 3 มิติ) และ PDF (กราฟิก 2D ถูกวาดลงในไฟล์ Acrobat PDF โดยตรงคุณสามารถดู inforation เพิ่มเติมได้ ที่นี่ ). ตัวแสดง P2D และ P3D ใช้ประโยชน์จากฮาร์ดแวร์กราฟิกที่เข้ากันได้กับ OpenGL

เต็มจอ() - ในการประมวลผล 3.0 สามารถใช้ฟังก์ชัน fullScreen แทนฟังก์ชัน size () ได้แล้ว เช่นเดียวกับฟังก์ชัน size () ควรอยู่ในบรรทัดแรกของบล็อกการตั้งค่าเช่นกัน การใช้งานมีดังนี้:

  • เต็มจอ();
  • เต็มจอ (จอแสดงผล);
  • fullScreen (ตัวแสดงผล);
  • fullScreen (จอแสดงผล, renderer);

หากคุณใช้โดยไม่มีพารามิเตอร์ใด ๆ ร่างการประมวลผลของคุณจะทำงานแบบเต็มหน้าจอและจะทำงานบนจอแสดงผลหลักของคุณ พารามิเตอร์ 'display' ใช้เพื่อตั้งค่าที่จะแสดงภาพร่างของคุณ ตัวอย่างเช่นหากคุณเชื่อมต่อจอภาพภายนอกเข้ากับคอมพิวเตอร์ของคุณคุณสามารถตั้งค่าตัวแปรการแสดงผลเป็น 2 (หรือ 3, 4 เป็นต้น) แล้วร่างของคุณจะทำงานที่นั่น พารามิเตอร์ 'renderer' อธิบายไว้ที่ส่วน size () ด้านบน

บล็อกการตั้งค่า

นี่เป็นอีกหนึ่งคุณสมบัติที่มาพร้อมกับการประมวลผลรุ่นใหม่ มันเป็นบล็อกรหัสเช่นเดียวกับการตั้งค่าและการวาด จะมีประโยชน์เมื่อคุณต้องการกำหนดเมธอด size () หรือ fullScreen () ด้วยพารามิเตอร์ตัวแปร นอกจากนี้ยังจำเป็นต้องกำหนดขนาด () และคุณสมบัติการจัดแต่งทรงผมอื่น ๆ เช่น smooth () ในบล็อกโค้ดนี้หากคุณใช้สภาพแวดล้อมอื่นที่ไม่ใช่ IDE ของ Processing เช่น Eclipse แต่ในกรณีส่วนใหญ่คุณจะไม่ต้องการมันไม่ใช่อย่างแน่นอนในบทความนี้

วาดบล็อก

ไม่มีอะไรพิเศษที่จะพูดคุยเกี่ยวกับบล็อกการจับฉลาก แต่ทุกอย่างมีความพิเศษ Draw block คือที่ที่ความมหัศจรรย์ทั้งหมดเกิดขึ้น เป็นหัวใจสำคัญของโปรแกรมของคุณโดยเต้น 60 ครั้งต่อวินาที บล็อกรหัสนี้มีตรรกะรหัสทั้งหมดของคุณ รูปร่างวัตถุ ฯลฯ ทั้งหมดของคุณจะถูกเขียนไว้ที่นี่

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

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

void setup(){ } void draw(){ int x = 0; x += 1; print(x+' '); }

ถ้าคุณเดา“ 1 2 3 4 …” ฉันเข้าใจคุณ! นี่เป็นหนึ่งในความสับสนในการแปรรูป จำบล็อกนี้ซ้ำ ๆ ได้หรือไม่? เมื่อคุณกำหนดตัวแปรที่นี่ตัวแปรจะถูกกำหนดในแต่ละลูปซ้ำแล้วซ้ำเล่า ในการวนซ้ำแต่ละครั้ง x ถูกตั้งค่าเป็น 0 เพิ่มขึ้นทีละ 1 และพิมพ์ไปยังคอนโซล ดังนั้นเราจึงได้ผลลัพธ์“ 1 1 1 1 …” ตัวอย่างนี้ค่อนข้างชัดเจน แต่อาจทำให้สับสนเมื่อสิ่งต่าง ๆ ซับซ้อนเล็กน้อย

เราไม่ต้องการให้ x ถูกเขียนทับดังนั้นเราจะบรรลุสิ่งนี้และได้ผลลัพธ์“ 1 2 3 4 …” ได้อย่างไร? โดยใช้ ตัวแปรส่วนกลาง . นี่ไม่ใช่เรื่องแปลก แต่อย่างใดเรากำหนดตัวแปรภายนอกของ draw block เท่านั้นจึงไม่ได้รับการกำหนดซ้ำในการวนซ้ำแต่ละครั้ง นอกจากนี้ขอบเขตของตัวแปรจะสามารถเข้าถึงได้ตลอดทั้งร่าง ดูรหัสด้านล่าง:

int x = 0; void setup(){ } void draw(){ x += 1; print(x+' '); }

คุณอาจกำลังถามตัวเองว่าตัวแปรที่กำหนดไว้นอกบล็อกของเราทำงานอย่างไร แล้วทำไมเราไม่ใช้การตั้งค่า () บล็อกเนื่องจากมันถูกเรียกใช้งานครั้งเดียวในตอนเริ่มต้น คำตอบเกี่ยวข้องกับการเขียนโปรแกรมเชิงวัตถุและขอบเขตหากคุณไม่คุ้นเคยคุณสามารถข้ามย่อหน้านี้ได้ อ้างถึงส่วนที่ฉันอธิบายว่าการประมวลผลโค้ดถูกแปลงเป็น Java อย่างไร จำได้ว่าพวกเขาถูกรวมเข้ากับคลาส Java อย่างไร? ตัวแปรที่เราเขียนนอกการตั้งค่า () และบล็อก draw () ก็ถูกห่อด้วยดังนั้นจึงถือว่าเป็น ฟิลด์ ของชั้นนอกที่ห่อรหัสของเรา การใช้ x + = 1 จะเหมือนกับการใช้ this.x + = 1 นอกจากนี้ยังทำหน้าที่เหมือนกันในกรณีของเราไม่มีการกำหนดตัวแปรที่เรียกว่า x ในขอบเขตของการวาด () และมีการค้นหาขอบเขตภายนอกซึ่งเป็นขอบเขตของ นี้ . แล้วทำไมเราไม่กำหนดตัวแปร x ในส่วนการตั้งค่า () หากเราทำเช่นนั้นขอบเขตที่กำหนด x ไว้จะเป็นขอบเขตของฟังก์ชันการตั้งค่าและจะไม่สามารถเข้าถึงได้จากบล็อก draw ()

การวาดรูปร่างและข้อความ

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

ก่อนที่เราจะเริ่มคุณควรทำความเข้าใจกับไฟล์ ระบบพิกัด . ในการประมวลผลคุณกำหนดพิกัดของทุกวัตถุที่คุณวาดบนหน้าจอ ระบบพิกัดมีหน่วยเป็นพิกเซล จุดเริ่มต้น (เช่นจุดเริ่มต้น) คือมุมบนซ้ายคุณควรให้พิกัดของคุณสัมพันธ์กับจุดนั้น สิ่งที่คุณควรทราบอีกประการหนึ่งคือแต่ละรูปร่างมีจุดอ้างอิงที่แตกต่างกัน ตัวอย่างเช่น rect () มีมุมบนซ้ายเป็นจุดอ้างอิง สำหรับวงรี () คือจุดศูนย์กลาง จุดอ้างอิงเหล่านี้สามารถเปลี่ยนแปลงได้ด้วยวิธีการเช่น rectMode () และ ellipseMode () ซึ่งฉันจะอธิบายในส่วนคุณสมบัติและการตั้งค่า รูปตัวอย่างมีไว้เพื่อช่วยให้คุณเข้าใจได้ดีขึ้น

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

จุด() - จุดง่ายๆต้องการเพียงพิกัดเดียว การใช้งาน:

  • จุด (x, y)
  • จุด (x, y, z) - ในกรณีที่คุณใช้ 3 มิติ

ไลน์() - สำหรับสร้างเส้น คุณสามารถสร้างเส้นที่มีเพียงจุดเริ่มต้นและจุดสิ้นสุด การใช้งาน:

  • เส้น (x1, y1, x2, y2)
  • บรรทัด (x1, y1, z1, x2, y2, z2) - ในกรณีที่คุณใช้ 3 มิติ

สามเหลี่ยม() - สำหรับสร้างสามเหลี่ยม การใช้งาน: สามเหลี่ยม (x1, y1, x2, y2, x3, y3)

จะรู้ได้อย่างไรว่าบริษัทเป็น s corp หรือ c corp

รูปสี่เหลี่ยม () - สำหรับสร้างรูปสี่เหลี่ยม การใช้งาน: รูปสี่เหลี่ยม (x1, y1, x2, y2, x3, y3, x4, y4)

rect () - สำหรับการสร้างสี่เหลี่ยมผืนผ้า จุดอ้างอิงคือมุมบนซ้ายตามค่าเริ่มต้น (ดูรูป) นี่คือการใช้งาน:

  • rect (x, y, w, h)
  • rect (x, y, w, h, r) - ‘r’ หมายถึงรัศมีเป็นพิกเซลเพื่อทำให้มุมโค้งมน
  • rect (x, y, w, h, tl, tr, br, bl) - รัศมีสำหรับซ้ายบน, ขวาบน, ขวาล่าง, มุมล่างซ้ายตามลำดับ นี่เป็นพิกเซลด้วย

วงรี () - สำหรับสร้างรูปวงรี นอกจากนี้ยังใช้ในการสร้างวงกลมควรกำหนดค่าความกว้างและความสูงเท่ากัน จุดอ้างอิงสำหรับรูปร่างนี้คือจุดศูนย์กลางตามค่าเริ่มต้น (ดูรูป) นี่คือการใช้งาน:

  • วงรี (x, y, w, h)

ส่วนโค้ง () - วาดส่วนโค้ง การใช้งาน:

  • arc (x, y, w, h, start, stop) - 'start' และ 'stop' ใช้เพื่อกำหนดมุมที่จะเริ่มและหยุดวาดส่วนโค้ง ค่าเป็นเรเดียน สามารถใช้ค่าคงที่เช่น“ PI, HALF_PI, QUARTER_PI และ TWO_PI” ได้
  • arc (x, y, w, h, start, stop, mode) - ตัวแปร 'mode' คือการกำหนดรูปแบบการแสดงผลของส่วนโค้ง (สตริง) ตัวเลือกที่ใช้ได้คือ“ เปิดคอร์ดพาย” OPEN จะทำให้ชิ้นส่วนที่ไม่ได้วาดเป็นแบบไร้ขอบ CHORD จะทำส่วนที่ไม่ได้วาดให้สมบูรณ์ด้วยเส้นขอบ พายจะทำให้ส่วนโค้งของคุณดูเหมือนกราฟวงกลม

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

ข้อความ () - แสดงข้อความ การใช้งาน:

  • ข้อความ (c, x, y) - 'c' หมายถึงอักขระอักขระที่เป็นตัวอักษรและตัวเลขคละกันจะปรากฏขึ้น
  • ข้อความ (c, x, y, z) - ในกรณีที่คุณทำงานกับ 3 มิติ
  • ข้อความ (str, x, y) - 'str' ​​คือสตริงที่จะแสดง
  • ข้อความ (str, x, y, z) - ในกรณีที่คุณทำงานกับ 3 มิติ
  • ข้อความ (num, x, y) - 'num' คือค่าตัวเลขที่จะแสดง
  • ข้อความ (num, x, y, z) - ในกรณีที่คุณทำงานกับ 3 มิติ

คุณสมบัติและการตั้งค่า

สิ่งแรกที่ควรอธิบายในส่วนนี้คือตรรกะเบื้องหลังการตั้งค่าคุณสมบัติของวัตถุ การเติมสีสีพื้นหลังเส้นขอบความกว้างของเส้นขอบสีเส้นขอบการจัดแนวของรูปร่างลักษณะเส้นขอบ ฯลฯ อาจเป็นตัวอย่างของคุณสมบัติเหล่านี้

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

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

คุณสมบัติและการตั้งค่าที่สำคัญที่นิยมใช้มีดังนี้

การตั้งค่าสไตล์

เติม () - ตั้งค่าสีเติมให้กับวัตถุ การตั้งค่านี้ยังใช้กับข้อความสี ในตอนนี้เราจำเป็นต้องทราบการใช้งานต่อไปนี้เท่านั้น:

  • เติม (r, g, b) - ค่าสีแดงสีเขียวและสีน้ำเงินเป็นจำนวนเต็ม
  • เติม (r, g, b, a) - ค่าอัลฟาเพิ่มเติมสูงสุดคือ 255

noFill () - ตั้งค่าสีเติมให้โปร่งใส

โรคหลอดเลือดสมอง () - ตั้งค่าสีเส้นขีดให้กับวัตถุ คุณสมบัติ Stroke ใช้ได้กับเส้นและเส้นขอบรอบ ๆ วัตถุ ในตอนนี้เราจำเป็นต้องทราบการใช้งานต่อไปนี้เท่านั้น:

  • จังหวะ (r, g, b) - ค่าสีแดงสีเขียวและสีน้ำเงินเป็นจำนวนเต็ม
  • จังหวะ (r, g, b, a) - ค่าอัลฟาเพิ่มเติมสูงสุดคือ 255

noStroke () - ลบจังหวะ

น้ำหนัก () - ตั้งค่าความกว้างของจังหวะ การใช้งาน:

  • strokeWeight (x) - x เป็นจำนวนเต็มและแสดงถึงความกว้างของเส้นขีดเป็นพิกเซล

พื้นหลัง() - ตั้งค่าสีพื้นหลัง ในตอนนี้เราจำเป็นต้องทราบการใช้งานต่อไปนี้เท่านั้น:

  • พื้นหลัง (r, g, b) - ค่าสีแดงสีเขียวและสีน้ำเงินเป็นจำนวนเต็ม
  • พื้นหลัง (r, g, b, a) - ค่าอัลฟาเพิ่มเติมสูงสุดคือ 255

การตั้งค่าการจัดตำแหน่ง

ellipseMode () - ตั้งค่าตำแหน่งที่จะใช้เป็นจุดอ้างอิงในการจัดแนวไข่ปลา การใช้งาน:

  • ellipseMode (โหมด) - 'โหมด' คือพารามิเตอร์ต่อไปนี้เป็นพารามิเตอร์ที่มี:
    • CENTER (ค่าเริ่มต้น): ใช้จุดศูนย์กลางเป็นจุดอ้างอิง
    • รัศมี: สิ่งนี้ใช้จุดศูนย์กลางเป็นจุดอ้างอิงเช่นกัน แต่ในโหมดนี้ค่า w และ h ที่คุณระบุจะถือว่าเป็นครึ่งหนึ่ง (เช่นรัศมีแทนที่จะเป็นเส้นผ่านศูนย์กลาง)
    • CORNER: ใช้มุมบนซ้ายเป็นจุดอ้างอิง
    • CORNERS: ตั้งค่าพารามิเตอร์สองตัวแรก (x และ y) เป็นตำแหน่งของมุมบนซ้ายและพารามิเตอร์สองตัวสุดท้าย (w และ h) เป็นตำแหน่งของมุมล่างซ้ายของวงรี ดังนั้นโหมดนี้ 'ความกว้าง' และ 'ความสูง' จึงไม่เกี่ยวข้องกัน การคิดว่ามันเป็นวงรี (x_tl, y_tl, x_br, y_br) เหมาะสมกว่าในกรณีนี้

rectMode () - ตั้งค่าตำแหน่งที่จะใช้เป็นจุดอ้างอิงในการจัดแนวสี่เหลี่ยม การใช้งาน:

  • rectMode (โหมด) - 'โหมด' คือพารามิเตอร์นี่คือพารามิเตอร์ที่มี:
    • CENTER: ใช้จุดศูนย์กลางเป็นจุดอ้างอิง
    • รัศมี: สิ่งนี้ใช้จุดศูนย์กลางเป็นจุดอ้างอิงด้วย แต่ในโหมดนี้ค่า w และ h ที่คุณระบุจะถือว่าเป็นครึ่งหนึ่ง
    • CORNER (ค่าเริ่มต้น): ใช้มุมบนซ้ายเป็นจุดอ้างอิง
    • CORNERS: ตั้งค่าพารามิเตอร์สองตัวแรก (x และ y) เป็นตำแหน่งของมุมบนซ้ายและพารามิเตอร์สองตัวสุดท้าย (w และ h) เป็นตำแหน่งของมุมล่างซ้ายของวงรี ดังนั้นโหมดนี้ 'ความกว้าง' และ 'ความสูง' จึงไม่เกี่ยวข้องกัน การคิดว่ามันเป็น rect (x_tl, y_tl, x_br, y_br) มีความหมายมากกว่าในกรณีนี้

การตั้งค่าที่เกี่ยวข้องกับข้อความ

textSize () - กำหนดขนาดตัวอักษรของข้อความ การใช้งาน:

  • textSize (ขนาด) - ค่าจำนวนเต็มของขนาดที่ต้องการ

textLeading () - ตั้งค่าความสูงของบรรทัดของข้อความของคุณ การใช้งาน:

  • textLeading (lineheight) - ค่าพิกเซลของช่องว่างระหว่างบรรทัด

textAlign () - ตั้งค่าตำแหน่งที่จะใช้เป็นจุดอ้างอิงในการจัดแนวข้อความ การใช้งาน.

  • textAlign (alignX) - 'alignX' ใช้สำหรับการจัดแนวแนวนอน พร้อมใช้งาน: ซ้าย, กลาง, ขวา
  • textAlign (alignX, alignY) - 'alignY' ใช้สำหรับการจัดแนวแนวตั้ง พร้อมใช้งาน: TOP, BOTTOM, CENTER, BASELINE

ภาพเคลื่อนไหว

จนถึงตอนนี้เราได้เรียนรู้วิธีการวาดสิ่งของและข้อความ แต่ปัญหาของพวกเขาคือพวกมันคงที่ ตอนนี้เราจะทำให้พวกเขาเคลื่อนไหวได้อย่างไร? เรียบง่าย แทนที่จะให้พิกัดเป็นจำนวนเต็มเราใช้ตัวแปรเพื่อให้เราสามารถเพิ่ม / ลดได้ . เข้าท่า? ดูรหัสต่อไปนี้:

// initialize x and y as 0 int x=0; int y=0; void setup(){ size(800,600); background(255); // set background color to white } void draw(){ fill(255,0,0); // fill color red stroke(0,0,255); // stroke color blue ellipseMode(CENTER); // ref. point to ellipse is its center ellipse(x, y, 20, 20); // draw the ellipse // increment x and y x+=5; y+=5; }

คุณเห็นไหมว่าเราจัดการภาพเคลื่อนไหวอย่างไร เราตั้งค่า x และ y เป็นตัวแปรส่วนกลางและค่าเริ่มต้นเป็น 0 ในลูปการวาดของเราเราสร้างวงรีของเราตั้งค่าสีเติมเป็นสีแดงสีเส้นขีดเป็นสีน้ำเงินและกำหนดพิกัดเป็น x และ y เมื่อเราเพิ่ม x และ y ลูกบอลก็จะเปลี่ยนตำแหน่ง แต่มีปัญหากับรหัสนี้สังเกตได้ไหม? ในฐานะที่เป็นความท้าทายที่ง่ายสำหรับตัวคุณเองให้ลองคิดว่าปัญหาคืออะไรและทดสอบดู นี่คือผลลัพธ์:

ความตั้งใจของฉันที่ปล่อยให้สิ่งนี้เกิดขึ้นคือการทำให้คุณรู้ว่าลักษณะการประมวลผลแบบวนซ้ำทำงานอย่างไร ดูตัวอย่างในส่วน“ Draw Block” คุณจำได้ไหมว่าทำไมเราถึงได้“ 1 1 1 …” แทนที่จะเป็น“ 1 2 3 …” เหตุผลเดียวกับที่ลูกบอลทิ้งรอยไว้ข้างหลัง ทุกครั้งที่บล็อกการวาดวนซ้ำ x และ y จะเพิ่มขึ้นทีละ 5 ดังนั้นลูกบอลจึงถูกวาดใหม่เป็น 5 พิกเซลลงและไปทางขวา อย่างไรก็ตามลูกบอลถูกดึงออกจากการทำซ้ำก่อนหน้านี้ยังคงอยู่ในมุมมอง เราจะทำให้มันหายไปได้อย่างไร? เดา ๆ ?

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

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

การโต้ตอบแป้นพิมพ์และเมาส์

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

void setup() { size(500, 500); } void draw() { if (mousePressed) { // Codes here will be executed as long as the mouse // button is pressed if (mouseButton == LEFT){ // This lines will be executed as long as // the clicked mouse button is the left mouse // button. } } if (keyPressed) { // Codes here will be executed as long as a key // on the keyboard is pressed if (key == CODED) { // This if statement checks if the pressed key // is recognised by Processing. if (keyCode == ENTER) { // This lines will be executed if the pressed key // is the enter key. } } else{ // This lines will be executed if the pressed key // is not recognised by processing. } } } void mousePressed() { // These codes will be executed once, when mouse // is clicked. Note that mouseButton variable is // also be used here. } void keyPressed() { // These codes will be executed once, when a key // is pressed. Note that key and keyCode variables // are also usable here. }

อย่างที่คุณเห็นมันค่อนข้างง่ายที่จะตรวจสอบว่าคลิกเมาส์หรือกดปุ่มใดอยู่ อย่างไรก็ตามมีตัวเลือกเพิ่มเติมสำหรับตัวแปร mousePressed และ keyCode ตัวเลือกที่ใช้ได้สำหรับ เมาส์ อยู่ซ้ายขวาและตรงกลาง มีอีกมากมายสำหรับ รหัสกุญแจ ; ขึ้น, ลง, ซ้าย, ขวา, ปรับเปลี่ยน, ควบคุม, เปลี่ยน, แบ็คสเปซ, แท็บ, เข้า, ส่งกลับ, ESC และลบ

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

สรุป

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

คุณควรทำ 4 ลูก ด้วย สีที่ต่างกัน , เริ่มจาก 4 มุม ของหน้าจอ เดินทางผ่านศูนย์กลาง ด้วย ความเร็วที่แตกต่างกัน . เมื่อคุณคลิกปุ่มเมาส์ค้างไว้ลูกบอลควร แช่แข็ง . และเมื่อคุณปล่อยเมาส์ลูกบอลจะกลับไปที่ตำแหน่งเริ่มต้นและเคลื่อนที่ต่อไป ดังนั้นฉันกำลังมองหาสิ่งที่ต้องการ นี้ .

หลังจากลองออกกำลังกายด้วยตัวเองแล้วคุณสามารถตรวจสอบรหัสได้ ที่นี่ .

สวิฟท์ vs วัตถุประสงค์ c 2017

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

ส่วนที่สองของคู่มือขั้นสูงสุดสำหรับการประมวลผล การสอนทีละขั้นตอน เพื่อสร้างเกมง่ายๆได้รับการเผยแพร่

สร้างสรรค์อย่างมีจุดมุ่งหมาย - ภาพรวมของงานที่ต้องทำกรอบ

การออกแบบ Ux

สร้างสรรค์อย่างมีจุดมุ่งหมาย - ภาพรวมของงานที่ต้องทำกรอบ
พื้นฐานของการออกแบบเว็บไซต์ใหม่ - กรณีศึกษา

พื้นฐานของการออกแบบเว็บไซต์ใหม่ - กรณีศึกษา

การออกแบบ Ui