คำถามติดแท็ก html-canvas

ดังนั้นฉันกำลังสร้าง HTML5 RPG เพื่อความสนุก แผนที่คือ<canvas>(ความกว้าง 512px สูง 352px | 16 แผ่นข้าม, 11 แผ่นจากบนลงล่าง) ฉันต้องการทราบว่ามีวิธีการทาสีที่มีประสิทธิภาพมากกว่า<canvas>นี้หรือไม่ นี่คือวิธีที่ฉันมีตอนนี้ วิธีการโหลดและวาดภาพบนแผนที่ แผนที่จะถูกวาดด้วยกระเบื้อง (32x32) โดยใช้Image()ชิ้นส่วน ไฟล์ภาพจะถูกโหลดผ่านง่ายforห่วงและใส่ลงในอาร์เรย์ที่เรียกว่าจะทาสีเกี่ยวกับการใช้tiles[]drawImage() ก่อนอื่นเราโหลดไพ่ ... และนี่คือวิธีที่จะทำ: // SET UP THE & DRAW THE MAP TILES tiles = []; var loadedImagesCount = 0; for (x = 0; x <= NUM_OF_TILES; x++) { var imageObj …

46 javascript  html5  html-canvas  image 

ฉันยังใหม่ต่อการพัฒนาเกม แต่ไม่ได้เขียนโปรแกรม ฉัน (อีกครั้ง) เล่นกับเกมประเภท Pong โดยใช้canvasองค์ประกอบของ JavaScript ฉันสร้างPaddleวัตถุที่มีคุณสมบัติดังต่อไปนี้ ... width height x y colour ฉันยังมีPongวัตถุที่มีคุณสมบัติเช่น ... width height backgroundColour draw(). draw()วิธีการในปัจจุบันคือการรีเซ็ตcanvasและที่เป็นที่คำถามขึ้นมา ควรPaddleวัตถุมีdraw()วิธีการรับผิดชอบสำหรับการวาดภาพหรือควรdraw()ของPongวัตถุต้องรับผิดชอบสำหรับการวาดภาพของนักแสดง (ฉันคิดว่าเป็นคำที่ถูกต้องโปรดแก้ไขฉันหากฉันไม่ถูกต้อง) ฉันคิดว่ามันจะเป็น advantagous สำหรับPaddleการวาดตัวเองที่ผมยกตัวอย่างวัตถุสองและPlayer Enemyถ้ามันไม่ได้อยู่ในPongของdraw()ฉันจะต้องเขียนรหัสที่คล้ายกันสองครั้ง การปฏิบัติที่ดีที่สุดที่นี่คืออะไร? ขอบคุณ

41 rendering  game-loop  html-canvas  mathematics  vector  projection  legal  game-industry  music  copyright  android  multithreading  cocos2d  2d  sprites  art  2d  3d  models  hand-drawn  xna  c#  fonts  c++  directx9  opengl  shaders  glsl  compatibility  nvidia  software-engineering  android  design-patterns  bounding-boxes  octree  java  console  lwjgl  xna  collision-detection  movement  mmo  server  java  android  multithreading  client-server  source-code  xna  hlsl 

ปิด คำถามนี้จะต้องมีมากขึ้นมุ่งเน้น ไม่ยอมรับคำตอบในขณะนี้ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้มุ่งเน้นที่ปัญหาเดียวโดยแก้ไขโพสต์นี้ ปิดให้บริการใน5 ปีที่ผ่านมา ฉันมีเกม HTML5 / canvas ที่เพิ่งจะเสร็จและพร้อมที่จะเปิดตัว มันเป็นเกม 2 มิติที่คุณสำรวจและทำลายภูมิทัศน์ที่สร้างโดยกระบวนการสร้างไอเท็มและโครงสร้างเพื่อความอยู่รอด ฉันต้องจบ 'ตอนจบ' และแก้ไขข้อบกพร่องเล็กน้อย แต่เกมก็พร้อมแล้วสำหรับผู้เล่น เกมดังกล่าวจะมีอิสระในการเล่นบนเว็บและฉันวางแผนที่จะเริ่มเวอร์ชันการทำงานสำหรับ iOS และ Mac App Store ฉันจะเพิ่มเนื้อหาลงในเกมต่อไปแม้หลังจากเปิดตัวแล้ว ใครสามารถแนะนำสิ่งต่าง ๆ ที่ฉันควรจำก่อนที่จะเปิดเกม ขอบคุณ!

