Hot answers tagged

30

Just putting all the files into a .zip file isn't a viable solution because most web-applications need a web-server so that they can access resources via HTTP-requests. On some systems you can access files via the file:// URI-scheme, but that's not guaranteed to work everywhere because of security-reasons and will fail for things such as AJAX requests. It ...


21

You can embed images in the HTML document using the dataurl-syntax which allows to put the base64 representation of the binary image data as the src-attribute of an image. This also works on any other kind of media file. <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEgAACxIB0t1+/...


15

Phaser has support for two types of sprite sheet: "classic" ones, where every frame is the exact same size, and "texture atlases" which are created with the help of a third party app like Texture Packer, Shoebox or Flash CC and come with an associated json file. You load the "classic" ones with game.load.spritesheet where you must specify the width and ...


14

Yes. There are many ways to wrap an HTML5 game for distribution on iOS. Solutions include CocoonJS, Game Closure, PhoneGap, and Ejecta. Examples of HTML5 games on iOS include Onslaught! on iPad and Biolab Disaster on iPhone.


14

Web browsers disable some Javascript features for security reasons. My bet is that you just hit Google Chrome forbidding XMLHttpRequest on local files by default (see this answer on SO for how to disable that, but beware: this is dangerous). See this page on the Chrome dev site for details. This is why you have to setup a local HTTP server to workaround ...


11

Using transparency (alpha channel) is the way to go, I recommend. This means that when you want a vertical object on the tile like this: Then you can do it easily if your renderer draws the tiles back-to-front i.e. painters algorithm. IMAGE CREDIT: Reiner's tileset.


11

1) Lack of knowledge. Developing for Canvas might be well beyond some web developers who are very accustomed to manipulating DOM. 2) Lack of a scene graph. The DOM is (in game engine terms) a scene graph, permitting strong querying and manipulation of DOM nodes. Writing a game using Canvas requires the developer to "reinvent" that part of the wheel. 3) ...


11

