1655968084
In today's video I'll show you how easy it is to draw text on the HTML5 canvas using JavaScript. We take a look at filling text, outlined text and centering text.
For your reference, check this out:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text
The canvas element (new to HTML5) is used to draw 2D graphics into an HTML document. Using Javascript you can draw a wide range of objects into an HTML canvas such as lines, text, images and shapes using several built in functions. Drawing text on an HTML5 canvas is a useful ability that you can use to add extra information to any data, images or shapes you have previously drawn on your canvas.
To use Javascript to interact with an HTML canvas, you will first need to add the canvas element into your HTML document like so:
<canvas id="testCanvas" width="200" height="200">
</canvas>
In this example we give the canvas a fixed width and height to make it easier to keep track of co-ordinates. This canvas will be used throughout the tutorial.
Once the canvas element has been added to your HTML document, you must then acquire a context object from it by retrieving the canvas element and calling the getContext("2d") method.
var canvas = document.getElementById("testCanvas");
var context = canvas.getContext("2d");
With the context object you can call certain functions that will allow you to draw objects to the canvas.
Once the 2D context object has been acquired you can start drawing text onto your HTML canvas. Drawing text can either be done using the fillText() method or the strokeText() method of the context object.
Both the fillText() and strokeText() methods take 4 arguments (of which 3 are required):
The main difference between the two methods is that strokeText() will only draw the outlines for each letter whereas fillText() will also fill the inside of the text.
Drawing text using the fillText() method:
var canvas = document.getElementById( "testCanvas" );
var context = canvas.getContext( "2d" );
// change font and font-size for better visibilty
context.font = "30px Impact";
// draw "Test text" at X = 10 and Y = 30
context.fillText( "Test text", 10, 30 );
The text drawn to the canvas will look like this:
Drawing text using the strokeText() method:
var canvas = document.getElementById( "testCanvas" );
var context = canvas.getContext( "2d" );
// change font and font-size for better visibilty
context.font = "30px Impact";
// draw "Test text" at X = 10 and Y = 30
context.strokeText( "Test text", 10, 30 );
The text drawn to the canvas will look like this:
There are several properties of the 2D context object that you can use to change the appearance and style of the text you draw to your canvas.
Changing the font and font-size :
To change the font and font-size you can make use of the font property of the context object, simply provide a font-size in pixels and the name of the font you want to use such as Verdana.
var canvas = document.getElementById( "testCanvas" );
var context = canvas.getContext( "2d" );
// change font and font-size for better visibilty
context.font = "40px Verdana";
// draw "Test text" at X = 10 and Y = 30
context.fillText( "Test text", 10, 30 );
The text drawn to the canvas will look like this:
Changing the font color: The fillStyle property of the context object can be used to change the color of the text (it can also add a gradient or pattern). To change the color using this property, simply give a valid HTML color as a value.
var canvas = document.getElementById( "testCanvas" );
var context = canvas.getContext( "2d" );
// change font and font-size for better visibilty
context.font = "30px Impact";
// change font color
context.fillStyle = "red";
// draw "Test text" at X = 10 and Y = 30
context.strokeText( "Test text", 10, 30 );
The text drawn to the canvas will look like this:
Changing the alignment of your text: By using the textAlign property of the context object, you can change the alignment of your text relative to the given X position given for fillText() or strokeText(). There are several values from which you can choose:
As an example, let's create a canvas with text using each of these values and the same X point.
var canvas = document.getElementById( "testCanvas" );
var context = canvas.getContext( "2d" );
// change font and font-size for better visibilty
context.font = "30px Arial";
// draw each string with same X value but different alignment
context.textAlign = "start";
context.fillText( "start", 80, 30 );
context.textAlign = "end";
context.fillText( "end", 80, 60 );
context.textAlign = "left";
context.fillText( "left", 80, 90 );
context.textAlign = "right";
context.fillText( "right", 80, 120 );
context.textAlign = "center";
context.fillText( "center", 80, 150 );
The text drawn to the canvas will look like this:
#html #html5 #javascript
1655627948
In this tutorial, we cover cover how to create a new HTML element dynamically in JavaScript using document.createElement(), and set attributes for the new element using element.setAttribute(), such as ID and class.
#javascript #javascript_tutorial #tutorial #webdevelopment #webdev #frontend #frontenddeveloper #programming #html5
🔔 Subscribe for more tutorials just like this one: http://www.youtube.com/channel/UC26_rFZReLXNu8bULVARUXg?sub_confirmation=1
🔗 Visit our website: https://openjavascript.info/
https://youtu.be/UA4cMMyqoaM
1654256280
go-canvas
go-canvas is a pure go+webassembly Library for efficiently drawing on a html5 canvas
element within the browser from go without requiring calls back to JS to utilise canvas drawing functions.
The library provides the following features:
requestAnimationFrame
callback from the browser.go-canvas takes an alternate approach to the current common methods for using canvas, allowing all drawing primitives to be done totally with go code, without calling JS.
In a standard WASM application for canvas, the go code must create a function that responds to requestAnimationFrame
callbacks and renders the frame within that call. It interacts with the canvas drawing primitives via the syscall/js functions and context switches. i.e.
laserCtx.Call("beginPath")
laserCtx.Call("arc", gs.laserX, gs.laserY, gs.laserSize, 0, math.Pi*2, false)
laserCtx.Call("fill")
laserCtx.Call("closePath")
Downsides of this approach (for me at least), are messy JS calls which can't easily be checked at compile time, forcing a full redraw every frame, even if nothing changed on that canvas, or changes being much slower than the requested frame rate.
go-canvas allows all drawing to be done natively using Go by creating an entirely separate image buffer which is drawn to using a 2D drawing library. I'm currently using one from https://github.com/llgcode/draw2d which provides most of the standard canvas primitives and more. This shadow Image buffer can be updated at whatever rate the developer deems appropriate, which may very well be slower than the browsers animation rate.
This shadow Image buffer is then copied over to the browser canvas buffer during each requestAnimationFrame
callback, at whatever rate the browser requests. The handling of the callback and copy is done automatically within the library.
Secondly, this also allows the option of drawing to the image buffer, outside of the requestAnimationFrame
callback if required. After some testing it appears that it is still best to do the drawing within the requestAnimationFrame
callback.
go-canvas provides several options to control all this, and take care of the browser/dom interactions
requestAnimationFrame
callback does nothing, just returns immediately, saving CPU cycles. (No point to copy buffers and redraw if nothing has changed) This allows the drawing to be adaptive to the rate of data changes.requestAnimationFrame
callback to only do redraws or image buffer copies to this max rate. Note it MAY be slower depending on the Render time, and the requirements of the browser doing other work. When a tab is hidden, the browser regularly reduces and may even stop call to the animation callback. No critical timing should be done in the render/draw routings.requestAnimationFrame
call.Drawing therefore, is pure go. i.e.
func Render(gc *draw2dimg.GraphicContext) bool {
// {some movement code removed for clarity, see the demo code for full function}
// draws red 🔴 laser
gc.SetFillColor(color.RGBA{0xff, 0x00, 0x00, 0xff})
gc.SetStrokeColor(color.RGBA{0xff, 0x00, 0x00, 0xff})
gc.BeginPath()
gc.ArcTo(gs.laserX, gs.laserY, gs.laserSize, gs.laserSize, 0, math.Pi*2)
gc.FillStroke()
gc.Close()
return true // Yes, we drew something, copy it over to the browser
If you do want to render outside the animation loop, a simple way to cause the code to draw the frame on schedule, independent from the browsers callbacks, is to use time.Tick
. An example is in the demo app below.
If however your image is only updated from user input or some network activity, then it would be straightforward to fire the redraw only when required from these inputs. This can be controlled within the Render function, by just returning FALSE at the start. Nothing is draw, nor copied (saving CPU time) and the previous frames data remains.
There is currently a likely race condition for long draw functions, where the requestAnimationFrame may get a partially completed image buffer. This is more likely the longer the user render operation takes. Currently think how best to handle this, ideally without locks. Turns out this is not an issue, due to the single threaded nature. Eventually if drawing is in a separate thread, this will have to be handled.
Demo
A simple demo can be found in: ./demo directory. This is a shameless rewrite of the 'Moving red Laser' demo by Martin Olsansky https://medium.freecodecamp.org/webassembly-with-golang-is-fun-b243c0e34f02
Compile with GOOS=js GOARCH=wasm go build -o main.wasm
Includes a Caddy configuration file to support WASM, so will serve by just running 'caddy' in the demo directory and opening browser to http://localhost:8080
Live Demo available at: https://markfarnan.github.io/go-canvas
Future
This library was written after a weekend of investigation and posted on request for the folks on #webassembly on Gophers Slack.
I intend to extend it further, time permitting, into fully fledged support package for all things go-canvas-wasm related, using this image frame method.
Several of the ideas I'm considering are:
Others ? Feedback, suggestions etc. welcome. I can be found on Gophers Slack, #Webassembly channel.
Mark Farnan, February 2020
Author: Markfarnan
Source Code: https://github.com/markfarnan/go-canvas
License: Apache-2.0 license
1654238940
voxel-engine
example
var createGame = require('voxel-engine')
var game = createGame()
game.appendTo(document.body)
voxel-engine is an OPEN Open Source Project. This means that:
Individuals making significant and valuable contributions are given commit-access to the project to contribute as they see fit. This project is more like an open wiki than a standard guarded open source project.
See the CONTRIBUTING.md file for more details.
multiplex is only possible due to the excellent work of the following contributors:
Max Ogden | GitHub/maxogden | Twitter/@maxogden |
---|---|---|
Kumavis | GitHub/kumavis | |
Deathcap | GitHub/deathcap |
API
Returns a new game instance. options
defaults to:
{
texturePath: './textures/',
generate: function(x,y,z) {
return x*x+y*y+z*z <= 15*15 ? 1 : 0 // sphere world
},
materials: [['grass', 'dirt', 'grass_dirt'], 'brick', 'dirt'],
materialFlatColor: false,
chunkSize: 32,
chunkDistance: 2,
worldOrigin: [0, 0, 0],
controls: { discreteFire: false },
lightsDisabled: false,
fogDisabled: false,
generateChunks: true,
mesher: voxel.meshers.culled,
playerHeight: 1.62
}
Default 'player size' is a 1/2 block long/wide and 1.5 blocks high:
game.playerAABB().width() // => 12.5
game.playerAABB().height() // => 37.5
See implementation of Game.prototype.playerAABB
for more details.
x
, z
: horizontal planey
: vertical planeWe try to always use arrays to represent vectors (aka positions)
[x, y, z]
Sometimes you may also see objects used, e.g. {x: 0, y: 0, z: 0}
, this is because three.js uses objects for vectors.
Worlds have many chunks and chunks have many voxels. Chunks are cube shaped and are chunkSize
x/y/z (default 32/32/32 - 32768 voxels per chunk). When the game starts it takes the worldOrigin
and generates chunkDistance
chunks in every x/y/z dimension (chunkDistance
default of 2 means the game will render 2 chunks behind you, 2 in front etc for a total of 16 chunks.).
There is one major coordinate system in voxel.js: "game coordinates" (aka world coordinates)
worldOrigin
34 voxels over, 50 down and 302 forwardThere are also some other less used coordinate systems that you should be aware of:
When you create a game you can also pass functions that the game will ask for voxel data. Here is an example generate
function that makes a randomly textured cube world with a diameter of 20 voxels:
function generator(x, y, z) {
if (x*x + y*y + z*z > 20*20) return 0
return Math.floor(Math.random() * 4) + 1
}
The generate
function will be called once for each voxel in the world. x
, y
and z
will be values in game coordinates.
Flat world is a nicer way to start (at least you can't fall off the edge). This places the player just above the ground.
var game = createGame({
generate: function(x, y, z) {
return y === 1 ? 1 : 0
}
})
game.controls.target().avatar.position()
This returns a THREE.js Vector3 object (which just means an object with 'x', 'y', and 'z').
game.setBlock(pos, 0) // off
game.setBlock(pos, 1) // on
game.setBlock(pos, 2) // on, with another material
gameInstance.voxels.chunkAtPosition(position)
gameInstance.voxels.voxelVector(position)
Intended for use in first player contexts as it checks if a player is standing in the way of the new voxel. If you don't care about that then just use setBlock
:
gameInstance.createBlock(pos, val)
val
can be 0 or you can also use any single digit integer 0-9. These correspond to the materials array that you pass in to the game.
gameInstance.setBlock(pos, val)
gameInstance.getBlock(pos)
If you wanna see the lower level API for voxel data manipulation look at chunker.js
inside the voxel module.
shoots a ray and collides with voxels
gameInstance.raycastVoxels(start, position, distance)
if you just type gameInstance.raycastVoxels()
it will default to using the current main camera position and direction, and default distance of 10, and epsilon of 1e-8
you will get back an object with the precise position, voxel position, direction, face normal and voxel value of the voxel that you intersected, or false
if there was no collision
first do a .raycastVoxels()
then do gameInstance.createAdjacent(raycastResults, materialIndex)
There are a number of events you can listen to once you've instantiated a game. we use the node.js event emitter library which uses the following syntax for subscribing:
emitter.on('eventname', function(arg1, arg2, etc) {})
game.on('mouseup', function(pos) {})
, game.on('mousedown', function(pos) {})
Captures mouse activity. pos
is the game coordinate of the intersection of the voxel that you clicked on (if any)
game.on('tick', function(delta) {})
emits every time the game renders (usually no more than 60 times a second). delta is the time in milliseconds between this render and the last render
game.on('collision', function(item) {})
Called every tick when an item is colliding with the player. Callback is passed the item that is colliding.
game.voxelRegion.on('change', function(pos) {})
emits when you move between voxels. pos has x, y, and z voxel coordinates of the voxel you just entered
emits when you move between chunks. pos has x, y, and z chunk coordinates of the chunk you just entered
game.on('renderChunk', function(chunk) {})
emits when a chunk is drawn (using the showChunk
method). chunk
is the full chunk object, which has the voxel data and a .position
and .dims
game.on('missingChunk', function(chunkPosition) {})
emits when the player moves into range of a chunk that isn't loaded yet. if your game has generateChunks
set to true it will automatically create the chunk and render it but if you are providing your own chunk generation then you can use this to hook into the game.
game.on('dirtyChunkUpdate', function(chunk) {})
emits when game updates a chunk, this is usually triggered when a chunk gets edited. if game.setBlock
were to get called 50 times on one chunk in between renders, dirtyChunkUpdate
will emit once with the chunk that gets updated
game.on('setBlock', function(pos, val, old) {})
emits whenever game.setBlock
gets called
Detects collisions between an item and other items, or voxels.
game.getCollisions(item.mesh.position, item)
This will give you back a 'collisions object' whose keys are positions on the object and values are arrays of the positions of faces that are colliding.
For example, here we have 4 faces colliding with the bottom of our object:
{
back: Array[0]
bottom: Array[4]
down: Array[1]
forward: Array[0]
left: Array[0]
middle: Array[0]
right: Array[0]
top: Array[0]
up: Array[0]
}
Loading textures onto the texture atlas.
game.materials.load(['obsidian', 'dirt'], function(textures) { })
Both of these textures will be loaded into the texture atlas and expanded creating 2 voxel block types.
You can specify hex colors to use as materials, just pass these options when creating a game:
{
materials: ["#fff", "#000", "#ff0000"],
materialFlatColor: true
}
// create a mesh and use the internal game material (texture atlas)
var mesh = new game.THREE.Mesh(
new game.THREE.CubeGeometry(1, 3, 1), // width, height, depth
game.materials.material
)
// paint the mesh with a specific texture in the atlas
game.materials.paint(mesh, 'obsidian')
// move the item to some location
mesh.position.set(0, 3, -5)
var item = game.addItem({
mesh: mesh,
size: 1,
velocity: { x: 0, y: 0, z: 0 } // initial velocity
})
// use `game.removeItem(item)` to remove
{
"voxels": [packed 1D array of voxels],
"dimensions": [2, 2, 2],
"position": [10, 10, 10]
}
this should be generated by something like this:
var length = 5, width = 5, depth = 5
var start = [10, 10, 10]
var voxels = new Int8Array(length * width * depth)
var idx = 0
for(var z = start[2]; z < depth; ++z)
for(var y = start[1]; y < height; ++y)
for(var x = start[0]; x < length; ++x, ++idx) {
voxels[idx] = getVoxelDataFor(x+start[0], y+start[1], z+start[2])
}
return {voxels: voxels, dimensions: [length, width, height], position: start}
setTimeout
and setInterval
work fine when timing things against the computer's clock but what about staying in sync with the game's clock? When the game lags, is paused or hasn't begun you probably don't want your timed operations firing.
game.setInterval(fn, duration[, args])
and game.setTimeout(fn, duration[, args])
are available and similar to the built in interval functions but stay in sync with the game's clock.
An example is we want our object to jump every 2 seconds. Normally we'd just do:
setInterval(function() {
jump()
}, 2000)
But if the game's frame rate drops or the game hasn't begun the computer will still fire the jump()
function every 2 seconds. Thus causing the object to fly way up into the air.
var clearInterval = game.setInterval(function() {
jump()
}, 2000)
// later we can stop the interval by calling clearInterval()
Will achieve the same thing although now when the game's frame rate drops the jump()
function won't be called repeatedly and the object will jump at the desired frequency.
basically https://github.com/felixge/node-style-guide#nodejs-style-guide with a couple of minor changes:
any contributions (pull requests) in any style are welcome, as long as:
if you send a pull request and you use, for example, 4 space indents it will not be rejected but please try to follow conventions when you can
Learn more at http://voxeljs.com
hello world template repo: http://github.com/maxogden/voxel-hello-world
Author: Maxogden
Source Code: https://github.com/maxogden/voxel-engine
License: BSD-3-Clause license
1654226908
Forms are one of the most important parts of the web. Without them, there wouldn't be an easy way to collect data, search for resources, or sign up to receive valuable information.
You can embed forms on websites with the HTML form
element. Inside the form element, several inputs are nested. These inputs are also known as form controls.
In this tutorial, we will explore the HTML form element, the various input types it takes, and how to create a submit button with which data is submitted.
By the end, you will know how forms work and you'll be able to make them with confidence.
<form action="mywebsite.com" method="POST">
<!--Input of any type and textareas goes in here-->
</form>
You use the <input>
tag to create various form controls in HTML. It is an inline element and takes attributes such as type
, name
, minlength
, maxlength
, placeholder
, and so on. Each of these has specific values they take.
The placeholder
attribute is important as it helps the user understand the purpose of the input field before they type anything in.
There are 20 different input types, and we will look at them one by one.
This type of input takes a value of “text”, so it creates a single line of text input.
<input type="text" placeholder="Enter name" />
An input with the type of text looks like the screenshot below:
As the name implies, an input with a type of password creates a password. It is automatically invisible to the user, unless it is manipulated by JavaScript.
<input type="password" placeholder="Enter your password" />
Any input with the type of email defines a field for entering an email address.
<input type="email" placeholder="Enter your email" />
This type of input lets the user insert numbers only.
<input type="number" placeholder="Enter a number" />
Sometimes, users will need to pick one out of numerous options. An input field with its type attributes set to “radio” lets you do this.
<input type="radio" />
So, with an input type of radio, users will be allowed to pick one out of numerous options. What if you want them to pick as many options as possible? That’s what an input with a type attribute set to checkbox
does.
<input type="checkbox" />
You use this type to add a submit button to forms. When a user clicks it, it automatically submits the form. It takes a value attribute, which defines the text that appears inside the button.
<input type="submit" value="Enter to Win" />
An input with a type set to button creates a button, which can be manipulated by JavaScript's onClick event listener type. It creates a button just like an input type of submit, but with the exception that the value is empty by default, so it has to be specified.
<input type="button" value="Submit" />
This defines a field for file submission. When a user clicks it, they are prompted to insert the desired file type, which might be an image, PDF, document file, and so on.
<input type="file" />
The result of an input type of file looks like this:
This is a fancy input type introduced by HTML5. With it, the user can submit their favourite color for example. Black (#000000) is the default value, but can be overridden by setting the value to a desired color.
Many developers have used it as a trick to get to select different color shades available in RGB, HSL and alphanumeric formats.
<input type="color" />
This is the result of an input type of color:
Input with the type of search defines a text field just like an input type of text. But this time it has the sole purpose of searching for info. It is different from type text in that, a cancel button appears once the user starts typing.
<input type="search" />
When the type attribute of an input tag is set to URL, it displays a field where users can enter a URL.
<input type="url" />
An input type of tel lets you collect telephone numbers from users.
<input type="tel" />
You might have registered on a website where you requested the date of a certain event. The site probably used an input with the type value set to date to acheive this.
<input type="date" />
This is what an input with type date looks like:
This works like the input type date, but it also lets the user pick a date with a particular time.
<input type="datetime-local" />
The input type of week lets a user select a specific week.
<input type="week" />
The input with the type of month populates months for the user to pick from when clicked.
<input type="month" />
There are times when a user will need to fill in multiple lines of text which wouldn't be suitable in an input type of text (as it specifies a one-line text field).
textarea
lets the user do this as it defines multiple lines of text input. It takes its own attributes such as cols
– for the number of columns, and rows
for the number of rows.
<textarea cols="50" rows="20"></textarea>
This is like a radio button and checkbox in one package. It is embedded in the page with two elements – a select
element and an option
, which is always nested inside select
.
By default, the user can only pick one of the options. But with multiple attributes, you can let the user select more than one of the options.
<select>
<option value="HTML">Select a Language</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="React">React</option>
</select>
Assigning labels to form controls is important. When they're properly connected to the input field through their for
attribute and the input’s id
attribute, it's easier for the user to use as they can just click the label itself to access the input.
<label for="name">Name</label>
<input type="text" id="name" /> <br />
<label for="check">Agree with terms</label>
<input type="checkbox" id="check" />
When a user fills in a form and submits it with the submit button, the data in the form controls are sent to the server through GET
or POST
HTTP request methods.
So how is the server indicated? The form element takes an action attribute, which must have its value specified to the URL of the server. It also takes a method attribute, where the HTTP method it uses to convey the values to the server is specified.
This method could be GET
or POST
. With the GET
method, the values entered by the user are visible in the URL when the data is submitted. But with POST
, the values are sent in HTTP headers, so those values are not visible in the URL.
If a method attribute is not used in the form, it is automatically assumed that the user wants to use the GET method, because it’s the default.
So when should you use the GET
or POST
method? Use the GET
method for submitting non-sensitive data or retrieving data from a server (for example, during searches). Use the POST
request when submitting files or sensitive data.
Let’s take what we’ve learned about forms and use it to make a simple contact form. I will also introduce a few new concepts as we go to round it all out.
<form action=example-server.com">
<fieldset>
<legend>Contact me</legend>
<div class="form-control">
<label for="name">Name</label>
<input type="name" id="name" placeholder="Enter your name" required />
</div>
<div class="form-control">
<label for="email">Email</label>
<input
type="email"
id="email"
placeholder="Enter your email"
required
/>
</div>
<div class="form-control">
<label for="message">Message</label>
<textarea
id="message"
cols="30"
rows="10"
placeholder="Enter your message"
required
></textarea>
</div>
<input type="submit" value="Send" class="submit-btn" />
</fieldset>
</form>
First, a form
element is wrapping every other element. It has an action set to “example-server.com”,
a dummy server where the form data will be received.
After the form element, every other element is also surrounded by a fieldset
element with a legend
tag right under it.
We use the fieldset
element to group related inputs together, and the legend
tag contains a caption conveying what the form is about.
The inputs name
, email
, and textarea
are all in a div
with a class of form-control. So they behave like a block element, in order to make styling easier with CSS.
They are also validated with the required
attribute, so the form fails to submit when those fields are empty or when the user fails to type in the values in the appropriate format.
After all that, we'll have the result in the screenshot below:
How ugly is that? We need to apply some styling!
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: cursive;
}
input,
textarea {
width: 100%;
padding: 5px;
outline: none;
}
label {
line-height: 1.9rem;
}
input[type="submit"] {
transform: translate(2.2%);
padding: 3px;
margin-top: 0.6rem;
font-family: cursive;
font-weight: bold;
}
fieldset {
padding: 20px 40px;
}
We center everything in the body horizontally with Flexbox, and vertically with a 100% viewport height. We used a font-family of cursive.
We gave the inputs and textarea
a width of 100% so they go all the way across. The labels got a minimal line-height of 1.9rem (30.4px), so they don’t stay too close to their respective inputs.
We specifically styled the button (input type button) with the transform property to push it to the center as it was off center a bit. We gave it a padding of 3px for more spacing around it. We then selected a cursive font-family for it with a weight of bold.
Because the button was too close to the textarea
, we set a margin-top of 0.6rem to push it down a little bit.
We gave our fieldset element a padding of 20px at the top and bottom, with 40px at the left and right to push apart the border it creates around the form
elements it is wrapped in.
At the end of it all, we have the beautiful form below:
I hope this tutorial has helped you understand how forms work. Now you should have the knowledge you need to integrate forms into your websites so you can start collecting data.
Thank you for reading, and keep coding.
Original article source at https://www.freecodecamp.org
#html #html5 #programming #developer #webdev
1654219543
Gumbo - A pure-C HTML5 parser.
Gumbo is an implementation of the HTML5 parsing algorithm implemented as a pure C99 library with no outside dependencies. It's designed to serve as a building block for other tools and libraries such as linters, validators, templating languages, and refactoring and analysis tools.
Goals & features:
Non-goals:
Wishlist (aka "We couldn't get these into the original release, but are hoping to add them soon"):
Installation
To build and install the library, issue the standard UNIX incantation from the root of the distribution:
$ ./autogen.sh
$ ./configure
$ make
$ sudo make install
Gumbo comes with full pkg-config support, so you can use the pkg-config to print the flags needed to link your program against it:
$ pkg-config --cflags gumbo # print compiler flags
$ pkg-config --libs gumbo # print linker flags
$ pkg-config --cflags --libs gumbo # print both
For example:
$ gcc my_program.c `pkg-config --cflags --libs gumbo`
See the pkg-config man page for more info.
There are a number of sample programs in the examples/ directory. They're built automatically by 'make', but can also be made individually with make <programname>
(eg. make clean_text
).
To run the unit tests, you'll need to have googletest downloaded and unzipped. The googletest maintainers recommend against using make install
; instead, symlink the root googletest directory to 'gtest' inside gumbo's root directory, and then make check
:
$ unzip gtest-1.6.0.zip
$ cd gumbo-*
$ ln -s ../gtest-1.6.0 gtest
$ make check
Gumbo's make check
has code to automatically configure & build gtest and then link in the library.
Debian and Fedora users can install libgtest with:
$ apt-get install libgtest-dev # Debian/Ubuntu
$ yum install gtest-devel # CentOS/Fedora
Note for Ubuntu users: libgtest-dev package only install source files. You have to make libraries yourself using cmake:
$ sudo apt-get install cmake
$ cd /usr/src/gtest
$ sudo cmake CMakeLists.txt
$ sudo make
$ sudo cp *.a /usr/lib
The configure script will detect the presence of the library and use that instead.
Note that you need to have super user privileges to execute these commands. On most distros, you can prefix the commands above with sudo
to execute them as the super user.
Debian installs usually don't have sudo
installed (Ubuntu however does.) Switch users first with su -
, then run apt-get
.
Basic Usage
Within your program, you need to include "gumbo.h" and then issue a call to gumbo_parse
:
#include "gumbo.h"
int main() {
GumboOutput* output = gumbo_parse("<h1>Hello, World!</h1>");
// Do stuff with output->root
gumbo_destroy_output(&kGumboDefaultOptions, output);
}
See the API documentation and sample programs for more details.
A note on API/ABI compatibility
We'll make a best effort to preserve API compatibility between releases. The initial release is a 0.9 (beta) release to solicit comments from early adopters, but if no major problems are found with the API, a 1.0 release will follow shortly, and the API of that should be considered stable. If changes are necessary, we follow semantic versioning.
We make no such guarantees about the ABI, and it's very likely that subsequent versions may require a recompile of client code. For this reason, we recommend NOT using Gumbo data structures throughout a program, and instead limiting them to a translation layer that picks out whatever data is needed from the parse tree and then converts that to persistent data structures more appropriate for the application. The API is structured to encourage this use, with a single delete function for the whole parse tree, and is not designed with mutation in mind.
Python usage
To install the python bindings, make sure that the C library is installed first, and then sudo python setup.py install
from the root of the distro. This installs a 'gumbo' module; pydoc gumbo
should tell you about it.
Recommended best-practice for Python usage is to use one of the adapters to an existing API (personally, I prefer BeautifulSoup) and write your program in terms of those. The raw CTypes bindings should be considered building blocks for higher-level libraries and rarely referenced directly.
External Bindings and other wrappers
The following language bindings or other tools/wrappers are maintained by various contributors in other repositories:
Author: google
Source Code: https://github.com/google/gumbo-parser
License: Apache-2.0 license
1652922000
All the links point to the new version 3 of the lib.
In case you are looking for the docs of version 2, you will have to specify the specific version in the url like this: https://www.chartjs.org/docs/2.9.4/
Instructions on building and testing Chart.js can be found in the documentation. Before submitting an issue or a pull request, please take a moment to look over the contributing guidelines first. For support, please post questions on Stack Overflow with the chartjs
tag.
Author: chartjs
Source Code: https://github.com/chartjs/Chart.js
License: MIT license
1652393280
HTML5-PHP
HTML5 is a standards-compliant HTML5 parser and writer written entirely in PHP. It is stable and used in many production websites, and has well over five million downloads.
HTML5 provides the following features.
Install HTML5-PHP using composer.
By adding the masterminds/html5
dependency to your composer.json
file:
{
"require" : {
"masterminds/html5": "^2.0"
},
}
By invoking require command via composer executable:
composer require masterminds/html5
HTML5-PHP has a high-level API and a low-level API.
Here is how you use the high-level HTML5
library API:
<?php
// Assuming you installed from Composer:
require "vendor/autoload.php";
use Masterminds\HTML5;
// An example HTML document:
$html = <<< 'HERE'
<html>
<head>
<title>TEST</title>
</head>
<body id='foo'>
<h1>Hello World</h1>
<p>This is a test of the HTML5 parser.</p>
</body>
</html>
HERE;
// Parse the document. $dom is a DOMDocument.
$html5 = new HTML5();
$dom = $html5->loadHTML($html);
// Render it as HTML5:
print $html5->saveHTML($dom);
// Or save it to a file:
$html5->save($dom, 'out.html');
The $dom
created by the parser is a full DOMDocument
object. And the save()
and saveHTML()
methods will take any DOMDocument.
It is possible to pass in an array of configuration options when loading an HTML5 document.
// An associative array of options
$options = array(
'option_name' => 'option_value',
);
// Provide the options to the constructor
$html5 = new HTML5($options);
$dom = $html5->loadHTML($html);
The following options are supported:
encode_entities
(boolean): Indicates that the serializer should aggressively encode characters as entities. Without this, it only encodes the bare minimum.disable_html_ns
(boolean): Prevents the parser from automatically assigning the HTML5 namespace to the DOM document. This is for non-namespace aware DOM tools.target_document
(\DOMDocument): A DOM document that will be used as the destination for the parsed nodes.implicit_namespaces
(array): An assoc array of namespaces that should be used by the parser. Name is tag prefix, value is NS URI.This library provides the following low-level APIs that you can use to create more customized HTML5 tools:
The unit tests exercise each piece of the API, and every public function is well-documented.
The parser is designed as follows:
Scanner
handles scanning on behalf of the parser.Tokenizer
requests data off of the scanner, parses it, clasifies it, and sends it to an EventHandler
. It is a recursive descent parser.EventHandler
receives notifications and data for each specific semantic event that occurs during tokenization.DOMBuilder
is an EventHandler
that listens for tokenizing events and builds a document tree (DOMDocument
) based on the events.The serializer takes a data structure (the DOMDocument
) and transforms it into a character representation -- an HTML5 document.
The serializer is broken into three parts:
OutputRules
contain the rules to turn DOM elements into strings. The rules are an implementation of the interface RulesInterface
allowing for different rule sets to be used.Traverser
, which is a special-purpose tree walker. It visits each node node in the tree and uses the OutputRules
to transform the node into a string.HTML5
manages the Traverser
and stores the resultant data in the correct place.The serializer (save()
, saveHTML()
) follows the section 8.9 of the HTML 5.0 spec. So tags are serialized according to these rules:
Please check the issue queue for a full list, but the following are issues known issues that are not presently on the roadmap:
:
has no special meaning. By default the parser does not support XML style namespaces via :
; to enable the XML namespaces see the XML Namespaces sectionTo use XML style namespaces you have to configure well the main HTML5
instance.
use Masterminds\HTML5;
$html = new HTML5(array(
"xmlNamespaces" => true
));
$dom = $html->loadHTML('<t:tag xmlns:t="http://www.example.com"/>');
$dom->documentElement->namespaceURI; // http://www.example.com
You can also add some default prefixes that will not require the namespace declaration, but its elements will be namespaced.
use Masterminds\HTML5;
$html = new HTML5(array(
"implicitNamespaces"=>array(
"t"=>"http://www.example.com"
)
));
$dom = $html->loadHTML('<t:tag/>');
$dom->documentElement->namespaceURI; // http://www.example.com
The dedicated (and patient) contributors of patches small and large, who have already made this library better.See the CREDITS file for a list of contributors.
We owe a huge debt of gratitude to the original authors of html5lib.
While not much of the original parser remains, we learned a lot from reading the html5lib library. And some pieces remain here. In particular, much of the UTF-8 and Unicode handling is derived from the html5lib project.
This software is released under the MIT license. The original html5lib library was also released under the MIT license.
See LICENSE.txt
Certain files contain copyright assertions by specific individuals involved with html5lib. Those have been retained where appropriate.
Author: Masterminds
Source Code: https://github.com/Masterminds/html5-php
License: View license
1652290260
【Javascriptゲームプログラミング初級】1時間で作れる!Gameの基礎・アニメーションについて学べます
●ゲームで遊んでみたい方はこちら!
https://coding-youtuber.github.io/motorcycle-game/build/index.html
● 目次
Chapter 1 Canvasを用意 01:12
Chapter 2 道のデコボコを作る 04:07
Chapter 3 アニメーションさせる 11:52
Chapter 4 プレイヤーを描画 12:40
Chapter 5 プレイヤーを動かす 16:28
Chapter 6 プレイヤーの角度を変更 21:55
Chapter 7 矢印キーで操作 25:26
Chapter 8 ゲームオーバーを管理 30:17
Chapter 9 トランプの画像に変更 32:57
●動画で使ったプログラムはこちら
https://github.com/coding-youtuber/motorcycle-game/blob/master/src/js/app.js
GitHub
https://github.com/coding-youtuber/motorcycle-game
●すぐ実行してみたい方はこちら(オンラインエディタ)
https://codepen.io/naoya_tech/pen/KKVQXRd?editors=0010
●対象となる視聴者の方
・Javascriptの基礎文法は知ってはいるが何を作ればいいのかわからない方
・実際に何か作って理解を深めたい方
・Progateが終わってから次にやることを探している方
●この動画で学べること
Javascriptでcanvasを操作する方法
loopによるアニメーション処理
noise関数を使って自然界でありそうな形状を作成
1652090107
In this video tutorial, We'll show you How to Build Particle System of Bouncing Balls using HTML5 Canvas and Javascript (P2).
1650863640
html5lib
html5lib is a pure-python library for parsing HTML. It is designed to conform to the WHATWG HTML specification, as is implemented by all major web browsers.
Simple usage follows this pattern:
import html5lib
with open("mydocument.html", "rb") as f:
document = html5lib.parse(f)
or:
import html5lib
document = html5lib.parse("<p>Hello World!")
By default, the document
will be an xml.etree
element instance. Whenever possible, html5lib chooses the accelerated ElementTree
implementation (i.e. xml.etree.cElementTree
on Python 2.x).
Two other tree types are supported: xml.dom.minidom
and lxml.etree
. To use an alternative format, specify the name of a treebuilder:
import html5lib
with open("mydocument.html", "rb") as f:
lxml_etree_document = html5lib.parse(f, treebuilder="lxml")
When using with urllib2
(Python 2), the charset from HTTP should be pass into html5lib as follows:
from contextlib import closing
from urllib2 import urlopen
import html5lib
with closing(urlopen("http://example.com/")) as f:
document = html5lib.parse(f, transport_encoding=f.info().getparam("charset"))
When using with urllib.request
(Python 3), the charset from HTTP should be pass into html5lib as follows:
from urllib.request import urlopen
import html5lib
with urlopen("http://example.com/") as f:
document = html5lib.parse(f, transport_encoding=f.info().get_content_charset())
To have more control over the parser, create a parser object explicitly. For instance, to make the parser raise exceptions on parse errors, use:
import html5lib
with open("mydocument.html", "rb") as f:
parser = html5lib.HTMLParser(strict=True)
document = parser.parse(f)
When you're instantiating parser objects explicitly, pass a treebuilder class as the tree
keyword argument to use an alternative document format:
import html5lib
parser = html5lib.HTMLParser(tree=html5lib.getTreeBuilder("dom"))
minidom_document = parser.parse("<p>Hello World!")
More documentation is available at https://html5lib.readthedocs.io/.
html5lib works on CPython 2.7+, CPython 3.5+ and PyPy. To install:
$ pip install html5lib
The goal is to support a (non-strict) superset of the versions that pip supports.
The following third-party libraries may be used for additional functionality:
lxml
is supported as a tree format (for both building and walking) under CPython (but not PyPy where it is known to cause segfaults);genshi
has a treewalker (but not builder); andchardet
can be used as a fallback when character encoding cannot be determined.Please report any bugs on the issue tracker.
Unit tests require the pytest
and mock
libraries and can be run using the py.test
command in the root directory.
Test data are contained in a separate html5lib-tests repository and included as a submodule, thus for git checkouts they must be initialized:
$ git submodule init
$ git submodule update
If you have all compatible Python implementations available on your system, you can run tests on all of them using the tox
utility, which can be found on PyPI.
There's a mailing list available for support on Google Groups, html5lib-discuss, though you may get a quicker response asking on IRC in #whatwg on irc.freenode.net.
Author: html5lib
Source Code: https://github.com/html5lib/html5lib-python
License: MIT License
1650353224
melonJS 2 is a modern version of the melonJS game engine. It has been rebuilt almost entirely using ES6 class, inheritance and semantic, and is bundled using Rollup to provide modern features such as transpiling and tree-shaking.
Note: migrating an existing project to melonJS 2 (version 10.0 and higher) will definitely break your game (ES6 semantic, no more Jay inheritance, nodeJS event emitter, and no backward compatibility with deprecated legacy APIs), and you might want to read first this small step by step guide on upgrading to melonJS 2. If you are looking at the legacy version (9.x and lower) of melonJS, you can find it here under the legacy branch.
melonJS is open-source, licensed under the MIT License, and actively developed and maintained with the help of a small team of enthusiasts at AltByte in Singapore.
melonJS is a fully featured game engine :
Compatibility
Graphics
Sound
Physic
Input
Level Editor
Assets
And Also
Tools integration and usage with melonJS is documented in our Wiki.
Basic Hello World Example
import * as me from "https://esm.run/melonjs";
me.device.onReady(function () {
// initialize the display canvas once the device/browser is ready
if (!me.video.init(1218, 562, {parent : "screen", scale : "auto"})) {
alert("Your browser does not support HTML5 canvas.");
return;
}
// add a gray background to the default Stage
me.game.world.addChild(new me.ColorLayer("background", "#202020"));
// add a font text display object
me.game.world.addChild(new me.Text(609, 281, {
font: "Arial",
size: 160,
fillStyle: "#FFFFFF",
textBaseline : "middle",
textAlign : "center",
text : "Hello World !"
}));
});
Simple hello world using melonJS 9.x or higher
Documentation :
docs
directory)For your first time using melonJS, follow these tutorials :
You may find it useful to skim the overview found at the wiki Details & Usage
When starting your own projects, checkout our es6 boilerplate
A few demos of melonJS capabilities :
More examples are available here
The latest builds with corresponding release note are available for direct download here.
Since version 10.0.0 melonJS provides different build options :
build | description |
---|---|
melonjs.module.js | the ES6 Module (ESM) Bundle |
melonjs.module.d.ts | typescript declaration file for the ES6 Module (ESM) Bundle |
melonjs.js | a ES5 UMD Bundle (directly transpiled from the ES6 version) |
melonjs.min.js | a minified version of the ES5 UMD bundle |
Alternatively, the latest version of melonJS can be installed through NPM :
$ npm install melonjs
If you need to import the ES6 module of melonjs (e.g. for Webpack):
$ import * as me from 'melonjs/dist/melonjs.module.js';
Or can simply be added to your html, using jsDeliver content delivery network (CDN) :
<!-- load the ES6 module bundle of melonJS v10.0 -->
<script src="https://esm.run/melonjs@10.0"></script>
<!-- omit the version completely to get the latest one -->
<!-- you should NOT use this in production -->
<script src="https://esm.run/melonjs"></script>
Note: starting from the 10.0.0 version, the debug plugin is no longer provided as part of the melonJS library release, and has been moved to the official boilerplate
For most users, all you probably want is to use melonJS, and all you need then is just to download the latest built release to get started. The only time you should need to build melonJS is if you want to contribute to the project and start developing on it.
To build your own version of melonJS you will need to install :
Once Node.js and NPM have been installed, you need to install build dependencies, by executing the following in the folder where you cloned the repository :
$ [sudo] npm install
Then build the melonJS source by running:
$ npm run build
The generated library will be available under the build
directory :
melonjs.js
: plain ES5 UMD bundlemelonjs.min.js
: minified ES5 UMD bundlemelonjs.module.js
: plain ES6 moduleTo run the melonJS test suite simply use the following:
$ npm run test
This will run the jasmine spec tests with the output displayed on the shell. Do note that the latest Chrome version is required, as the test unit will run the Browser in a headless mode (in case of failed tests, upgrade your browser).
Similarly, you can build your own copy of the docs locally by running :
$ npm run doc
The generated documentation will be available in the docs
directory
melonJS uses Travis-CI for automated testing and build uploads. The latest build artifacts can be downloaded from the melonjs-builds bucket.
If you need technical support, you can contact us through the following channels :
Download Details:
Author: melonjs
Source Code: https://github.com/melonjs/melonJS
License: MIT
#javascript #gamedev #webgl #html5 #gameengine #gamedevelopment #melonjs #html5 #web3 #webgl2
1650352659
Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop and mobile web browsers. Games can be compiled to iOS, Android and native apps by using 3rd party tools. You can use JavaScript or TypeScript for development.
Along with the fantastic open source community, Phaser is actively developed and maintained by Photon Storm. As a result of rapid support, and a developer friendly API, Phaser is currently one of the most starred game frameworks on GitHub.
Thousands of developers from indie and multi-national digital agencies, and universities worldwide use Phaser. Take a look at their incredible games.
After 13 beta releases, over 200 resolved issues, thousands of lines of new code and the culmination of over 6 months incredibly hard work, Phaser 3.50 was finally released in December 2020 and we're continuing with updates into 2021 with this new 3.55 release. 3.55 focuses mostly on fixing issues, but also addresses a performance issue with mixing Sprites and Graphics objects together.
It's not hyperbole or exaggeration when I say that Phaser 3.50 is the single biggest point release ever in the history of Phaser. There are quite literally hundreds of new features to explore, updates to key areas and of course bug fixes. I did actually try counting all the changes, but gave up after I'd reached 900 of them! Thankfully, they are, as always, meticulously detailed in the Change Log. The changes for 3.50 actually grew so large that I had to split them out from the main Change Log and put them into their own file.
However, don't let this overwhelm you. A massive number of the changes are purely internal and while there are absolutely some API breaking changes in this release (hence the large version number jump), we've kept them as sensible as possible. We already know of lots of devs who have upgraded with minimal, or no, changes to their actual game code. We cannot guarantee that for everyone, of course, but depending on how complex your game is, the chances are good.
There is plenty to be excited about in this version. It pulls together most of the R&D that took place earlier this year for Phaser 4 and delivers it to you in version 3. New features include full support for post-processing effects via the new Post FX Pipeline, multi-texture support for faster WebGL rendering, a brand new Layer Game Object for the ability to group and post process objects without impacting their transforms, new event hooks, a massive overhaul of the Animation system, funky looking new Point Lights, a new Pipeline Manager, new Camera effects, the latest version of the Spine Plugin, an extremely powerful new Mesh Game Object, a brand new Render Texture, huge improvements to Bitmap Text, isometric and hexagonal Tilemap support, a new Pushable Arcade Physics Body type, new Geometry Intersection tests, Light 2D Updates and lots, lots, lots more!
As usual, I'd like to send my thanks to the Phaser community for their help in both reporting issues and submitting pull requests to fix them. So, please do spend some time digging through the Change Log. I assure you, it's worth while :)
I'd like to send a massive thank-you to everyone who supports Phaser on Patreon, GitHub Sponsors and our corporate backers. Your continued funding allows me to keep working on Phaser full-time and this monster of a new release is the very real result of that. If you've ever considered becoming a backer, now is the perfect time!
If you'd like to stay abreast of developments then I'm now publishing them to the Phaser Patreon. Here you can find the latest development reports including the concepts behind Phaser 4.
You can also follow Phaser on Twitter and chat with fellow Phaser devs in our Discord.
Phaser 3 wouldn't have been possible without the fantastic support of the community and Patreon. Thank you to everyone who supports our work, who shares our belief in the future of HTML5 gaming, and Phaser's role in that.
Happy coding everyone!
Cheers,
Rich - @photonstorm
Because Phaser is an open source project, we cannot charge for it in the same way as traditional retail software. What's more, we don't ever want to. After all, it's built on, and was born from, open web standards. It's part of our manifesto that the core framework will always be free, even if you use it commercially, as many of you do.
You may not realize it, but because of this, we rely 100% on community backing to fund development.
Those funds allow Phaser to improve, and when it improves, everyone involved benefits. Your support helps secure a constant cycle of updates, fixes, new features and planning for the future.
There are other benefits to backing Phaser, too:
We use Patreon to manage the backing and you can support Phaser from $1 per month. The amount you pledge is entirely up to you and can be changed as often as you like. Patreon renews monthly, just like Netflix. You can, of course, cancel at any point. Tears will be shed on this end, but that's not your concern.
You can also support us by using crypto currencies. The Phaser wallet addresses are:
Extra special thanks to the following companies whose support makes Phaser possible:
Phaser 3 is available via GitHub, npm and CDNs:
Install via npm:
npm install phaser
Phaser is on jsDelivr which is a "super-fast CDN for developers". Include the following in your html:
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
or the minified version:
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
Go to https://newdocs.phaser.io/ to read the docs online using our brand new interface. Use the links to navigate the namespaces, classes and Game Objects lists and also use the new search box.
The documentation for Phaser 3 is an on-going project. Please help us by contributing improved docs and examples.
The TypeScript definitions can be found inside the types
folder. They are also referenced in the types entry in package.json
.
Depending on your project, you may need to add the following to your tsconfig.json
file:
"typeRoots": [
"./node_modules/phaser/types"
],
"types": [
"Phaser"
]
We recently published a new Phaser 3 TypeScript Project Template, which you can use to get started with if you like.
The TS defs are automatically generated from the JSDoc comments found in the Phaser source code. If you wish to help refine them then you must edit the Phaser JSDoc blocks directly, not the defs file. You can find more details about the parser we built in the scripts/tsgen
folder.
We use Webpack to build Phaser and we take advantage of its conditional build flag feature to handle renderer swapping. If you wish to use Webpack with Phaser then please use our Phaser 3 Project Template as it's already set-up to handle the build conditions Phaser needs. Recent changes to our build steps mean you should now be able to use any other packager, like Parcel, without any config changes.
Tutorials and guides on Phaser 3 development are being published every week.
We've 3 tutorials related specifically to creating Facebook Instant Games with Phaser:
During our development of Phaser 3, we created hundreds of examples with the full source code and assets ready available. These examples are now fully integrated into the Phaser website. You can also browse them on Phaser 3 Labs via a more advanced interface, or clone the examples repo. We are constantly adding to and refining these examples.
Super community member RexRainbow has been publishing Phaser 3 content for years, building up an impressive catalogue in that time. You'll find loads of plugins, from UI controls such as text input boxes, to Firebase support, Finite State Machines and lots more. As well as the plugins there is also a comprehensive set of 'Notes' about Phaser 3, going into great detail about how the various systems work. It's an invaluable resource and well worth checking out at https://rexrainbow.github.io
Create an index.html
page locally and paste the following code into it:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>
<script></script>
</body>
</html>
This is a standard empty webpage. You'll notice there's a script tag that is pulling in a build of Phaser 3, but otherwise this webpage doesn't do anything yet. Now let's set-up the game config. Paste the following between the <script></script>
tags:
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene: {
preload: preload,
create: create
}
};
config
is a pretty standard Phaser 3 Game Configuration object. We tell config
to use the WebGL renderer if it can, set the canvas to a size of 800x600 pixels, enable Arcade Physics, and finally call the preload
and create
functions. preload
and create
have not been implemented yet, so if you run this JavaScript code, you will have an error. Add the following after config
:
var game = new Phaser.Game(config);
function preload ()
{
this.load.setBaseURL('https://labs.phaser.io');
this.load.image('sky', 'assets/skies/space3.png');
this.load.image('logo', 'assets/sprites/phaser3-logo.png');
this.load.image('red', 'assets/particles/red.png');
}
function create ()
{
}
game
is a Phaser Game instance that uses our configuration object config
. We also add function definitions for preload
and create
. The preload
function helps you easily load assets into your game. In preload
, we set the Base URL to be the Phaser server and load 3 PNG files.
The create
function is empty, so it's time to fill it in:
function create ()
{
this.add.image(400, 300, 'sky');
var particles = this.add.particles('red');
var emitter = particles.createEmitter({
speed: 100,
scale: { start: 1, end: 0 },
blendMode: 'ADD'
});
var logo = this.physics.add.image(400, 100, 'logo');
logo.setVelocity(100, 200);
logo.setBounce(1, 1);
logo.setCollideWorldBounds(true);
emitter.startFollow(logo);
}
Here we add a sky image into the game and create a Particle Emitter. The scale
value means that the particles will initially be large and will shrink to nothing as their lifespan progresses.
After creating the emitter
, we add a logo image called logo
. Since logo
is a Physics Image, logo
is given a physics body by default. We set some properties for logo
: velocity, bounce (or restitution), and collision with the world bounds. These properties will make our logo bounce around the screen. Finally, we tell the particle emitter to follow the logo - so as the logo moves, the particles will flow from it.
Run it in your browser and you'll see the following:
(Got an error? Here's the full code)
This is a tiny example, and there are hundreds more for you to explore, but hopefully it shows how expressive and quick Phaser is to use. With just a few easily readable lines of code, we've got something pretty impressive up on screen!
Ourcade have published two great Phaser 3 books. They'll take you from getting set-up, through to finishing your first game using modern JavaScript or TypeScript and they're both completely free! They also publish a huge range of quality tutorials and videos, so be sure to check out their site every week.
Learn the secrets of HTML5 game development with Phaser 3.50 while building a cross platform endless runner game. Designed both for beginners and skilled programmers, the course guides you from an empty folder introducing the bare bones of JavaScript to advanced Phaser 3 features. Find out more details about HTML5 Cross Platform Game Development with Phaser.
There are both plain and minified compiled versions of Phaser in the dist
folder of the repository. The plain version is for use during development, and the minified version is for production use. You can and should also create your own builds.
Phaser 3 is built using Webpack and we take advantage of the Webpack definePlugin feature to allow for conditional building of the Canvas and WebGL renderers and extra plugins. You can custom the build process to only include the features you require. Doing so can cut the main build file size down to just 70KB.
Read our comprehensive guide on creating Custom Builds of Phaser 3 for full details.
If you wish to build Phaser 3 from source, ensure you have the required packages by cloning the repository and then running npm install
on your source directory.
You can then run webpack
to create a development build in the build
folder which includes source maps for local testing. You can also npm run dist
to create a minified packaged build in the dist
folder. For a list of all commands available use npm run help
.
Change Log
Due to the increasing size of our Change Logs we have now split them up into three parts:
We've organized the Change Logs into commonly themed sections to make it more digestible, but we appreciate there is a lot in there. Please don't feel overwhelmed! If you need clarification about something, join us on the Phaser Discord and feel free to ask.
The Contributors Guide contains full details on how to help with Phaser development. The main points are:
Found a bug? Report it on GitHub Issues and include a code sample. Please state which version of Phaser you are using! This is vitally important.
Before submitting a Pull Request run your code through ES Lint using our config and respect our Editor Config.
Before contributing read the code of conduct.
Written something cool in Phaser? Please tell us about it in the forum, or email support@phaser.io
Phaser is a Photon Storm production.
Created by Richard Davey. Powered by coffee, anime, pixels and love.
The Phaser logo and characters are © 2021 Photon Storm Limited.
All rights reserved.
"Above all, video games are meant to be just one thing: fun. Fun for everyone." - Satoru Iwata
Visit: The Phaser website and follow on Phaser Twitter
Play: Some of the amazing games #madewithphaser
Learn: API Docs, Support Forum and StackOverflow
Code: 1770+ Examples (source available in this repo)
Read: The Phaser World Newsletter
Discord: Join us on Discord
Extend: With Phaser Plugins
Be awesome: Support the future of Phaser
Download Details:
Author: photonstorm
Source Code: https://github.com/photonstorm/phaser
License: MIT
#javascript #gamedev #webgl #canvas #phaser #gamedevelopment #phaserjs #html5
1650352373
The aim of this project is to provide a fast lightweight 2D library that works across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast.
If you want to keep up to date with the latest PixiJS news then feel free to follow us on Twitter @PixiJS and we will keep you posted! You can also check back on our site as any breakthroughs will be posted up there too!
We are now a part of the Open Collective and with your support you can help us make PixiJS even better. To make a donation, simply click the button below and we'll love you forever!
PixiJS is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility.
PixiJS has full WebGL support and seamlessly falls back to HTML5's canvas if needed. As a framework, PixiJS is a fantastic tool for authoring interactive content, especially with the move away from Adobe Flash in recent years. Use it for your graphics rich, interactive websites, applications, and HTML5 games. Out of the box cross-platform compatibility and graceful degradation mean you have less work to do and have more fun doing it! If you want to create polished and refined experiences relatively quickly, without delving into dense, low level code, all while avoiding the headaches of browser inconsistencies, then sprinkle your next project with some PixiJS magic!
Boost your development and feel free to use your imagination!
It's easy to get started with PixiJS! Simply download a prebuilt build!
Alternatively, PixiJS can be installed with npm or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page.
Note: After v4.5.0, support for the Bower package manager has been dropped. Please see the release notes for more information.
npm install pixi.js
There is no default export. The correct way to import PixiJS is:
import * as PIXI from 'pixi.js'
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
Note: 5.1.3
can be replaced by any released version.
Thanks to @photonstorm for providing those last 2 examples and allowing us to share the source code :)
Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch.
Make sure to read the Contributing Guide before submitting changes.
import * as PIXI from 'pixi.js';
// The application will create a renderer using WebGL, if possible,
// with a fallback to a canvas render. It will also setup the ticker
// and the root stage PIXI.Container
const app = new PIXI.Application();
// The application will create a canvas element for you that you
// can then insert into the DOM
document.body.appendChild(app.view);
// load the texture we need
app.loader.add('bunny', 'bunny.png').load((loader, resources) => {
// This creates a texture from a 'bunny.png' image
const bunny = new PIXI.Sprite(resources.bunny.texture);
// Setup the position of the bunny
bunny.x = app.renderer.width / 2;
bunny.y = app.renderer.height / 2;
// Rotate around the center
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
// Add the bunny to the scene we are building
app.stage.addChild(bunny);
// Listen for frame updates
app.ticker.add(() => {
// each frame we spin the bunny around a bit
bunny.rotation += 0.01;
});
});
Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our prebuilt releases. Really the only time you should need to build PixiJS is if you are developing it.
If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm:
npm install
Then, to build the source, run:
npm run build
The docs can be generated using npm:
npm run docs
The documentation uses webdoc in combination with this template pixi-webdoc-template. The configuration file can be found at webdoc.conf.json
Download Details:
Author: pixijs
Source Code: https://github.com/pixijs/pixijs
License: MIT
#javascript #gamedev #webgl #canvas #pixijs #html5
1649916747
Thoroughly revised and updated with examples rewritten to conform to HTML5, CSS3, and contemporary web development practices, this easy-to-understand, step-by-step tutorial helps you quickly master the basics of HTML and CSS before moving on to more advanced topics such as graphics, video, and interactivity with JavaScript and jQuery.
In just one hour a day, you’ll learn the skills you need to design, create, and maintain a professional-looking website.
Learn how to...
Contents at a Glance
PART I: Getting Started 1 What Is Web Publishing 2 Getting Your Tools in Order 3 Introducing HTML and CSS
PART II: Creating Web Pages 4 Learning the Basics of HTML 5 Organizing Information with Lists 6 Working with Links
PART III: Doing More with HTML and CSS 7 Formatting Text with HTML and CSS 8 Using CSS to Style a Site 9 Using Images on Your Web Pages 10 Building Tables 11 Using CSS to Position Elements on a Page 12 Designing Forms 13 Structuring a Page with HTML5 14 Integrating Multimedia: Video and Sound 15 Advanced CSS: Page Layout in CSS 16 Using Responsive Web Design
PART IV: Using JavaScript and jQuery 17 Introducing JavaScript 18 Using jQuery 19 Using JavaScript in Your Pages 20 Working with Frames and Linked Windows
PART V: Designing for Everyone 21 Designing for the Mobile Web 22 Designing for User Experience
PART VI: Going Live on the Web 23 How to Publish Your Site 24 Taking Advantage of the Server 25 Search Engines and SEO
#html #css #javascript #html5 #css3 #webdev #jquery #programming #developer #ebook #book