Questions tagged [html-canvas]
A new feature of HTML5, allowing Javascript apps to have a drawing surface in the browser.
394
questions
47
votes
7
answers
6k
views
Managing text-maps in a 2D array on to be painted on HTML5 Canvas
So, I'm making a HTML5 RPG just for fun. The map is a <canvas> (512px width, 352px height | 16 tiles across, 11 tiles top to bottom). I want to know if there'...
- 477
43
votes
5
answers
11k
views
Should actors in a game be responsible for drawing themselves?
I am very new to game development, but not to programming.
I am (again) playing around with a Pong type game using JavaScript's canvas element.
I have created a <...
- 763
23
votes
2
answers
1k
views
My game is just about finished! What do I do now? [closed]
I have an HTML5/canvas game just about finished and ready to launch. It's a 2d game in which you explore and disrupt a procedurally-generated landscape, crafting items and structures to survive. I ...
- 410
23
votes
7
answers
16k
views
HTML5 Game (Canvas) - UI Techniques?
I'm in the process of building a JavaScript / HTML5 game (using Canvas) for mobile (Android / iPhone/ WebOS) with PhoneGap. I'm currently trying to design out how the UI and playing board should be ...
- 487
23
votes
3
answers
9k
views
Double buffering on HTML5 Canvas game?
My simple canvas game seems to work fine on Chrome and FF on Mac/Linux. I haven't had chance to test it on smart phones or Windows environments yet. It doesn't use double buffering but I have seen ...
- 1,743
20
votes
6
answers
9k
views
Are there any alternative JS ports of Box2D?
I have been thinking about creating a top down 2D car game for HTML5. For my first game I wrote the physics and collisions my self but for this one I would like to use some ready made library.
I ...
- 1,743
17
votes
7
answers
18k
views
To canvas, or not to canvas, when building browser-based games?
Background: I have extensive development background, but the last time I coded a game was many years ago. My Javascript skills are quite limited, and I intend to improve them by building a simple game ...
- 271
15
votes
2
answers
22k
views
Is using multiple canvas objects a good practice?
We're developing a jump and run game with HTML5 and JavaScript and have to build an own game framework for this. Here we have some difficulties and would like to ask you for some advice:
We have a "...
- 159
14
votes
3
answers
4k
views
How should I handling clipping vertices that are closer to the eye than the near clip plane?
I'm rolling my own 3D engine, in JavaScript, and using only canvas drawing, no WebGL. This is another Minecraft clone; I love boxes, don't judge me.
So far, everything works wonderfully, except for ...
- 243
13
votes
1
answer
15k
views
Multiplayer HTML5, Node.js, Socket.IO [closed]
I trying create simple Multi-player with HTML5 Canvas, JavaScript(too using John Resig simple Inheritance library) and Node.js with Socket.IO.
My client code:
var canvas = document.getElementById('...
- 131
12
votes
6
answers
9k
views
Poor performance in android when running APK, runs fine in browser
I have created a small game project in HTML5 using Phaser engine (tried both 1.1.5 and 1.1.6). Then to port it to mobile platform, used Phonegap/Cordova for Windows Phone 8, Android and iOS.
In my ...
- 137
10
votes
2
answers
763
views
Dirty 2D map rendering
I keep hearing people talk about "dirty rendering" when it comes to map rendering for HTML5. I've Googled and searched the GameDev about it but there isn't much about it.
What exactly is it?
How to ...
- 338
10
votes
5
answers
6k
views
Good technological solutions to build an ascii map and moving characters in a browser (like dwarf fortress)? [closed]
I'd like to build a webapp for my game website that involves using text characters to represent animals and people, and have them move around on map squares with independent (server driven) AI.
So ...
- 1,188
10
votes
3
answers
32k
views
How to rotate an image on an HTML5 canvas, without rotating the whole canvas?
I want to rotate single sprites on the canvas without rotating the whole canvas.
I also don't want to create a new canvas for each object I have.
Also, it would be interesting to know which solution ...
- 201
10
votes
0
answers
991
views
How to create 2D shadows [duplicate]
I'd like to create lights and shadows in a 2D environment, like in the image below:
I did several searches but got no results. Do you have any hint?
- 201
9
votes
5
answers
42k
views
Huge performance difference when using drawImage with IMG vs CANVAS
I put together a couple of simple tests that render an image to a canvas. One renders from an IMG, while the other renders from an offscreen CANVAS. You can see the code and results here: http://...
- 641
9
votes
1
answer
4k
views
Set sprite to face direction of mouse
I'm building a html5 canvas game and I need a way to get my sprite to face the mouse cursor. I have the X and Y co-ordinates for the sprite, and also the X and Y co-ordinates of the pointer. All I'm ...
- 105
9
votes
2
answers
9k
views
Free movement in a tile-based isometric game
Is there a reasonable easy way to implement free movement in a tile-based isometric game? Meaning that the player wouldn't just instantly jump from one tile to another or not be "snapped" to the grid (...
- 93
9
votes
2
answers
4k
views
How to efficiently store and display a tile map on the web?
About
These are actually two questions in one. First of all I am looking for a way to efficiently store large amounts of tile data. The other aspect deals with querying the data set and displaying ...
- 193
8
votes
5
answers
9k
views
What would be a good way to implement/render a 2D tiled map for a browser game?
I coded a a little RPG in ruby and I used an array to contain the map squares. The elements of the array (which defines the X coordinates) are arrays themselves whose elements defines the Y coordinate,...
- 209
8
votes
5
answers
751
views
What implications does JIT (javascript/canvas) vs. AOT (Flash) have in terms of browser based game performance?
In my experience, even till this day, I still see more of a visual lag in entity movement / animation in JavaScript (Canvas) based games than I do in Flash based games.
Why is this - what exactly is ...
- 193
7
votes
2
answers
8k
views
Calculating the angular direction from velocity
I'm trying to calculate the angular direction of a projectile, knowing it's X and Y velocity I can find the magnitude of its movement, but I'm having a hard time wrapping my mind around getting the ...
- 173
7
votes
1
answer
4k
views
Completely Pixelated Font in JavaScript Canvas?
I'm making a game with a canvas scaled up such that each pixel is pretty big. I want to display some pixelated text without anti-aliasing but I have idea how I would accomplish this.
Is there I way ...
7
votes
1
answer
4k
views
Jump handling and gravity
I'm new to game development and am looking for some help on improving my jump handling for a simple side scrolling game I've made. I would like to make the jump last longer if the key is held down ...
- 173
7
votes
1
answer
6k
views
Canvas animation drops to 30fps every 3-4 seconds
Ok! I solved the problem.
Chapter One - Multiple Canvases
I started to make pong utilizing requestAnimationFrame and I noticed that the ball was stuttering and slowing down every 3-4 seconds. So I ...
- 173
7
votes
1
answer
3k
views
HTML5 Canvas Converting between cartesian and isometric coordinates
I'm having issues wrapping my head around the Cartesian to Isometric coordinate conversion in HTML5 canvas. As I understand it, the process is two fold:
(1) Scale down the y-axis by 0.5, i.e. ctx....
- 71
7
votes
2
answers
2k
views
Shadows in html5 canvas game
I'd like to ask for reference. I met an article about how to cast shadows in games. I'm using html5 canvas (currently without webgl) with javascript for my projects.
The article mentioned above is ...
- 71
7
votes
2
answers
1k
views
How to scroll hex tiles?
I don't seem to be able to find an answer to this one. I have a map of hex tiles. I wish to implement scrolling.
Code at present:
...
- 861
6
votes
4
answers
3k
views
Defining the track in a 2D racing game
I am designing a top-down racing game using canvas (html5) which takes a lot of inspiration from Micro Machines. In MM, cars can move off the track, but they are reset/destroyed if they go too far.
...
- 50
6
votes
1
answer
5k
views
What's the difference between Canvas and WebGL?
I'm thinking about using CAAT as a part of a HTML5 game engine. One of it's features is the ability to render to Canvas and WebGL without changing anything in the client code. That is a good thing, ...
- 191
6
votes
3
answers
4k
views
Basic isometric projection in Javascript
I've been working on porting an old closed source game to Javascript with Canvas and I've come to a slight problem.
Right now, to display the land, I just have a pretty basic loop that just draws the ...
- 113
6
votes
3
answers
2k
views
HTML5 game programming style [closed]
I am currently trying learn javascript in form of HTML5 games. Stuff that I've done so far isn't too fancy since I'm still a beginner. My biggest concern so far has been that I don't really know what ...
- 243
6
votes
2
answers
2k
views
android multitouch problem
Im aware that there a a couple of posts on this matter, but Ive tried all of them and none of them gets rid of my problem.
Im starting to get close to the end of my game so I bought a cabel to try it ...
- 1,903
6
votes
1
answer
12k
views
How do I make magenta in my PNG transparent in HTML5/Canvas/JS?
I'm putting together a simple hex map to use within an HTML5 / Canvas / JS game and before I get round to sorting any custom graphics, I was wondering if anybody knew how to make the pink/magenta ...
- 861
6
votes
4
answers
9k
views
2D Collision in Canvas - Balls Overlapping When Velocity is High
I am doing a simple experiment in canvas using Javascript in which some balls will be thrown on the screen with some initial velocity and then they will bounce on colliding with each other or with the ...
- 201
6
votes
1
answer
15k
views
HTML5 - Dynamic canvas grid for scrolling a big map
I've been working on different scrolling algorithms for my JS-based game. My main problem is that I need to draw a huge map and also have it scroll smoothly. I've made a few attempts and while they're ...
- 201
6
votes
2
answers
5k
views
HTML5 game fps render lag
I am currently creating a flappyBird-like HTML5 game using Proccessing.js
You can see current work here: http://files.tips4design.com/flappySlothRelease/
The problem is that even though the FPS is ...
- 187
6
votes
2
answers
32k
views
How to update off screen bitmap in a surfaceview thread
I have a Surfaceview thread and an off canvas texture bitmap that is being generated (changed), first row (line), every frame and then copied one position (line) down on regular surfaceview bitmap to ...
- 161
6
votes
4
answers
2k
views
Rotating sprite around another sprite
I am building a pool game, and I want to make the cue rotate around the white ball.
Here is the live code:
http://199.26.84.223/nocol.html
Here is the code for the white ball:
...
- 145
6
votes
3
answers
6k
views
Procedurally Generated Top View 2D RPG Map Generation
Procedural generation is a fascinating concept and is gaining popularity in the gaming industry. The thought of playing a game that has new content every-time the game is played is very exciting to ...
- 249
5
votes
1
answer
1k
views
Roguelike 2D Collision Detection
I'm just a normal guy trying to do some basic collision detection but I suck at it. I either get stuck in a wall or I go in reverse in the wrong direction trying to update the player position to a non ...
- 249
5
votes
4
answers
4k
views
Making a startscreen for an HTML5 game?
How would I make a start screen for a game using HTML5 canvas?
I'm not looking for something advanced, just the new game button and highscore link etc. The question might be stupid, but I've never ...
- 1,086
5
votes
1
answer
1k
views
How can I create 2D, sprite-based reflections in HTML5 Canvas?
I'm trying to create simple reflections in a 2D, sprite-based game using HTML5. I'm looking to recreate an effect like the one you'd often see in GBA games, such as Pokemon Emerald and Mother 3:
...
- 53
5
votes
1
answer
615
views
Fixed Time Step Flutter
I've seen a lot of questions about this problem, but really no solution. Hopefully I can explain the issue well enough that I can get some sort of closure on this problem.
I'm using a Fixed Time ...
- 180
5
votes
1
answer
283
views
Updating code to include states
The Problem
I am having a problem in that I am finding it hard to understand how to update my current code so that it uses states. I am creating a game, the game has a menu, each page in the game ...
- 151
5
votes
2
answers
540
views
Create.js CPU High load
I'm new in Create.js and I'm trying to make countdown progress bar.
I have this simple code:
...
- 151
5
votes
3
answers
977
views
How to do a genetic algorithm's chromosome which controls movements
First I would like to inform you that I'm french and 15 so my english is not very good.
I've read some articles about genetic algorithms (GA) and since I discovered the HTML5's canvas element, I can ...
- 53
5
votes
2
answers
3k
views
Javascript Canvas Drawing Efficiency
I have just recently started some experiments with game development in Javascript/HTML5, and so far it has been going pretty well. I have a simple test scene running with some basic input handling, ...
- 191
5
votes
1
answer
6k
views
How do I implement side scrolling in a javascript platformer?
I'm building a side scrolling platformer with Javascript and the canvas element for a school project. I have the character all sorted out. He runs left and right, and has a different sprite set for ...
- 115
4
votes
3
answers
2k
views
Chrome Angry Birds engine? [closed]
Was Chrome AngryBirds game made using html5 canvas? And if yes: what kind of engine did they use?
- 388