Quadtrees typically store and retrieve rectangles. A point is a specific case where width and height are zero. The following logic is used to find home for new rectangles in the tree, starting with the root node: void Store(Rectangle rect) { if(I have children nodes) { bool storedInChild = false; foreach(Node childNode in nodes) ...


10

Regarding the coordinate system: In order to address individual tiles, you will need some kind of origin (a 0:0 point). In order to allow the playing field to expand in every direction, you will also need negative values. This will give you a world which stretches from -2.147.483.647 to 2.147.483.647 in both directions, which is "large enough" to seem ...


10

I think you're making a mistake thinking of a framework as a crutch. Surely when you want to build your own computer, you don't make all your own circuit boards? Mine and smelt the copper yourself? Frameworks are not crutches. They're tools that make your job much easier. If you truly want to want to get into game development, you'll want to use frameworks....


10

It’s important to note that changing the co-ordinate system with rotate and translate do not affect anything that’s currently drawn into the canvas. It only affects subsequent drawing actions. var TO_RADIANS = Math.PI/180; function drawRotatedImage(image, x, y, angle) { // save the current co-ordinate system // before we screw with it ...


9

While the method described by sws and MarkR is also what I prefer, I would like to present an alternative approach. A hackish option for creating an isometric look with minimal effort is to actually use orthogonal tiles, and use context.transform to set a projection matrix which makes the map look isometric (or a combination of context.rotate and context....


9

Regardless of the level of details and the number of pixels you have, you must start with a thorough understanding on how walking works. If your character looks like shaking its legs, it probably because, that's all you drew : shaking its legs. Just search "Walk cycle" with google image and you'll find plenty of examples. Here is a little example of what ...


8

Renderer apart, consider reading the following articles to understand how older systems implemented optimal tile-based map traversal: Tile-Based Games FAQ version 1.2, and Tile Graphics Techniques 1.0 They're indispensable guides for implementing tile based games on systems which may have limited resources. In terms of today's technology, HTML5-based ...


8

Do I send a command to move right every frame? Sure. Why not? As long as the player is moving right, of course. If that's spamming the server too much, you could of course just send the command to move right and the command to stop moving right, but you're risking some troubling behavior if you miss the "stop moving" command. You could compromise between ...


8

Getting the raw pixel data You can get the raw pixel data with the function context.getImageData(x, y, width, height). The return value is an ImageData structure. This structure will have a field data which is an UInt8ClampedArray where each pixel is represented by four values between 0 and 255 (red, green, blue, alpha). Converting an image to greyscale ...


7

I've been targeting node-webkit for my html5/js game. Most of my code runs browser-side, so the node.js aspects are mostly because its simple enough to have it run a small server and send down the html/js code to the embedded browser. A good demo of a fast-paced game is, "A Wizard's Lizard". They talk about their success on reddit, and they apparently use ...


7

Here's how I would suggest handling it: First, have your Player class store a variable, jumpForce, which is a 2D-vector similar to velocity and gravity. Now, also have a constant, initialJumpForce, which is the immediate force that will be exerted on your player when the jump key is first pressed. When the jump key is pressed, and the player is grounded (...


7

Generally, this advice is given not because of abstraction or code cleanliness but rather because gameplay logic that is sensitive must be simulated by an authorative server to prevent cheating and hacking. Long story short: If you don't particularly care about players hacking their score - don't bother. If your game is multiplayer, then you should looking ...


7

This page contains an excellent list of optimizations that can be made to canvas. In the section labeled "Use multiple layered canvases for complex scenes" it describes why having multiple canvas objects is actually better in many cases because you don't have to redraw large expensive objects (background images) as frequently as smaller, fast moving ones (...


7

For a Chrome-based solution to make the game run offline and enjoy some native functionality, you can consider making a Chrome App. This way, you can distribute it in Chrome Web Store for added visibility, you can enjoy some powerful APIs, and make it look more like a standalone app. The downside is, of course, requiring Chrome.


7

tl;dr You control how much data you are willing to process each frame. If a packet is too big, break it into smaller cells and process them one at a time (i.e one each frame). If you get a lot of small packets than split the group into chunks and limit the amount of information processing that is done each frame. The client does not need all the information; ...


7

var sprite = game.add.sprite(x, y, 'spritesheet_name'); sprite.frame = 0; Spritesheets aren't limited to animations, that's just one way to use them. An animation is just a way to display different frames at different times. By manually setting the frame of a sprite, you can display a specific part of the spritesheet.


7

As you have found out, the W3C Vibration API is not supported in the iOS Safari browser (as reported here: https://caniuse.com/#feat=vibration). However, you've pointed out that you plan to package your app for the iOS App Store. To do this, you'll need to package your "web game" into an appropriate native container for installation on the phone. You could ...


7

There is a good reason for this precaution: Users usually don't expect audio from websites. They get really angry when they load a website, and an audio advertisement blares at them at full volume. This is even worse if they opened multiple tabs and are not sure which one is responsible. That's why all browser vendors prevent websites from playing audio ...


6

Model the playing field as a hexagon grid. Each bubble is actually a hexagon shape for its connections: Each flat side is where a bubble can connect. When a bubble touches another bubble, snap the bubble in motion to the nearest hexagon grid location. Finding the nearest is essentially a picking operation, so the math for finding where the bubble will ...


6

As far as 1) you'll need to use a toggle state. Fire ONLY if the user did not click the previous tick, and is registered as clicking this tick. This can be thought of as the rising edge of the click state. here should the fire logic be called ^ clicked ___ not clicked ___| For 2) it seems that your update() ...


6

1- Unfortunately no, the WebGL standard references the GLSL ES 1.0 standard, which only has square matrices (section 4.1.6). 2- A mat3x4 holds 12 floats, so you may need to pass the information as a mat4 to the shader anyway (mat3 only holds 9). In that case you will need to use 4×4 matrices in the client code, too, and fill the last column with the values [...


6

Several points: You should definitely enable error reporting and error logging into a file on the PHP side, otherwise you'll have no evidence of problems. AJAX errors usually cause little visible error to the user. You should check for errors on the Javascript side too PHP error handling is famous for being both bad (e.g. the default action for most ...


Only top voted, non community-wiki answers of a minimum length are eligible