คุณต้องการรู้อะไรเมื่อแปลงเกม Flash เป็น HTML5

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

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

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

การอ่านที่แนะนำ : หลักการออกแบบเกม HTML5

วิธีปรับปรุงประสบการณ์เกม HTML5

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

• รองรับอุปกรณ์พกพา
  การแปลงจาก Flash เป็น JavaScript ช่วยให้เข้าถึงผู้ชมที่กว้างขึ้น (ผู้ใช้อุปกรณ์เคลื่อนที่) การสนับสนุนสำหรับการควบคุมหน้าจอสัมผัสมักจะต้องถูกนำมาใช้ในเกมเช่นกัน โชคดีที่ตอนนี้ทั้งอุปกรณ์ Android และ iOS รองรับ WebGL ดังนั้นการเรนเดอร์ 30 หรือ 60 FPS มักจะทำได้อย่างง่ายดาย ในหลายกรณี 60 FPS จะไม่ทำให้เกิดปัญหาใดๆ ซึ่งจะดีขึ้นเมื่อเวลาผ่านไป เนื่องจากอุปกรณ์เคลื่อนที่มีประสิทธิภาพมากขึ้นเรื่อยๆ

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

ทำไมการข้าม HTML และ CSS สำหรับ UI ในเกมจะช่วยปรับปรุงประสิทธิภาพของเกม

เมื่อพูดถึงการพัฒนาเกม JavaScript อาจเป็นเรื่องน่าดึงดูดที่จะใช้ประโยชน์จาก HTML และ CSS สำหรับปุ่มในเกม วิดเจ็ต และองค์ประกอบ GUI อื่นๆ คำแนะนำของฉันคือต้องระวังที่นี่ มันขัดกับสัญชาตญาณ แต่จริง ๆ แล้วการใช้ประโยชน์จากองค์ประกอบ DOM นั้นมีประสิทธิภาพน้อยกว่าในเกมที่ซับซ้อน และสิ่งนี้ได้รับความสำคัญมากขึ้นบนมือถือ หากคุณต้องการบรรลุ 60 FPS คงที่ในทุกแพลตฟอร์ม อาจจำเป็นต้องลาออกจาก HTML และ CSS

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

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

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

วิธีตรวจสอบให้แน่ใจว่าได้โหลดแบบอักษรที่กำหนดเองแล้ว

หากคุณต้องการแสดงข้อความด้วยแบบอักษรเวกเตอร์ที่กำหนดเอง (เช่น TTF หรือ OTF) คุณต้องแน่ใจว่าเบราว์เซอร์โหลดแบบอักษรนี้แล้วก่อนที่จะแสดงข้อความใดๆ Phaser v2 ไม่มีวิธีแก้ปัญหาสำหรับจุดประสงค์นี้ แต่สามารถใช้ไลบรารีอื่นได้: Web Font Loader

สมมติว่าคุณมีไฟล์ฟอนต์และรวม Web Font Loader ไว้ในเพจของคุณแล้ว ด้านล่างนี้เป็นตัวอย่างง่ายๆ ของการโหลดฟอนต์:

