Calendario

Abril 2016
LunMarMierJueVierSabDom
 << <Jun 2017> >>
    123
45678910
11121314151617
18192021222324
252627282930 

Anuncio

¿Quién está en línea?

Miembro: 0
Visitante: 1

rss Sindicación

Anuncio de los artículos posteados el: 21/04/2016

21 Avr 2016 

Focal Press Announces “Adobe Photoshop® CC for Photographers” Book

BURLINGTON, Mass.--(BUSINESS WIRE)--Focal Press, a leading publisher of media technology books, has announced the and the best thing - it is free availability of digital imaging aficionado and author Martin Evenings new book, Adobe Photoshop CC for Photographers. The book is currently available for pre-order and will be on shelves on July 1.

Now in its 11th edition, the title guides photographers and digital artists through Adobes latest release of its graphics and image editing software, Photoshop Creative Cloud (CC), formerly known as the Creative Suite (CS). The book addresses the latest software enhancements and provides advanced, step-by-step tutorials with more than 750 color images and tips to refine an artists workflow. Additionally, a fully revised website accompanies the book and features bonus images and chapters, and how-to videos. The book can be purchased in stores and online at FocalPress.com, Amazon.com and BN.com ($54.95).

The Photoshop products continue to evolve alongside the photographers and designers who use them. Even advanced photographers are only scratching the surface of the products potential, and it is my hope that I can help digital artists maximize Photoshop CC for their needs, and streamline their workflow in the process, said Evening.

Evening is an accomplished fashion and beauty photographer, and a Photoshop Hall-of-Famer. He has written dozens of books about Adobes digital editing products, and additional tips and videos can be found on his website www.photoshopforphotographers.com.

Adobe Photoshop CC for Photographers will be followed by additional how-to guides on the topic by Focal Press authors Steve Caplin (How to Cheat in Photoshop CC) and Mark Galer and Philip Andrews (Photoshop CC: Essential Skills) in September.

For information about Focal Press, or any of these titles and authors, visit www.focalpress.com. To find the latest news from Martin Evening as well as links to his CS6 tutorial videos, visitwww.facebook.com/MartinEveningPhotoshopAndPhotography.

Follow us online!

About Focal Press

Focal Press has been a leading publisher of Media Technology books for 75 years. We provide essential resources for cheat, hack, crack, free download, professionals and students in many areas including: film and digital video production, photography, digital imaging, graphics, animation and new media, broadcast and media distribution technologies, music recording and production, mass communications, and theatre technology.
Admin · 33 vistas · Escribir un comentario
21 Avr 2016 

To make video games more accessible, we need a little balance

There has been a great deal of discussion online about the dumbing down of video games. Hardcore console gamers have been saying that esp the adoption of console games by so-called Casual Gamers have lead to games being made too easy or babyified, and PC gamers have bemoaned control schemes getting simplified for consoles, and failing to take advantage of increased control options for PCs. However, if game developers don't make games accessible to new players, the video game market will stagnate and die. This is inevitable.



So, with that in mind, we need to find a middle ground. One were games are easy enough for new players, but hard enough for experienced ones. While having adjustable difficulty settings kind of allows for this, it isn't good enough. Learning curves for games can vary wildly. What is normal another game's easy. This editorial will propose a common criteria for video game difficulty, to be applied for all home console games. For the record, this is not meant to apply for arcade games and particularly fighting games. Those are a special beast to be addressed in a later article.

Definitions

As with all pieces of technical writing, we need to explain some of the terms we're going to use in this paper:

Casual Players: Players who usually only purchase or play 1-4 new games a year, only own one or two consoles, with one possibly being a Wii. This is meant to, basically, be the people who play Madden, Call of Duty, or Farmville to the exclusivity of most other games, and occasionally pick a game out of the comfort zone every now and then. These are, to a certain extent, our gateway gamers. These gamers generally play on easy, though they may occasionally try Normal or Hard difficulty if they play a game regularly

Experienced Gamers: Players who purchase a video game 1-2 months, or rent a game every month or more. These players may in particular be GameFly subscribers, particularly since Blockbuster is closing down and Hollywood Video is gone. They do not necessarily complete those games every time, nor do they 100% complete them.

Hardcore gamers: Players who purchase or rent several video games a month, regularly play on hard difficulty and often on multi-player. They may also attempt to achieve all trophies or achievements for that game.

