Search completed in 0.94 seconds.
Mobile touch controls - Game development
g it back again will use the first available property, so pointer2 will be used again. you can quickly get the coordinates of the most recently active pointer via the this.game.input.x and this.game.input.y variables. input events instead of using the pointers directly it is also possible to listen for this.game.input events, like ondown, onup, ontap and onhold: this.game.input.ondown.add(item
touched, this); function item
touched(pointer) { // do something } the item
touched() function will be executed when the ondown event is dispatched by touching the screen. the pointer variable will contain the information about the pointer that activated the event. this approach uses the generally available this.game.input object, but you can also detect the actions on any game objects like sprites ...
...patched by touching the screen. the pointer variable will contain the information about the pointer that activated the event. this approach uses the generally available this.game.input object, but you can also detect the actions on any game objects like sprites or buttons by using oninputover, oninputout, oninputdown, oninputup, ondragstart, or ondragstop: this.button.events.oninputover.add(item
touched, this); function item
touched(button, pointer) { // do something } that way you'll be able to attach an event to any object in the game, like the player's ship, and react to the actions performed by the user. an additional advantage of using phaser is that the buttons you create will take any type of input, whether it's a touch on mobile or a click on desktop — the framework sorts this ou...
.... implementation the easiest way to add an interactive object that will listen for user input is to create a button: var buttonenclave = this.add.button(10, 10, 'logo-enclave', this.clickenclave, this); this one is formed in the mainmenu state — it will be placed ten pixels from the top left corner of the screen, use the logo-enclave image, and execute the clickenclave() function when it is
touched. this will work on mobile and desktop out of the box. there are a few buttons in the main menu, including the one that will start the game. for the actual gameplay, instead of creating more buttons and covering the small mobile screen with them, we can use something a little bit different: we'll create invisible areas which respond to the given action. from a design point of view, it is better t...
Pointer events - Web APIs
er touches). the application can use the isprimary property to identify a master pointer among the set of active pointers for each pointer type. if an application only wants to support a primary pointer, it can ignore all pointer events that are not primary. for mouse there is only one pointer, so it will always be the primary pointer. for touch input, a pointer is considered primary if the user
touched the screen when there were no other active touches. for pen and stylus input, a pointer is considered primary if the user's pen initially contacted the screen when there were no other active pens contacting the screen. determining button states some pointer devices, such as mouse and pen, support multiple buttons and the button presses can be chorded i.e. depressing an additional button while a...
...rolling and zooming. in the following example, the browser's default touch behavior is disabled for the div element. <html> <body> <div style="touch-action:none;">can't touch this ... </div> </body> </html> in the following example, default touch behavior is disabled for some button elements. button#tiny { touch-action: none; } in the following example, when the target element is
touched, it will only pan in the horizontal direction. #target { touch-action: pan-x; } compatibility with mouse events although the pointer event interfaces enable applications to create enhanced user experiences on pointer enabled devices, the reality is the vast majority of today's web content is designed to only work with mouse input. consequently, even if a browser supports pointer events, the...
Tamarin mercurial commit hook - Archive of obsolete content
n-redux then add the following to your tamarin-redux/.hg/hgrc file (or to ~/.hgrc to implement for all local repos): [hooks] pretxncommit.commit = python:/path/to/tamarin-redux/utils/hooks/tamarin-commit-hook.py:master_hook once added, all commits will run the commit hook. hook use on every commit to your local repository, the hook will only check for violations in any new / changed code. any un
touched lines of code that violate the check will be ignored. when a violation is found the following will be displayed: > hg commit -m "change with a tab" tab(s) found in test/test.txt for rev 1458 (change 53543674b8e6): @@ -65,4 +65,6 @@ +# tab here ^ (n)o, (y)es, (a)llow tabs for current file are you sure you want to commit this change? [n]: note that the prompt gives you the options to abor...
Updating an extension to support multiple Mozilla applications - Archive of obsolete content
ll) of firefox, thunderbird, and sunbird, but you won't see any effect in thunderbird and sunbird. that's because there's nothing telling those two applications what to do with the chrome provided by the extension. that's where the chrome manifest comes into play. update the chrome manifest remember way back in the first article in this series when we created our chrome manifest, which we haven't
touched since? it's time to touch it. as you may (or may not) recall, that file tells the application what xul code your extension's interface needs to overlay onto. for firefox, we overlaid onto browser.xul, which describes a firefox browser window. we need to add lines to the manifest for thunderbird and sunbird, like this: # thunderbird overlay chrome://messenger/content/messenger.xul chrome://stockwa...
Scaling - Game development
me.scale.pagealignhorizontally = true; game.scale.pagealignvertically = true; } scalemode has a few different options available for how the canvas can be scaled: no_scale — nothing is scaled. exact_fit — scale the canvas to fill all the available space both vertically and horizontally, without preserving the aspect ratio. show_all — scales the canvas, but keeps the aspect ratio un
touched, so images won't be skewed like in the previous mode. there might be black stripes visible on the edges of the screen, but we can live with that. resize — creates the canvas with the same size as the available width and height, so you have to place the objects inside your game dynamically; this is more of an advanced mode. user_scale — allows you to have custom dynamic scaling, calculating ...
Introduction to CSS layout - Learn web development
prerequisites: the basics of html (study introduction to html), and an idea of how css works (study introduction to css.) objective: to give you an overview of css page layout techniques. each technique can be learned in greater detail in subsequent tutorials. ...
CSS layout - Learn web development
amples in an online coding program such as jsbin or glitch. guides these articles will provide instruction on the fundamental layout tools and techniques available in css. at the end of the lessons is an assessment to help you check your understanding of layout methods, by laying out a webpage. introduction to css layout this article will recap some of the css layout features we've already
touched upon in previous modules — such as different display values — and introduce some of the concepts we'll be covering throughout this module. normal flow elements on webpages lay themselves out according to normal flow - until we do something to change that. this article explains the basics of normal flow as a grounding for learning how to change it. flexbox flexbox is a one-dimensional layo...
Implementing feature detection - Learn web development
feature is supported in the current browser, and then conditionally run code to provide an acceptable experience both in browsers that do support the feature, and browsers that don't. if you don't do this, browsers that don't support the features you are using in your code won't display your sites properly and will just fail, creating a bad user experience. let's recap and look at the example we
touched on in our handling common javascript problems — the geolocation api (which exposes available location data for the device the web browser is running on) has the main entry point for its use, a geolocation property available on the global navigator object. therefore, you can detect whether the browser supports geolocation or not by using something like the following: if ("geolocation" in naviga...
Package management basics - Learn web development
sub-dependencies, of which there could be tens, or hundreds. removing all the files again if you want to remove the packages. in addition, package managers handle duplicate dependencies (something that becomes important and common in front-end development). in the case of npm (and javascript- and node-based package managers) you have two options for where you install your dependencies. as we
touched on in the previous article, dependencies can be installed globally or locally to your project. although there tend to be more pros for installing globally, the pros for installing locally are more important — such as code portability and version locking. for example, if your project relied on webpack with a certain configuration, you'd want to ensure that if you installed that project on anoth...
Multiprocess on Windows
e main thread. mtauniqueptr<t> forces reference to be released on an mta thread. proxyuniqueptr<t> in the chrome process, forces reference to be released on the main thread. in the content process, forces reference to be released on an mta thread. interceptortargetptr<t> no-op deleter: used to annotate pointers whose reference counts must never be
touched. these pointers all use mozilla::uniqueptr under the hood. use the mozilla::mscom::to*uniqueptr functions in ipc/mscom/ptr.h to create new instances of these. there is also a mozilla::mscom::getter_addrefs() function that allows these pointers to receive outparams. simple example now you know about mainthreadhandoff::wrapinterface and about the smart pointers, you're ready to wrap an int...
Makefiles - Best practices and suggestions
ect dependencies will contribute to wasted cycles and can contribute to circular dependencies. directory dependencies do not use directories as a dependency for generated targets, ever. any activity within a directory will alter inodes forcing targets to always be stale. for ex, individual unit tests would invalidate all prior test activity whenever a test
touched a timestamp file in the directory to signal success. parallel make: add an explicit timestamp dependency (.done) that make can synchronize threaded calls on to avoid a race condition. # transient directory for storing timestamps ts=.ts ##################################################### ## extra dep needed to synchronize parallel execution #######################...
Contributing to the Mozilla code base
r?reviewer` for example, a commit message may look like `bug 1234567 - remove reflow by caching element size. r?jsample` mozilla in most of the projects uses phabricator for code review. who is the right person to ask for a review? if you have a mentored bug: ask your mentor. they will help, or can easily find out. it might be them! run hg blame on the file and look for the people who have
touched the functions you're working on. they too are good candidates. running hg log and looking for regular reviewers might be a solution too. the bug itself may contain a clear indication of the best person to ask for a review are there related bugs on similar topics? the reviewer in those bugs might be another good choice we have a list of modules, which lists peers and owners for the module. som...
Reviewer Checklist
ing tests that use paintedsurface, ensure the paintedsurface is closed when you're done with it.] performance impact check for main-thread io [fennec: android may warn about this with strictmode]. remove debug logging that is not needed in production. threading issues enormous: correct use of locking and volatility; livelock and deadlock; ownership. [fennec: all view methods should be
touched only on ui thread.] [fennec: activity lifecycle awareness (works with "never keep activities"). also test with oom-fennec (https://hg.mozilla.org/users/blassey_mozilla.com/oom-fennec/)]. compatibility version files, databases, messages tag messages with ids to disambiguate callers. idl uuids are updated when the interface is updated. android permissions should be 'grouped' into a common ...
Http.jsm
is. in case an array of parameters is given, it will be treated as an array of key-value pairs. the elements of the array will be url-encoded and "application/x-www-form-urlencoded; charset=utf-8" will be enforced as the content type. http.jsm only forces the content type if the post data is an array, and it serializes it automatically. if the provided postdata is a string, the content type isn't
touched. in this case, the content type may be set through the headers parameter. additional xhr configuration it is possible to modify things manually on the xhr object after calling httprequest. httprequest returns an xhr object, which can be used to set additional parameters for the request. for example, xhr might be configured to use any custom mime-type when processing a response regardless of wha...
Gecko Profiler FAQ
t know. [ehsan] i don’t think this is very interesting in the general situation, since oses can basically decide to swap out part of your virtual address space and you’d page fault when you access that page next and there is very little that the program can do about that. many times the reason you incur a page fault is merely that you are touching a memory page that hasn’t been
touched in awhile. for example, we have observed that the first access to large hashtables when doing a hashtable lookup can incur a page fault in many cases, and while the specific reason behind each one of those page faults may be different, the general conclusion from that observation would be something about the overall efficiency of your memory access patterns. typically we wouldn’t be optimizin...
SpiderMonkey compartments
he lines. false sharing occurs when we are trying to operate on an object and we have to read an entire cache line of data into the cpu cache. in the old model, javascript objects could be co-located with arbitrary other javascript objects from other origins. such cross-origin objects are used together very infrequently, which reduces the number of cache hits we get. in the new model most objects
touched by a website are tightly packed next to each other in memory, with no cross-origin objects in between. javascript objects (including javascript functions, which are objects also) are only allowed to touch objects in the same compartment. this invariant is very useful for security purposes. the javascript engine enforces this requirement at a very low level. it means that a "google.com" object c...
nsIContentViewManager
y. methods getcontentviewsin() returns an array of nsicontentview objects representing all of the content views that intersect with the specified rectangle in the browser. note: the rectangle is specified using an anchor point, then four distances to indicate how far in each direction to expand the rectangle. this lets you, for example, take the coordinates at which the user clicked (or
touched) the screen, and expand outward to create a rectangle from that point. pixels are in chrome device pixels and are relative to the browser element. void getcontentviewsin( in float axpx, in float aypx, in float atopsize, in float arightsize, in float abottomsize, in float aleftsize, out unsigned long alength, optional [retval, array, size_is(alength)] out nsicontentview aresult )...
nsIPluginHost
icator/plugin/pgfn2.htm#1007754 "if no custom headers are required, simply add a blank line ('\n') to the beginning of the file or buffer.", it skips that '\n' and considers rest of the input buffer as data. if "content-length" string and end of headers is found it substitutes single lf with crlf in the headers, so the end of headers always will be crlfcrlf (single cr in headers, if any, remain un
touched) else it puts "content-length: "+size_of_data+crlfcrlf at the beginning of the output buffer and memcpy data to the output buffer. on failure outpostdata and outpostdatalen will be set in 0. void parsepostbuffertofixheaders( in string ainpostdata, in unsigned long ainpostdatalen, out string aoutpostdata, out unsigned long aoutpostdatalen ); parameters ainpostdata the post data. a...
ElementCSSInlineStyle.style - Web APIs
y string, e.g., elt.style.color = null. internet explorer requires setting it to an empty string, and does not do anything when setting it to null. examples // set multiple styles in a single statement elt.style.csstext = "color: blue; border: 1px solid black"; // or elt.setattribute("style", "color:red; border: 1px solid blue;"); // set specific style while leaving other inline style values un
touched elt.style.color = "blue"; getting style information the style property is not useful for completely learning about the styles applied on the element, since it represents only the css declarations set in the element's inline style attribute, not those that come from style rules elsewhere, such as style rules in the <head> section, or external style sheets. to get the values of all css propertie...
Index - Web APIs
it was first placed on the surface, even if the touch point has since moved outside the interactive area of that element or even been removed from the document. note that if the target element is removed from the document, events will still be targeted at it, and hence won't necessarily bubble up to the window or document anymore. if there is any risk of an element being removed while it is being
touched, the best practice is to attach the touch listeners directly to the target. 4282 msmanipulationviewsenabled msmanipulationviesenabled the msmanipulationviewsenabled read-only property returns true if manipulation features are support available, such as touch panning and zooming using css rules. 4283 touch events advanced, dom, event, guide, mobile, overview, to...
Touch.radiusX - Web APIs
rcumscribes the touching area (e.g. finger, stylus) along the axis perpendicular to that indicated by touch.rotationangle. the touch.rotationangle is the angle (in degrees) that the ellipse described by radiusx and radiusy is rotated clockwise about its center. the following simple code snippet, registers a single handler for the touchstart, touchmove and touchend events. when the src element is
touched, the element's width and height will be calculate based on the touch point's radiusx and radiusy values and the element will then be rotated using the touch point's rotationangle. <div id="src"> ... </div> var src = document.getelementbyid("src"); src.addeventlistener('touchstart', rotate); src.addeventlistener('touchmove', rotate); src.addeventlistener('touchend', rotate); function rotate (...
Touch.target - Web APIs
it was first placed on the surface, even if the touch point has since moved outside the interactive area of that element or even been removed from the document. note that if the target element is removed from the document, events will still be targeted at it, and hence won't necessarily bubble up to the window or document anymore. if there is any risk of an element being removed while it is being
touched, the best practice is to attach the touch listeners directly to the target. syntax var el = touchpoint.target; return value el the target element of the touch object. example this example illustrates how to access the touch object's touch.target property. the touch.target property is an element (eventtarget) on which a touch point is started when contact is first placed on the surface.
Using Touch Events - Web APIs
ties include a unique identifier, the touch point's target element as well as the x and y coordinates of the touch point's position relative to the viewport, page, and screen. the touchlist interface represents a list of contact points with a touch surface, one touch point per contact. thus, if the user activated the touch surface with one finger, the list would contain one item, and if the user
touched the surface with three fingers, the list length would be three. the touchevent interface represents an event sent when the state of contacts with a touch-sensitive surface changes. the state changes are starting contact with a touch surface, moving a touch point while maintaining contact with the surface, releasing a touch point and canceling a touch event. this interface's attributes include th...
WebGLRenderingContext.bindBuffer() - Web APIs
one. exceptions only one target can be bound to a given webglbuffer. an attempt to bind the buffer to another target will throw an invalid_operation error and the current buffer binding will remain the same. a webglbuffer which has been marked for deletion with deletebuffer cannot be (re-)bound. an attempt to do so will generate an invalid_operation error, and the current binding will remain un
touched. examples binding a buffer to a target var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); getting current bindings to check the current buffer bindings, query the array_buffer_binding and element_array_buffer_binding constants. gl.getparameter(gl.array_buffer_binding); gl.getparameter...
-webkit-touch-callout - CSS: Cascading Style Sheets
this property allows disabling that behavior. /* keyword values */ -webkit-touch-callout: default; -webkit-touch-callout: none; /* global values */ -webkit-touch-callout: initial; -webkit-touch-callout: inherit; -webkit-touch-callout: unset; syntax values default the default callout is displayed. none the callout is disabled. ...
CSS Color - CSS: Cascading Style Sheets
apply these colors and effects to html content. not all css properties that take a <color> as a value are part of this module, but they do depend upon it. reference properties color color-adjust opacity data types <color> guides applying color to html elements using css a guide to using css to apply color to a variety of types of content. all color-related css properties are
touched upon. tools color picker tool this tool makes it easy to create, adjust, and experiment with custom colors. specifications specification status comment css color module level 4 working draft css color module level 3 recommendation css level 2 (revision 1) recommendation css level 1 recommendation initial de...
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
for this guide, we will look at this feature of grid and other modern layout methods, learning a little about writing modes and logical vs. physical properties as we do so. logical and physical properties and values css is full of physical positioning keywords – left and right, top and bottom. if we position an item using absolute positioning, we use these physical keywords as offset values to push the item around. ...
touch-action - CSS: Cascading Style Sheets
wn behavior in pointermove and pointerup listeners for the remaining gestures. applications using touch events disable the browser handling of gestures by calling preventdefault(), but should also use touch-action to ensure the browser knows the intent of the application before any event listeners have been invoked. when a gesture is started, the browser intersects the touch-action values of the
touched element and its ancestors, up to the one that implements the gesture (in other words, the first containing scrolling element). this means that in practice, touch-action is typically applied only to top-level elements which have some custom behavior, without needing to specify touch-action explicitly on any of that element's descendants. after a gesture starts, changes to touch-action will not h...
<input type="tel"> - HTML: Hypertext Markup Language
experience may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested email addresses. then, as the user types, the list is adjusted to show only filtered matching values. each typed character narrows down the list until the user makes a selection or types a custom value. here's a screenshot of what that might look like: validation as we've
touched on before, it's quite difficult to provide a one-size-fits-all client-side validation solution for phone numbers. so what can we do? let's consider some options. important: html form validation is not a substitute for server-side scripts that ensure the entered data is in the proper format before it is allowed into the database. it's far too easy for someone to make adjustments to the html tha...
<tr>: The Table Row element - HTML: Hypertext Markup Language
0</td> </tr> </tbody> </table> the differences that matter here—for the purposes of discussing row and column spans—are in the first few lines of the code above. note the use of rowspan on to make the "name", "id", and "balance" headers occupy two rows instead of just one, and the use of colspan to make the "membership dates" header cell span across two columns. once again, we haven't
touched the css. table { border: 1px solid black; } th, td { border: 1px solid black; } result the output is entirely unchanged, despite the addition of useful contextual information under the hood: basic styling as is the case with all parts of a table, you can change the appearance of a table row and its contents using css. any styles applied to the <tr> element will affect the cells with...
Compression in HTTP - HTTP
following techniques for files in a compressed format. end-to-end compression for compression, end-to-end compression is where the largest performance improvements of web sites reside. end-to-end compression refers to a compression of the body of a message that is done by the server and will last unchanged until it reaches the client. whatever the intermediate nodes are, they leave the body un
touched. all modern browsers and servers do support it and the only thing to negotiate is the compression algorithm to use. these algorithm are optimized for text. in the 1990s, compression technology was advancing at a rapid pace and numerous successive algorithms have been added to the set of possible choices. nowadays, only two are relevant: gzip, the most common one, and br the new challenger. to...
Array.prototype.concat() - JavaScript
that is, if a referenced object is modified, the changes are visible to both the new and original arrays. this includes elements of array arguments that are also arrays. data types such as strings, numbers and booleans (not string, number, and boolean objects): concat copies the values of strings and numbers into the new array. note: concatenating array(s)/value(s) will leave the originals un
touched. furthermore, any operation on the new array (except operations on elements which are object references) will have no effect on the original arrays, and vice versa. examples concatenating two arrays the following code concatenates two arrays: const letters = ['a', 'b', 'c']; const numbers = [1, 2, 3]; letters.concat(numbers); // result in ['a', 'b', 'c', 1, 2, 3] concatenating three array...
Object.seal() - JavaScript
data properties to accessor properties and vice versa, but it does not prevent the values of data properties from being changed. attempting to delete or add properties to a sealed object, or to convert a data property to accessor or vice versa, will fail, either silently or by throwing a typeerror (most commonly, although not exclusively, when in strict mode code). the prototype chain remains un
touched. however, the __proto__ property is sealed as well. comparison to object.freeze() existing properties in objects frozen with object.freeze() are made immutable. objects sealed with object.seal() can have their existing properties changed. examples using object.seal var obj = { prop: function() {}, foo: 'bar' }; // new properties may be added, existing properties // may be changed or rem...
operator - SVG: Scalable Vector Graphics
defined in the in attribute that fall outside the destination graphic defined in the in2 attribute, are displayed. atop this value indicates that the parts of the source graphic defined in the in attribute, which overlap the destination graphic defined in the in2 attribute, replace the destination graphic. the parts of the destination graphic that do not overlap with the source graphic stay un
touched. xor this value indicates that the non-overlapping regions of the source graphic defined in the in attribute and the destination graphic defined in the in2 attribute are combined. lighter this value indicates that the sum of the source graphic defined in the in attribute and the destination graphic defined in the in2 attribute is displayed. arithmetic this value indicates that the sourc...
Index - WebAssembly
e webassembly js api. 11 using the webassembly javascript api api, devtools, javascript, webassembly, compile, instantiate, memory, table this article has taken you through the basics of using the webassembly javascript api to include a webassembly module in a javascript context and make use of its functions, and how to use webassembly memory and tables in javascript. we also
touched on the concept of multiplicity. 12 webassembly concepts c, c++, emscripten, javascript, webassembly, concepts, rust, text format, web platform this article has given you an explanation of what webassembly is, why it is so useful, how it fits into the web, and how you can make use of it. ...
Using the WebAssembly JavaScript API - WebAssembly
amic linking. you can see multiplicity in action in our understanding text format article — see the mutating tables and dynamic linking section. summary this article has taken you through the basics of using the webassembly javascript api to include a webassembly module in a javascript context and make use of its functions, and how to use webassembly memory and tables in javascript. we also
touched on the concept of multiplicity. ...