สร้างไฟล์ CSS อย่างง่ายที่จะโหลดโดย Web Font Loader (คุณไม่จำเป็นต้องรวมไว้ใน HTML ของคุณ):

 @font-face { // This name you will use in JS font-family: 'Gunplay'; // URL to the font file, can be relative or absolute src: url('../fonts/gunplay.ttf') format('truetype'); font-weight: 400; }

ตอนนี้กำหนดตัวแปรส่วนกลางชื่อ WebFontConfig บางสิ่งที่ง่ายเช่นนี้มักจะพอเพียง:

 var WebFontConfig = { 'classes': false, 'timeout': 0, 'active': function() { // The font has successfully loaded... }, 'custom': { 'families': ['Gunplay'], // URL to the previously mentioned CSS 'urls': ['styles/fonts.css'] } };

สุดท้ายนี้ อย่าลืมใส่รหัสของคุณในการโทรกลับ 'ใช้งานอยู่' ที่แสดงด้านบน และนั่นแหล่ะ!

วิธีทำให้ผู้ใช้บันทึกเกมได้ง่ายขึ้น

ในการจัดเก็บข้อมูลในเครื่องใน ActionScript อย่างต่อเนื่อง คุณจะต้องใช้คลาส SharedObject ใน JavaScript การแทนที่อย่างง่ายคือ localStorage API ซึ่งช่วยให้สามารถจัดเก็บสตริงสำหรับการดึงข้อมูลในภายหลัง การโหลดหน้าซ้ำที่ยังหลงเหลืออยู่

การบันทึกข้อมูลทำได้ง่ายมาก:

 var progress = 15; localStorage.setItem('myGame.progress', progress);

โปรดทราบว่าในตัวอย่างข้างต้น ตัวแปร progress ซึ่งเป็นตัวเลข จะถูกแปลงเป็นสตริง

การโหลดทำได้ง่ายเช่นกัน แต่จำไว้ว่าค่าที่ดึงออกมาจะเป็นสตริงหรือ null หากไม่มีอยู่

 var progress = parseInt(localStorage.getItem('myGame.progress')) || 0;

ที่นี่เราตรวจสอบให้แน่ใจว่าค่าที่ส่งกลับเป็นตัวเลข หากไม่มีอยู่ ระบบจะกำหนด 0 ให้กับตัวแปร progress

คุณยังสามารถจัดเก็บและเรียกโครงสร้างที่ซับซ้อนมากขึ้น เช่น JSON:

 var stats = {'goals': 13, 'wins': 7, 'losses': 3, 'draws': 1}; localStorage.setItem('myGame.stats', JSON.stringify(stats)); … var stats = JSON.parse(localStorage.getItem('myGame.stats')) || {};

มีบางกรณีที่อ็อบเจ็กต์ localStorage จะไม่พร้อมใช้งาน ตัวอย่างเช่น เมื่อใช้โปรโตคอล file:// หรือเมื่อโหลดเพจในหน้าต่างส่วนตัว คุณสามารถใช้คำสั่ง try and catch เพื่อให้แน่ใจว่าโค้ดของคุณจะทำงานต่อไปและใช้ค่าดีฟอลต์ ดังที่แสดงในตัวอย่างด้านล่าง:

 try { var progress = localStorage.getItem('myGame.progress'); } catch (exception) { // localStorage not available, use default values }

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

หมายเหตุ : หากเกมของคุณฝังอยู่ใน iframe แล้ว localStorage จะไม่คงอยู่ใน iOS ในกรณีนี้ คุณจะต้องเก็บข้อมูลใน parent iframe แทน

วิธีใช้ประโยชน์จากการแทนที่ Fragment Shader เริ่มต้น

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

ด้านล่างนี้เป็นตัวอย่างของวิธีการจัดหาตัวแบ่งส่วนเริ่มต้นของคุณเองให้กับ Phaser v2:

 function preload() { this.load.shader('filename.frag', 'shaders/filename.frag'); } function create() { var renderer = this.renderer; var batch = renderer.spriteBatch; batch.defaultShader = new PIXI.AbstractFilter(this.cache.getShader('filename.frag')); batch.setContext(renderer.gl); }

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

วิธีการเปลี่ยนวิธีการย้อมสีด้วย Shader เริ่มต้น

สามารถใช้ shader เริ่มต้นแบบกำหนดเองเพื่อแทนที่วิธีการย้อมสีเริ่มต้นใน Phaser และ PixiJS

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

 // Specific tint variant, similar to the Flash tinting that adds // to the color and does not multiply. A negative of a color // must be supplied for this shader to work properly, ie set // sprite.tint to 0 to turn whole sprite to white. precision lowp float; varying vec2 vTextureCoord; varying vec4 vColor; uniform sampler2D uSampler; void main(void) { vec4 f = texture2D(uSampler, vTextureCoord); float a = clamp(vColor.a, 0.00001, 1.0); gl_FragColor.rgb = f.rgb * vColor.a + clamp(1.0 - vColor.rgb/a, 0.0, 1.0) * vColor.a * fa; gl_FragColor.a = fa * vColor.a; }

Shader นี้ทำให้พิกเซลสว่างขึ้นโดยการเพิ่มสีพื้นฐานให้กับสีอ่อน เพื่อให้ใช้งานได้ คุณต้องใส่ค่าลบของสีที่คุณต้องการ ดังนั้น เพื่อให้ขาว คุณต้องตั้งค่า:

 sprite.tint = 0x000000; // This colors the sprite to white Sprite.tint = 0x00ffff; // This gives red

ผลลัพธ์ในเกมของเราเป็นแบบนี้ (สังเกตว่ารถถังจะกะพริบเป็นสีขาวเมื่อโดน):

วิธีตรวจสอบการเบิกเงินเกินเพื่อตรวจหาปัญหาอัตราการเติม

การแทนที่ shader เริ่มต้นยังสามารถใช้เพื่อช่วยในการดีบัก ด้านล่างนี้ ฉันได้อธิบายว่าสามารถตรวจจับการวาดเกินด้วย shader ได้อย่างไร

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

มีวิธีการง่ายๆ ในการค้นหาจำนวนครั้งที่แต่ละพิกเซลบนหน้าจอถูกเขียนโดยแทนที่ global fragment shader ที่เป็นค่าเริ่มต้นใน PixiJS และ Phaser ด้วยวิธีนี้:

 void main(void) { gl_FragColor.rgb += 1.0 / 7.0; }

Shader นี้ทำให้พิกเซลที่ประมวลผลสว่างขึ้น หมายเลข 7.0 ระบุจำนวนการเขียนที่จำเป็นในการทำให้พิกเซลเป็นสีขาว คุณสามารถปรับหมายเลขนี้ตามที่คุณต้องการ กล่าวคือ มีการเขียนพิกเซลที่สว่างกว่าบนหน้าจอหลายครั้ง และพิกเซลสีขาวเขียนอย่างน้อย 7 ครั้ง

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

รูปภาพทางด้านซ้ายแสดงให้เห็นว่าผู้เล่นมองเห็นเกมอย่างไร ในขณะที่ภาพทางขวาแสดงเอฟเฟกต์ของการใช้ตัวแรเงา Overdraw กับฉากเดียวกัน

ทำไมฟิสิกส์เอ็นจิ้นถึงเป็นเพื่อนของคุณ

เอ็นจิ้นฟิสิกส์คือมิดเดิลแวร์ที่ทำหน้าที่จำลองวัตถุฟิสิกส์ (โดยปกติคือไดนามิกของร่างกายที่เข้มงวด) และการชนกันของวัตถุ เครื่องยนต์ฟิสิกส์จำลองช่องว่าง 2D หรือ 3D แต่ไม่ใช่ทั้งสองอย่าง เครื่องยนต์ฟิสิกส์ทั่วไปจะให้:

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

ที่ Merixstudio เราเป็นแฟนตัวยงของกลไกฟิสิกส์ Box2D และใช้งานไม่กี่ครั้ง มีปลั๊กอิน Phaser ที่ทำงานได้ดีสำหรับจุดประสงค์นี้ Box2D ยังใช้ในเอ็นจิ้นเกม Unity และ GameMaker Studio 2

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

ส่วนด้านซ้ายของภาพเป็นฉากจากเกม ในขณะที่ด้านขวาแสดงฉากเดียวกันกับภาพซ้อนทับดีบักฟิสิกส์ Phaser ที่แสดงอยู่ด้านบน

วิธีการส่งออกเสียงจากไฟล์ . fla

หากคุณมีเอฟเฟกต์เสียงเกม Flash ภายในไฟล์ . fla คุณจะไม่สามารถส่งออกจาก GUI ได้ (อย่างน้อยก็ไม่ใช่ใน Adobe Animate CC 2017) เนื่องจากไม่มีตัวเลือกเมนูที่ให้บริการตามวัตถุประสงค์นี้ แต่มีวิธีแก้ปัญหาอื่น — สคริปต์เฉพาะที่ทำอย่างนั้น:

 function normalizeFilename(name) { // Converts a camelCase name to snake_case name return name.replace(/([AZ])/g, '_$1').replace(/^_/, '').toLowerCase(); } function displayPath(path) { // Makes the file path more readable return unescape(path).replace('file:///', '').replace('|', ':'); } fl.outputPanel.clear(); if (fl.getDocumentDOM().library.getSelectedItems().length > 0) // Get only selected items var library = fl.getDocumentDOM().library.getSelectedItems(); else // Get all items var library = fl.getDocumentDOM().library.items; // Ask user for the export destination directory var root = fl.browseForFolderURL('Select a folder.'); var errors = 0; for (var i = 0; i < library.length; i++) { var item = library[i]; if (item.itemType !== 'sound') continue; var path = root + '/'; if (item.originalCompressionType === 'RAW') path += normalizeFilename(item.name.split('.')[0]) + '.wav'; else path += normalizeFilename(item.name); var success = item.exportToFile(path); if (!success) errors += 1; fl.trace(displayPath(path) + ': ' + (success ? 'OK' : 'Error')); } fl.trace(errors + ' error(s)');

วิธีใช้สคริปต์เพื่อส่งออกไฟล์เสียง:

1. บันทึกโค้ดด้านบนเป็นไฟล์ .jsfl บนคอมพิวเตอร์ของคุณ
2. เปิดไฟล์ . fla ด้วย Adobe Animate;
3. เลือก 'คำสั่ง' → 'เรียกใช้คำสั่ง' จากเมนูด้านบนและเลือกสคริปต์ในกล่องโต้ตอบที่เปิดขึ้น
4. ตอนนี้ไฟล์กล่องโต้ตอบอื่นปรากฏขึ้นเพื่อเลือกไดเร็กทอรีปลายทางการส่งออก

และเสร็จแล้ว! ตอนนี้คุณควรมีไฟล์ WAV ในไดเร็กทอรีที่ระบุ สิ่งที่ต้องทำคือแปลงเป็นไฟล์ เช่น MP3, OGG หรือ AAC

วิธีใช้ MP3 ในการแปลงไฟล์ Flash เป็น HTML5

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

อย่างไรก็ตาม มีสองสิ่งสำคัญที่คุณต้องจำเกี่ยวกับ MP3:

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

เหตุใดคุณจึงควรแปลง Flash เป็น JavaScript

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

ต้องการเรียนรู้เพิ่มเติม?

ในบทความนี้ ผมเน้นไปที่ Phaser v2 เป็นหลัก อย่างไรก็ตาม Phaser เวอร์ชันใหม่กว่านั้นพร้อมให้ใช้งานแล้ว และฉันขอแนะนำอย่างยิ่งให้คุณลองดู เพราะมันได้นำเสนอฟีเจอร์ที่ใหม่และเจ๋งมากมาย เช่น กล้องหลายตัว ฉาก ไทล์แมป หรือกลไกทางฟิสิกส์ของ Matter.js

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

โปรดจำไว้เสมอว่าไม่มีความรู้มากเกินไป โดยเฉพาะอย่างยิ่งเมื่อพูดถึงการพัฒนาเกม!