In short, the ideal situation with game difficulty is that a casual player should be able to get through the single player campaign on easy and should be able to get all of the game's story and a proper ending. This does not, however, mean that players shouldn't run into any difficulty. However, the level of difficulty should not be frustrating.

Character Death

One of the common stumbling blocks in a game experience is character death. Any immersion that player experiences in the game is lost the moment he or she dies and winds up at a loading screen. Loading screens themselves break up immersion, but that isn't related to difficulty. Consequently, death in games should be minimal. However, the player should feel that their character is in peril.

So, as a general rule of thumb, players should, if they're playing well, only experience player death one or two times at their ideal difficulty setting Easy for casual gamers, Normal for experienced players, Hard or Expert for Hardcore gamers and so on. This is if they're playing well and basically using the play-style the developers have designed the game for sticking to cover and proceeding carefully for a stealth action game, that sort of thing.

Part of the key to managing character death is also managing character health. There are two real ways to handle this a regenerating health bar, and a replenishing health bar that is re-stocked by use of first aid kits and similar items. Both methods have their advantages, while both methods have their advantages, a replenished health bar has one distinct weakness if you have low health when you reach a checkpoint, it becomes much more difficult to reach the next checkpoint and increasing the regularity of checkpoints isn't necessarily a solution



There are several possible solutions to this problem. The first is to have the character automatically respawn with full health and, depending on the difficulty, full ammunition while dying. This method would, in theory, relieve the brick wall factor of encountering a tough point in the game, being unable to progress due to lack of resources at a checkpoint, and ultimately feeling like you, the player, are repeatedly slamming their head up against a brick wall.

Another method would be through drops - most, though not all games will have enemies drop replacement weapons and ammunition when they die. The idea behind this is that if the character runs out of ammo for his or her primary weapon, there are other weapons lying around for the player to mitigate the brick wall factor. This can be expanded for games with replenishing health by having enemies drop health items as well which the character's health drops below a certain percentage. The frequency of drops would be adjusted with difficulty. First Person Shooter/Role Playing Game hybrid Borderlands does something similar to this.

What should change when the game gets harder?

Part of managing difficulty to make games more accessible is figuring out what, precisely, changes as the game gets harder. It's easy to make the player's guns weaker, the enemy's guns stronger (until the player picks one up), or give the enemy more health. It's also cheap. It takes the skill out of higher difficulties and instead makes it a battle of attrition at, ultimately, who can bang their head against the wall until they break through.

There is a better way to limit the player's resources, and to make enemies fight smarter, instead of harder. By limiting the amount of ammunition and, in the case of games with replenishing health, health power-ups available to players. This way players will have to use more care and skill in continuing through the game. This is ideal for games which feature a more cautious play-style, like the Rainbow Six and Ghost Recon games, as well as the Call of Duty series.

Making enemies fight smarter instead of harder requires a little more work. Making enemies omnipotent and essentially giving them an aimbot doesn't work. It makes the game less fun for players. Instead, they should intelligently use cover and work to flank the player, and make him or her work at advancement. That said, in order for this method to work, this also means that you cannot send a string of endlessly respawning enemies at the player from out of nowhere. Call of Duty, this means you.

A few final notes - don't add unkillable enemies to your game if you can at all avoid it. One of the problems with Dead Space is the player's second fight against the Hunter essentially consisted of fending off endlessly respawning hordes of enemies plus the Hunter, while waiting for a door to unlock. This was very much an exercise in frustration. If you do want to have some sort of named, Nemesis-esque enemy in your game to save for the conclusion, then have it so the players can drive the enemy off instead of just killing it. While this does remove some of the tension from the enemy's appearances in the game, it also removes frustration. Remember death destroys immersion.

Finally, have an option so the player can change the difficulty on the fly. The only thing more frustrating then repeated death is realizing that you're on the wrong difficulty halfway through, and you'll have to start the whole game over.

Later this week there will be a follow-up column with a few thoughts on making fighting games a little more accessible, without relying on button mashing, and then this Saturday this author will be covering a Super Street Fighter 4 tournament at Ground Kontrol in Portland, and the tournament will be streamed live over Ustream, for those who are interested in that sort of thing.
Admin · 18 vistas · Escribir un comentario
21 Avr 2016 