23 html5  html-canvas  marketing 

เกม Canvas ที่เรียบง่ายของฉันดูเหมือนจะทำงานได้ดีบน Chrome และ FF บน Mac / Linux ฉันยังไม่มีโอกาสทดสอบบนสมาร์ทโฟนหรือ Windows มันไม่ได้ใช้การบัฟเฟอร์คู่ แต่ฉันได้เห็นตัวอย่าง JS Canvas บางส่วนที่ใช้ การใช้บัฟเฟอร์คู่แนะนำเมื่อใด มันสร้างความแตกต่างสำหรับเบราว์เซอร์เฉพาะเท่านั้นหรือไม่ มีผลการดำเนินงานที่สำคัญหรือไม่ ขอบคุณ!

23 javascript  html5  html-canvas  double-buffering 

ฉันกำลังสร้างเกม JavaScript / HTML5 (ใช้ Canvas) สำหรับมือถือ (Android / iPhone / WebOS) ด้วย PhoneGap ขณะนี้ฉันกำลังพยายามออกแบบวิธีการสร้าง UI และกระดานเล่นและวิธีที่พวกเขาควรโต้ตอบ แต่ฉันไม่แน่ใจว่าทางออกที่ดีที่สุดคืออะไร นี่คือสิ่งที่ฉันคิดได้ - สร้าง UI ลงในผืนผ้าใบโดยใช้สิ่งต่าง ๆ เช่น drawImage และ fillText Build ส่วนต่าง ๆ ของ UI ที่อยู่ด้านนอกของผืนผ้าใบโดยใช้วัตถุ DOM ปกติแล้วลอย div บนผืนผ้าใบเมื่อองค์ประกอบ UI จำเป็นต้องซ้อนผ้าใบในกระดาน มีเทคนิคใดที่เป็นไปได้อื่น ๆ ที่ฉันสามารถใช้ในการสร้าง UI เกมที่ฉันไม่ได้คิด? นอกจากนี้เกมประเภทใดที่ถือว่าเป็น "มาตรฐาน" (ฉันรู้ว่าเกม HTML5 ไม่เป็นที่นิยมมากดังนั้นอาจจะยังไม่มีวิธี …

23 gui  javascript  html5  mobile  html-canvas 

ฉันคิดเกี่ยวกับการสร้างเกมรถ 2D บนลงล่างสำหรับ HTML5 สำหรับเกมแรกของฉันฉันเขียนฟิสิกส์และชนกับตัวฉัน แต่สำหรับเกมนี้ฉันต้องการใช้ห้องสมุดสำเร็จรูป ฉันค้นพบ Box2D และพอร์ต JS ของมัน http://box2d-js.sourceforge.net ดูเหมือนว่าจะเป็นพอร์ตที่ค่อนข้างเก่าสร้างในปี 2008 มันขาดคุณสมบัติหลายอย่างของ Box2D ปัจจุบันหรือมีปัญหาสำคัญกับมันหรือไม่? และมีทางเลือกอื่นอีกหรือเปล่า?

19 javascript  box2d  html5  html-canvas 

ที่มา: ฉันมีพื้นฐานการพัฒนาที่กว้างขวาง แต่ครั้งสุดท้ายที่ฉันเขียนเกมเมื่อหลายปีก่อน ทักษะ Javascript ของฉันค่อนข้าง จำกัด และฉันตั้งใจที่จะปรับปรุงพวกเขาโดยการสร้างเกมง่ายๆ - Tetris, Pac-man หรืออะไรบางอย่างในระดับความซับซ้อนนั้น คำถาม: สำหรับตัวเลือกพื้นฐานที่ฉันจำเป็นต้องทำคือดูเหมือนว่าฉันควรแสดง<canvas>องค์ประกอบหรือไม่ ด้วยผืนผ้าใบฉันมีเครื่องมือพื้นฐานสำหรับการเรนเดอร์จุดเส้นและสิ่งที่ซับซ้อนกว่านั้น สันนิษฐานว่ามีหรือจะมีกรอบต่าง ๆ เพื่อช่วยในเรื่องนี้ หากไม่มีผ้าใบฉันสามารถเก็บวัตถุของฉันไว้ในต้นไม้ DOM ได้เช่นเดียวกับหน้าเว็บทั่วไปที่ค่อนข้างซับซ้อนมีองค์ประกอบที่ทับซ้อนกันมากมาย วิธีการหนึ่งดีกว่าวิธีอื่นหรือไม่? พวกเขาเป็นพิเศษร่วมกัน? ฉันจะรู้ได้อย่างไรว่าควรเลือกแบบไหน

14 javascript  html5  html-canvas 

ฉันเปิดโปรแกรม 3D ของฉันเองใน JavaScript และใช้เฉพาะภาพวาดบนผ้าใบไม่มี WebGL นี่เป็นโคลน Minecraft อีกอัน; ฉันรักกล่องอย่าตัดสินฉัน จนถึงตอนนี้ทุกอย่างใช้งานได้อย่างยอดเยี่ยมยกเว้นสิ่งหนึ่ง: ในแบบ 3 มิติเมื่อจุดยอดเยี่ยมอยู่ด้านหลังระนาบรูปวาดใกล้การฉายภาพบนหน้าจอของพวกเขาออกมาแปลก ๆ (สมมติว่าจุดยอดอื่น ๆ ที่ใช้ติดตามเครื่องบินอยู่ด้านหน้า) ฉันพยายามตัดจุดเหล่านี้ แต่จากนั้นฉันสามารถเห็นรางพื้นผิวที่ใช้จุดยอดเหล่านี้ ใน WebGL / OpenGL การ์ดกราฟิกจะดูแลจุดเหล่านี้และระนาบแสดงผลอย่างถูกต้อง แต่ฉันไม่สามารถเข้าถึงฮาร์ดแวร์ได้ดังนั้นฉันจะต้องใช้รหัสนี้เอง ฉันไม่แน่ใจว่าสิ่งที่จะทำให้มันในขณะนี้สิ่งสุดท้ายที่อยู่ในใจคือการย้อนกลับการฉายของจุดที่อยู่เบื้องหลังระนาบการตัดของผู้เล่นซึ่งดูเหมือนว่ามีเหตุผลเพราะฉันต้องฉายจุดไปยังหน้าจอที่อยู่ข้างหน้า ของจุดสุดยอด นี่คือความคิดของฉัน: นี่คือภาพบางส่วนที่แสดงให้เห็นถึงสิ่งที่เกิดขึ้น: จากระยะไกลกล่องสีฟ้าจะแสดงผลได้ดีอย่างสมบูรณ์ เมื่อจุดยอดหนึ่งไปด้านหลังระนาบการเล็มของผู้เล่นฉันจะฉายภาพย้อนกลับ แต่มันก็ดูไม่ถูก: focalLength *= -1; 2d.x = x*focalLength/z; 2d.y = y*focalLength/z; โปรดทราบว่าช่องสีเทาด้านหลังจะถูกลบออกอย่างสมบูรณ์เนื่องจากจุดยอดทั้งหมดที่ใช้วาดใบหน้านั้นอยู่ด้านหลังโปรแกรมเล่น นี่คือสิ่งที่เกิดขึ้นเมื่อค้นหาขึ้นหรือลง ฉันไม่รู้ว่าจะทำอย่างไรกับคณิตศาสตร์ที่อยู่เบื้องหลังสิ่งนี้ฉันหวังว่าจะมีใครบางคนประสบปัญหาเดียวกันแล้วและสามารถช่วยฉันได้

13 html-canvas 

ปิด คำถามนี้ต้องการรายละเอียดหรือความคมชัด ไม่ยอมรับคำตอบในขณะนี้ ต้องการปรับปรุงคำถามนี้หรือไม่ เพิ่มรายละเอียดและชี้แจงปัญหาโดยแก้ไขโพสต์นี้ ปิดให้บริการใน5 ปีที่ผ่านมา ฉันพยายามสร้างผู้เล่นหลายคนแบบง่าย ๆ ด้วย HTML5 Canvas, JavaScript (เช่นกันโดยใช้ไลบรารี Inheritance ง่าย ๆ ของ John Resig) และ Node.js ด้วย Socket.IO รหัสลูกค้าของฉัน: var canvas = document.getElementById ('เกม'); var context = canvas.getContext ('2d'); var socket = new io.Socket ('127.0.0.1', {พอร์ต: 8080}); ผู้เล่น var = null; var UP = …

13 multiplayer  html5  html-canvas  websocket  node.js 

ฉันได้สร้างโครงการเกมขนาดเล็กใน HTML5 โดยใช้เครื่องมือPhaser (ลองทั้ง 1.1.5 และ 1.1.6) จากนั้นพอร์ตไปยังแพลตฟอร์มมือถือใช้ Phonegap / Cordova สำหรับ Windows Phone 8, Android และ iOS ในเกมของฉันมีองค์ประกอบประมาณ 10 องค์ประกอบซึ่งทำให้เคลื่อนไหวได้ (ย้ายจากจุดหนึ่งไปยังอีกจุดหนึ่งและหมุนในเวลาเดียวกัน) สำหรับ iOS และ Windows Phone 8 ฉันไม่ประสบปัญหาใด ๆ แต่สำหรับ Android ประสิทธิภาพที่ยอมรับไม่ได้คือ ในทางกลับกันถ้าฉันรันเกมผ่านเบราว์เซอร์ของอุปกรณ์มันจะทำงานราบรื่นโดยไม่ล่าช้า แต่ APK ที่คอมไพล์ทำงานอย่างกระตุกมากและองค์ประกอบเคลื่อนไหวช้ามาก & ในลักษณะริบหรี่ ฉันได้ตรวจสอบการตั้งค่าสถานะการเร่งความเร็วฮาร์ดแวร์ android ตั้งค่าเป็น "จริง" ในไฟล์รายการ พยายามเปลี่ยนเป็นเท็จด้วย แต่นั่นก็ไม่ได้สะท้อนการเปลี่ยนแปลงใด ๆ ในประสิทธิภาพ ฉันได้ตรวจสอบเรื่องเดียวกันกับ Android …

12 android  javascript  html5  performance  html-canvas 

ปิด. คำถามนี้เป็นคำถามปิดหัวข้อ ไม่ยอมรับคำตอบในขณะนี้ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นไปตามหัวข้อสำหรับ Game Exchange Stack Exchange ปิดให้บริการใน5 ปีที่ผ่านมา ฉันต้องการสร้าง webapp สำหรับเว็บไซต์เกมของฉันที่เกี่ยวข้องกับการใช้ตัวอักษรเพื่อเป็นตัวแทนของสัตว์และผู้คนและให้พวกเขาย้ายไปรอบ ๆ บนแผนที่สี่เหลี่ยมด้วย AI อิสระ (เซิร์ฟเวอร์ขับเคลื่อน) โดยพื้นฐานแล้วแผนที่แคระ - ป้อมปราการในเบราว์เซอร์: กับสิ่งมีชีวิตเคลื่อนไหว mobs, npcs และชิ้น แม้ว่าจะไม่ใช่ว่าฉันไม่ได้ต้องการที่จะทำให้สเกลนี้ประสบความสำเร็จ แต่ฉันก็อาจเริ่มแสดงเนื้อหาหนึ่งส่วนสี่หรือทุกเวลา อาจเป็นบางส่วนของพื้นหลัง / กระเบื้องเคลื่อนที่สามารถโหลดแบบคงที่ แต่สำหรับสิ่งมีชีวิต / สัตว์และสิ่งที่เคลื่อนไหวได้ฉันไม่แน่ใจว่าโซลูชันเทคโนโลยีใดที่จะมีประสิทธิภาพมากที่สุด ฉันรู้<canvas>ว่าฉันไม่รู้ว่าความสามารถของมันเหมาะสมกับกรณีการใช้งานนี้หรือไม่ แน่นอนว่าจาวาสคริปต์จำนวนหนึ่งนั้นจำเป็นต้องมี มีไลบรารี javascript หรือไลบรารี่ canvas ที่เหมาะสมกับกรณีการใช้งานนี้หรือไม่? เทคโนโลยีอื่นที่ฉันไม่ทราบ? ใครรู้ตัวอย่างของเว็บไซต์ที่ทำอะไรทำนองนี้เพื่อที่จะได้เปลไอเดียจากพวกเขา

10 javascript  html-canvas  browser-based-games  web  webapp 

ฉันได้ยินคนพูดถึง "การเรนเดอร์สกปรก" เมื่อพูดถึงการเรนเดอร์แผนที่สำหรับ HTML5 ฉัน Googled และค้นหา GameDev เกี่ยวกับเรื่องนี้ แต่ก็มีไม่มาก มันคืออะไรกันแน่? วิธีการใช้อย่างถูกต้อง?

10 javascript  html5  html-canvas 

จากความเข้าใจของฉัน gluLookAt( eye_x, eye_y, eye_z, center_x, center_y, center_z, up_x, up_y, up_z ); เทียบเท่ากับ: glRotatef(B, 0.0, 0.0, 1.0); glRotatef(A, wx, wy, wz); glTranslatef(-eye_x, -eye_y, -eye_z); แต่เมื่อฉันพิมพ์ModelViewเมทริกซ์การเรียกเพื่อglTranslatef()ดูเหมือนจะทำงานไม่ถูกต้อง นี่คือข้อมูลโค้ด: #include <stdlib.h> #include <stdio.h> #include <GL/glut.h> #include <iomanip> #include <iostream> #include <string> using namespace std; static const int Rx = 0; static const int …

9 c++  opengl  matrix  glut  algorithm  software-engineering  cocos2d-iphone  xcode  platformer  tower-defense  animation  textures  tiles  blender  hardware  console  xna  c#  3d  directx  xna3.1  animation  cocos2d-iphone  ios  objective-c  xna  collision-detection  collision-resolution  xna  xna-4.0  touch  gestures  software-engineering  javascript  html5  html-canvas  shaders  cocos2d-iphone  opengl-es2  masking  animation  android  opengl-es  opengl-es2  culling  frustum  python  pygame  rts 

มีวิธีง่ายๆในการใช้การเคลื่อนไหวฟรีในเกม isometric แบบอิงไทล์หรือไม่? หมายความว่าผู้เล่นจะไม่เพียงกระโดดจากไทล์หนึ่งไปอีกอันหนึ่งทันทีหรือไม่ใช่ "snapped" ไปยังกริด (ตัวอย่างเช่นหากการเคลื่อนไหวระหว่างไทล์เป็นภาพเคลื่อนไหว แต่คุณถูกล็อคไม่ให้ทำอะไรก่อนที่ภาพเคลื่อนไหวจะเสร็จสิ้น) ฉันเป็นมือใหม่จริงๆกับทุกอย่างที่เกี่ยวข้องกับการเขียนโปรแกรมเกม แต่ด้วยความช่วยเหลือของเว็บไซต์นี้และแหล่งข้อมูลอื่น ๆ มันค่อนข้างง่ายที่จะทำสิ่งพื้นฐาน แต่ฉันไม่สามารถหาแหล่งข้อมูลที่เป็นประโยชน์สำหรับปัญหานี้โดยเฉพาะ . ขณะนี้ฉันได้แก้ไขบางสิ่งที่ใกล้เคียงกับสิ่งนี้: http://jsfiddle.net/KwW5b/4/ (การเคลื่อนไหว WASD) แนวคิดสำหรับการเคลื่อนไหวคือการใช้แผนที่ของเมาส์เพื่อตรวจจับเมื่อผู้เล่นย้ายไปที่ไทล์อื่นแล้วพลิกออฟเซ็ตและส่วนใหญ่ทำงานอย่างถูกต้อง (แต่ละมุมทำให้ผู้เล่นย้ายไปยังตำแหน่งที่ไม่ถูกต้อง: ดูhttp: //www.youtube.com/watch?v=0xr15IaOhrIซึ่งอาจเป็นเพราะฉันไม่สามารถทำงานแผนที่เมาส์เต็มอย่างถูกต้อง) แต่ฉันไม่มีภาพลวงตาว่าอยู่ใกล้กับวิธีแก้ปัญหาที่ดี / มีสติ และอย่างไรก็ตามมันเป็นเพียงการแสดงให้เห็นถึงสิ่งที่ฉันต้องการนำไปใช้

9 html5  movement  isometric  html-canvas 

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

9 2d  html5  html-canvas