Xbox.com - Official Site | Xbox Canada


', prevArrow: '' ; ; $('.slick-console-scroller').ready(function () $('.slick-console-scroller').slick( // Console Rotator methods dots: false, arrows: false, autoplay: false, slidesToShow: 3, lazyLoad: 'ondemand', nextArrow: '', prevArrow: '', responsive: [ breakpoint: 768, settings: slidesToShow: 1, arrows: true, dots: true, autoplay: true, autoplaySpeed: 5000 ] ); ); $(document).ready(function () $('.news-rotator').slick( // News Rotator methods infinite: true, lazyLoad: 'ondemand', centerMode: true, slidesToShow: 1, dots: true, arrows: true, asNavFor: '.news-rotator-copy', nextArrow: '', prevArrow: '', responsive: [ breakpoint: 768, settings: centerMode: false ] ); $('.news-rotator-copy').slick( // News Rotator lower content section methods infinite: true, centerMode: true, slidesToShow: 1, dots: false, arrows: false, fade: true, adaptiveHeight: true, asNavFor: '.news-rotator' ); ); $(window).load(function () $(".lazyloadimage").each(function () if ($(this).attr("src").indexOf("data:") === 0) setTimeout($(this).attr("src", $(this).attr("data-src")), 25); ); );




Admin · 14302 vistas · Escribir un comentario
21 Avr 2016 

Why We Love Watch Dogs: A Video Game Review

The upcomingopen world action-adventure stealth game Watch Dogs, developed by Ubisoft for the PS3, Xbox 360, Wii U, PS4, and Xbox One, centers on the concept of information warfare, a truly fresh notion. Watch Dogs is set in a future Chicago enhanced and transformed by the Central Operating System (CtOS), a supercomputer which links all of the cities's infrastructure, banks, communications, and public security installations to one central hub. The supercomputer also contains information on Chicago's citizens. Though the CtOS has been highly beneficial to these citizens, it also makes the entire city vulnerable to exploitation by skilled computer hackers.

In the game the player takes control of just one such hacker, a former thug named Aiden Pearce, who can stealthily control the CtOS from a smartphone in the palm of his hand, accessing security cameras, stealing personal information, and controlling traffic lights as well as public transportation. In practice this allows Pearce to come out on top by causing distractions, escaping crime scenes, and even using his environment as a weapon. In a given assassination he can discreetly locate his target, trap him in a massive vehicle pileup, and can thenevade law enforcement bystopping and boarding a train or byquickly game cheats raising a bridge.



Of course an ability to hack the CtOS is not the only tool in Pearce's arsenal. Ubisoft Montreal's parternship with Ubisoft Reflections (the developers behing the award-winning Driver series) has given Watch Dogs a suite of more than 65 sleek and powerful vehicles. Pearce can of course break into cars with the greatest ease, providing the player with a rich variety of driving experiences as they race around in the streets of Chicago, pursuing targets or evading pursuers themselves.

In addition, Pearce is fully capable of bringing the fight to his enemies with an assortment of more than 30 weapons. Shaped by his crime days and desperate to protect his endangered family, already the victims of past violence, Pearce does not always need to rely on stealth to inflict his brand of justice on a corrupt system. Delivering devastating baton blows and engaging in thrillingly immersive shoot outs has never looked better than in Watch Dogs. Combat seemlessly blends stealth, parkour, and the mechanics of a cover-based third-person shooter.

Overall, Watch Dogs features an original storyline concept bundled in some truly amazing graphics.The new Disrupt Engine (Ubisoft's first next-gen engine was built specifically for the game) and Havok physics grant the player a fluid, dynamic world rendered with stunning realism, as well as allowing the same core game experience on each platform.Though these graphs will look particularly good on the next generation of consoles, the game was designed to be played on the PS3 and Xbox 360 with little sacrifice to the playing experience. With the fresh gameplay revealed at E3 2013, we are left to eagerly await Watch Dogs' 19 November 2013 release date (for North America).

for another "We Love" video game review, please see



Admin · 24 vistas · Escribir un comentario
21 Avr 2016 

Build Your First Game With HTML5



HTML5 is growing up faster than anyone could have imagined. Powerful and professional solutions are already being developed...even in the gaming world! Check out the hundreds ofHTML5 games on Envato Market.

Today, you'll make your first game using Box2D and HTML5's canvas tag.

What is Box2D?

Box2D is an open source and popular engine that simulates 2D physics for making games and applications. Primarily written in C++, it has been converted to numerous languages by community contributors.



With the same methods and objects, you have the ability to make your games' physics in many languages, such as Objective C (iPhone/iPad), Actionscript 3.0 (Web), HTML 5 (Web), etc.

Step 1 - Setting up your Project

To begin developing your demo, download the Box2D engine for HTML5 here. Next, create a new HTML file with the following structure (copy js and lib directories from box2d-js project to your game folder).



Now, you must insert the necessary files to run box2D into your HTML file:

<!--[if IE]><script src="lib/excanvas.js"></script><![endif]--> <script src="lib/prototype-1.6.0.2.js"></script> <!-- box2djs --> <script src='js/box2d/common/b2Settings.js'></script> <script src='js/box2d/common/math/b2Vec2.js'></script> <script src='js/box2d/common/math/b2Mat22.js'></script> <script src='js/box2d/common/math/b2Math.js'></script> <script src='js/box2d/collision/b2AABB.js'></script> <script src='js/box2d/collision/b2Bound.js'></script> <script src='js/box2d/collision/b2BoundValues.js'></script> <script src='js/box2d/collision/b2Pair.js'></script> <script src='js/box2d/collision/b2PairCallback.js'></script> <script src='js/box2d/collision/b2BufferedPair.js'></script> <script src='js/box2d/collision/b2PairManager.js'></script> <script src='js/box2d/collision/b2BroadPhase.js'></script> <script src='js/box2d/collision/b2Collision.js'></script> <script src='js/box2d/collision/Features.js'></script> <script src='js/box2d/collision/b2ContactID.js'></script> <script src='js/box2d/collision/b2ContactPoint.js'></script> <script src='js/box2d/collision/b2Distance.js'></script> <script src='js/box2d/collision/b2Manifold.js'></script> <script src='js/box2d/collision/b2OBB.js'></script> <script src='js/box2d/collision/b2Proxy.js'></script> <script src='js/box2d/collision/ClipVertex.js'></script> <script src='js/box2d/collision/shapes/b2Shape.js'></script> <script src='js/box2d/collision/shapes/b2ShapeDef.js'></script> <script src='js/box2d/collision/shapes/b2BoxDef.js'></script> <script src='js/box2d/collision/shapes/b2CircleDef.js'></script> <script src='js/box2d/collision/shapes/b2CircleShape.js'></script> <script src='js/box2d/collision/shapes/b2MassData.js'></script> <script src='js/box2d/collision/shapes/b2PolyDef.js'></script> <script src='js/box2d/collision/shapes/b2PolyShape.js'></script> <script src='js/box2d/dynamics/b2Body.js'></script> <script src='js/box2d/dynamics/b2BodyDef.js'></script> <script src='js/box2d/dynamics/b2CollisionFilter.js'></script> <script src='js/box2d/dynamics/b2Island.js'></script> <script src='js/box2d/dynamics/b2TimeStep.js'></script> <script src='js/box2d/dynamics/contacts/b2ContactNode.js'></script> <script src='js/box2d/dynamics/contacts/b2Contact.js'></script> <script src='js/box2d/dynamics/contacts/b2ContactConstraint.js'></script> <script src='js/box2d/dynamics/contacts/b2ContactConstraintPoint.js'></script> <script src='js/box2d/dynamics/contacts/b2ContactRegister.js'></script> <script src='js/box2d/dynamics/contacts/b2ContactSolver.js'></script> <script src='js/box2d/dynamics/contacts/b2CircleContact.js'></script> <script src='js/box2d/dynamics/contacts/b2Conservative.js'></script> <script src='js/box2d/dynamics/contacts/b2NullContact.js'></script> <script src='js/box2d/dynamics/contacts/b2PolyAndCircleContact.js'></script> <script src='js/box2d/dynamics/contacts/b2PolyContact.js'></script> <script src='js/box2d/dynamics/b2ContactManager.js'></script> <script src='js/box2d/dynamics/b2World.js'></script> <script src='js/box2d/dynamics/b2WorldListener.js'></script> <script src='js/box2d/dynamics/joints/b2JointNode.js'></script> <script src='js/box2d/dynamics/joints/b2Joint.js'></script> <script src='js/box2d/dynamics/joints/b2JointDef.js'></script> <script src='js/box2d/dynamics/joints/b2DistanceJoint.js'></script> <script src='js/box2d/dynamics/joints/b2DistanceJointDef.js'></script> <script src='js/box2d/dynamics/joints/b2Jacobian.js'></script> <script src='js/box2d/dynamics/joints/b2GearJoint.js'></script> <script src='js/box2d/dynamics/joints/b2GearJointDef.js'></script> <script src='js/box2d/dynamics/joints/b2MouseJoint.js'></script> <script src='js/box2d/dynamics/joints/b2MouseJointDef.js'></script> <script src='js/box2d/dynamics/joints/b2PrismaticJoint.js'></script> <script src='js/box2d/dynamics/joints/b2PrismaticJointDef.js'></script> <script src='js/box2d/dynamics/joints/b2PulleyJoint.js'></script> <script src='js/box2d/dynamics/joints/b2PulleyJointDef.js'></script> <script src='js/box2d/dynamics/joints/b2RevoluteJoint.js'></script> <script src='js/box2d/dynamics/joints/b2RevoluteJointDef.js'></script>

Yep, that's a huge number of HTTP requests!

Please note that, for deployment, it's highly recommended that you concatenate all of these resources into one script file.



Next, create two more scripts inside the /js/ folder, called "box2dutils.js" and "game.js".

box2dutils.js - it's a copy and paste from some demos that come with box2dlib, and is important for drawing functions (I will also explain some important parts here). game.js - the game, itself; this is where we create the platforms, the player, apply the keyboard interactions, etc.

Copy and paste the following code into box2dutils.js. Don't worry! I'll explain it bit by bit!

function drawWorld(world, context) for (var j = world.m_jointList; j; j = j.m_next) drawJoint(j, context); for (var b = world.m_bodyList; b; b = b.m_next) for (var s = b.GetShapeList(); s != null; s = s.GetNext()) drawShape(s, context); function drawJoint(joint, context) var b1 = joint.m_body1; var b2 = joint.m_body2; var x1 = b1.m_position; var x2 = b2.m_position; var p1 = joint.GetAnchor1(); var p2 = joint.GetAnchor2(); context.strokeStyle = '#00eeee'; context.beginPath(); switch (joint.m_type) case b2Joint.e_distanceJoint: context.moveTo(p1.x, p1.y); context.lineTo(p2.x, p2.y); break; case b2Joint.e_pulleyJoint: // TODO break; default: if (b1 == world.m_groundBody) context.moveTo(p1.x, p1.y); context.lineTo(x2.x, x2.y); else if (b2 == world.m_groundBody) context.moveTo(p1.x, p1.y); context.lineTo(x1.x, x1.y); else context.moveTo(x1.x, x1.y); context.lineTo(p1.x, p1.y); context.lineTo(x2.x, x2.y); context.lineTo(p2.x, p2.y); break; context.stroke(); function drawShape(shape, context) context.strokeStyle = '#000000'; context.beginPath(); switch (shape.m_type) case b2Shape.e_circleShape: var circle = shape; var pos = circle.m_position; var r = circle.m_radius; var segments = 16.0; var theta = 0.0; var dtheta = 2.0 * Math.PI / segments; // draw circle context.moveTo(pos.x + r, pos.y); for (var i = 0; i < segments; i++) var d = new b2Vec2(r * Math.cos(theta), r * Math.sin(theta)); var v = b2Math.AddVV(pos, d); context.lineTo(v.x, v.y); theta += dtheta; context.lineTo(pos.x + r, pos.y); // draw radius context.moveTo(pos.x, pos.y); var ax = circle.m_R.col1; var pos2 = new b2Vec2(pos.x + r * ax.x, pos.y + r * ax.y); context.lineTo(pos2.x, pos2.y); break; case b2Shape.e_polyShape: var poly = shape; var tV = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices[0])); context.moveTo(tV.x, tV.y); for (var i = 0; i < poly.m_vertexCount; i++) var v = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices[i])); context.lineTo(v.x, v.y); context.lineTo(tV.x, tV.y); break; context.stroke(); function createWorld() var worldAABB = new b2AABB(); worldAABB.minVertex.Set(-1000, -1000); worldAABB.maxVertex.Set(1000, 1000); var gravity = new b2Vec2(0, 300); var doSleep = true; var world = new b2World(worldAABB, gravity, doSleep); return world; function createGround(world) var groundSd = new b2BoxDef(); groundSd.extents.Set(1000, 50); groundSd.restitution = 0.2; var groundBd = new b2BodyDef(); groundBd.AddShape(groundSd); groundBd.position.Set(-500, 340); return world.CreateBody(groundBd) function createBall(world, x, y) var ballSd = new b2CircleDef(); ballSd.density = 1.0; ballSd.radius = 20; ballSd.restitution = 1.0; ballSd.friction = 0; var ballBd = new b2BodyDef(); ballBd.AddShape(ballSd); ballBd.position.Set(x,y); return world.CreateBody(ballBd); function createBox(world, x, y, width, height, fixed, userData) if (typeof(fixed) == 'undefined') fixed = true; var boxSd = new b2BoxDef(); if (!fixed) boxSd.density = 1.0; boxSd.userData = userData; boxSd.extents.Set(width, height); var boxBd = new b2BodyDef(); boxBd.AddShape(boxSd); boxBd.position.Set(x,y); return world.CreateBody(boxBd) Step 2 - Developing the Game

Open the index.html file that you previously created, and add a canvas element (600x400) within the body element. This is where we'll work with the HTML5 drawing API:

<canvas id="game" width='600' height='400'></canvas>

Also, while you're here, reference game.js and box2dutils.js.

<script src='js/box2dutils.js'></script> <script src='js/game.js'></script>

That'll do it for the HTML! Let's work on the fun JavaScript now!

Open game.js, and insert the code below:

// some variables that we gonna use in this demo var initId = 0; var player = function() this.object = null; this.canJump = false; ; var world; var ctx; var canvasWidth; var canvasHeight; var keys = []; // HTML5 onLoad event Event.observe(window, 'load', function() world = createWorld(); // box2DWorld ctx = $('game').getContext('2d'); // 2 var canvasElm = $('game'); canvasWidth = parseInt(canvasElm.width); canvasHeight = parseInt(canvasElm.height); initGame(); // 3 step(); // 4 // 5 window.addEventListener('keydown',handleKeyDown,true); window.addEventListener('keyup',handleKeyUp,true); );Box2DWorld - that's why we're here

Okay, let's figure out what this chunk of code does!

Box2DWorld is one of the classes that is made available, via the core of box2d. Its function is simple: combine everything into one class. In box2DWorld, you have the bodies definition and collisions manager of your game or application.

Keep the game.js and box2dutils.js files open, and search for the createWorld() function within box2dutils.js.

function createWorld() // here we create our world settings for collisions var worldAABB = new b2AABB(); worldAABB.minVertex.Set(-1000, -1000); worldAABB.maxVertex.Set(1000, 1000); // set gravity vector var gravity = new b2Vec2(0, 300); var doSleep = true; // init our world and return its value var world = new b2World(worldAABB, gravity, doSleep); return world;

It's quite simple to create the box2DWorld.

Back to game.js

Refer to the commented numbers in the two blocks of code above. On number two, we retrieve the canvas element's context by using the selector API (looks like jQuery or MooTools selectors, don't they?). On number three, we have a new interesting function: initGame(). This is where we create the scenery.

Copy and paste the code below into game.js, and then we'll review it together.

function initGame() // create 2 big platforms createBox(world, 3, 230, 60, 180, true, 'ground'); createBox(world, 560, 360, 50, 50, true, 'ground'); // create small platforms for (var i = 0; i < 5; i++) createBox(world, 150+(80*i), 360, 5, 40+(i*15), true, 'ground'); // create player ball var ballSd = new b2CircleDef(); ballSd.density = 0.1; ballSd.radius = 12; ballSd.restitution = 0.5; ballSd.friction = 1; ballSd.userData = 'player'; var ballBd = new b2BodyDef(); ballBd.linearDamping = .03; ballBd.allowSleep = false; ballBd.AddShape(ballSd); ballBd.position.Set(20,0); player.object = world.CreateBody(ballBd); <p> Inside <code>box2dutils.js</code>, we've created a function, called <code>createBox</code>. This creates a static rectangle body. </p> function createBox(world, x, y, width, height, fixed, userData) if (typeof(fixed) == 'undefined') fixed = true; //1 var boxSd = new b2BoxDef(); if (!fixed) boxSd.density = 1.0; //2 boxSd.userData = userData; //3 boxSd.extents.Set(width, height); //4 var boxBd = new b2BodyDef(); boxBd.AddShape(boxSd); //5 boxBd.position.Set(x,y); //6 return world.CreateBody(boxBd) Box2DBody

A Box2DBody has some unique characteristics:

It can be static (not affected by collisions impacts), kinematic (it isn't affected by collisions, but it can be moved by your mouse, for example), or dynamic (interacts with everything) Must have a shape definition, and should indicate how the object appears May have more than one fixture, which indicates how the object will interact with collisions Its position is set by the center of your object, not the left top edge as many other engines do. Reviewing the code:Here, we create one shape definition that will be a square or rectangle, and setup its density (how often it gonna be moved, or rotate by forces). We setup the userData, usually you setup graphics objects here, but in this example, I just setup strings that will be the identifier of the type of the object for collisions. This parameter doesn't affect physics algorithms. Setup half of the size of my box (it's a line from the position point, or the center point of the object to a corner) We create the body definition, and add to it the box shape definition. Setup the position. Create the body in the world and return its value. Creating the Player Ball Body

I've coded the player (ball) directly in the game.js file. It follows the same sequence of creating boxes, but, this time, it's a ball.

var ballSd = new b2CircleDef(); ballSd.density = 0.1; ballSd.radius = 12; ballSd.restitution = 0.5; ballSd.friction = 1; ballSd.userData = 'player'; var ballBd = new b2BodyDef(); ballBd.linearDamping = .03; ballBd.allowSleep = false; ballBd.AddShape(ballSd); ballBd.position.Set(20,0); player.object = world.CreateBody(ballBd);

So how do we create a body, step by step?

Create the shape, fixture and sensor definition Create the body definition Add into the body your shape, fixtures or sensors (not explained in this article) Create the body in the world Box2DCircle

As I noted earlier, this follows the same creation process of a box, but now you must set some new parameters.

radius - This is the length of a line from the center of the circle to any point on its edge. restitution - How the ball will lose, or gain force when collides with other body. friction - How the ball will roll. Box2DBody - More Propertiesdamping is used to reduce the velocity of the body - there's angular damping and linear damping. sleep in box2D, bodies can sleep to solve performance issues. For example, let's suppose you are developing a platform game, and the level is defined by a 6000x400 screen. Why do you need to perform physics for objects that are off screen? You don't; that's the point! So the correct choice is to put them to sleep, and improve your game's performance.

We've already created our world; you can test the code that you have so far. You'll see the player falling above the west platform.

Now, if you tried to run the demo, you should be wondering, why is the page as barren as white paper?



Always remember: Box2D doesn't render; it only calculates physics.

Step 3 - Rendering Time

Next, let's render the box2DWorld.

Open your game.js script, and add the following code:

function step() var stepping = false; var timeStep = 1.0/60; var iteration = 1; // 1 world.Step(timeStep, iteration); // 2 ctx.clearRect(0, 0, canvasWidth, canvasHeight); drawWorld(world, ctx); // 3 setTimeout('step()', 10); What we accomplish here:Instructed box2dWorld to perform physics simulations Cleared canvas screen and draw again Execute the step() function again in ten milliseconds

With this bit of code, we are now working with physics and drawing. You can test yourself, and watch for a falling ball, as demonstrated below:

drawWorld in box2dutils.jsfunction drawWorld(world, context) for (var j = world.m_jointList; j; j = j.m_next) drawJoint(j, context); for (var b = world.m_bodyList; b; b = b.m_next) for (var s = b.GetShapeList(); s != null; s = s.GetNext()) drawShape(s, context);

What we've written above is a debug function that draws our world into the canvas, using the graphics API provided by HTML5's Canvas API.

The first loop draws all joints. We didn't use joints in this article. They are a bit complex for a first demo, but, nonetheless, they're essential for your games. They allow you to create very interesting bodies.

The second loop draws all bodies, which is why we're here!

function drawShape(shape, context) context.strokeStyle = '#000000'; context.beginPath(); switch (shape.m_type) case b2Shape.e_circleShape: var circle = shape; var pos = circle.m_position; var r = circle.m_radius; var segments = 16.0; var theta = 0.0; var dtheta = 2.0 * Math.PI / segments; // draw circle context.moveTo(pos.x + r, pos.y); for (var i = 0; i < segments; i++) var d = new b2Vec2(r * Math.cos(theta), r * Math.sin(theta)); var v = b2Math.AddVV(pos, d); context.lineTo(v.x, v.y); theta += dtheta; context.lineTo(pos.x + r, pos.y); // draw radius context.moveTo(pos.x, pos.y); var ax = circle.m_R.col1; var pos2 = new b2Vec2(pos.x + r * ax.x, pos.y + r * ax.y); context.lineTo(pos2.x, pos2.y); break; case b2Shape.e_polyShape: var poly = shape; var tV = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices[0])); context.moveTo(tV.x, tV.y); for (var i = 0; i < poly.m_vertexCount; i++) var v = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices[i])); context.lineTo(v.x, v.y); context.lineTo(tV.x, tV.y); break; context.stroke();

We're looping through every vertices of the object and drawing it with lines (context.moveTo and context.lineTo). Now, it's useful to have an example... but not so useful in practice. When you use graphics, you only need to pay attention to the bodies' positioning. You don't need to loop vertices, as this demo does.

Step 4 - Interactivity

A game without interactivity is a movie, and a movie with interactivity is a game.



Let's develop the keyboard arrow functionality to jump and move the ball.

Add the following code to your game.js file:

function handleKeyDown(evt) keys[evt.keyCode] = true; function handleKeyUp(evt) keys[evt.keyCode] = false; // disable vertical scrolling from arrows :) document.onkeydown=function()return event.keyCode!=38 && event.keyCode!=40

With handleKeyDown and handleKeyUp, we setup an array which tracks every key the user types. With document.onkeydown, we disable the browser's native vertical scrolling function for up and down arrows. Have you ever played an HTML5 game, and when you jump, the player, enemies and objects go off screen? That won't be an issue now.

Add this next bit of code to the beginning of your step() function:

handleInteractions();

And outside, declare the function:

function handleInteractions() // up arrow // 1 var collision = world.m_contactList; player.canJump = false; if (collision != null) if (collision.GetShape1().GetUserData() == 'player' // 2 var vel = player.object.GetLinearVelocity(); // 3 if (keys[38] && player.canJump) vel.y = -150; // 4 // left/right arrows if (keys[37]) vel.x = -60; else if (keys[39]) vel.x = 60; // 5 player.object.SetLinearVelocity(vel);

The most complicated piece of the code above is the first one, where we check for a collision, and write some conditions to determine if the shape1 or the shape2 is the player. If it is, we verify if shape1 or shape2 is a ground object. Again, if so, the player is colliding with the ground. Next, we check if the player is above the ground. If that's the case, then the player can jump.

On the second commented line (2), we retrieve the LinearVelocity of the player.

The third and forth commented regions verify if arrows are being pressed, and adjust the velocity vector, accordingly.

In the fifth region, we setup the player with the new velocity vector.

The interactions are now done! But there's no objective, We just jump, jump, jump and jump!

Step 5 - "You Win" Message

Add the code below to the beginning of your LinearVelocity function:

if (player.object.GetCenterPosition().y > canvasHeight) player.object.SetCenterPosition(new b2Vec2(20,0),0) else if (player.object.GetCenterPosition().x > canvasWidth-50) showWin(); return; The first condition determines if the player falls, and should be transported back to the start point (above the west platform). The second condition checks if the player is above the second platform, and won the game. Here's the showWin() function. function showWin() ctx.fillStyle = '#000'; ctx.font = '30px verdana'; ctx.textBaseline = 'top'; ctx.fillText('Ye! you made it!', 30, 0); ctx.fillText('thank you, andersonferminiano.com', 30, 30); ctx.fillText([email protected]', 30, 60);

And that's it! You've just completed your first simple game with HTML5 and Box2D. Congratulations!

If you need a simpler solution, you could check out the selection of HTML5 games on Envato Market, many of which come with source code for you to investigate and customize to fit your own needs.

Admin · 7424 vistas · Escribir un comentario

1, 2  Página siguiente