Tag: anchor

Update Method: Phaser

Update method is responsible for updating and re-drawing the game objects. Phaser by default will aim to run at 60 frames per second – that means, it updates your game 60 times per second, as long as its state is active.

Make sure to watch this video tutorial before continuing:
State Manager: Phaser

Video Tutorial List At One Place:
Phaser Video Tutorial List: Game Framework

In this video you’ll learn:
1. Update Method.
2. Image rotation.

Update Method And Image Rotation: Phaser


[youtube https://www.youtube.com/watch?v=x-nv9XngN_4]

YouTube Link: https://www.youtube.com/watch?v=x-nv9XngN_4 [Watch the Video In Full Screen.]



HTML File – index.html

< !DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="javascripts/library/phaser.js">
</script>
<script type="text/javascript" src="javascripts/Main.js">
</script>
</head>
<body>
 
<script type="text/javascript">
    var game = new Phaser.Game(400, 400, Phaser.AUTO);
    game.state.add('Main', Technotip.Main);
    game.state.start('Main');
</script>
</body>
</html>

This code remains same from our previous tutorial – State Manager: Phaser.

Javascript File – Main File

var Technotip = {};
 
Technotip.Main = function(game){
 
};
 
Technotip.Main.prototype = {
   preload: function(){
        this.load.image('org', '/images/logo1.png');
        this.load.image('com', '/images/logo2.jpg');
   },
   create: function(){
        this.add.sprite(10, 20, 'org');
        this.logo = this.add.sprite(100, 100, 'com');
        this.logo.anchor.set(0.5);
    },
    update: function(){
       this.logo.rotation += 0.01;
    }
};

In the create method, we reference second image(i.e., image with ‘com’ reference name) with a variable this.logo
We could set the anchor point of rotation using anchor.set() method.
If set to 0, it rotates with images right top corner as it’s rotating point.
If set to 0.5, it rotates with images center as the rotating point.
If set to 1, it rotates with the images left bottom corner as its rotating point.

Update Method
Update method is called 60 times per second – so in our code, the value of rotation property increments 0.01 x 60 times for every second. Update method keeps running until there is any logical termination or with the shutdown of the state.

Named Anchors In HTML – For Internal Linking

Often times we spend a lot of time and end up preparing a lengthy document thinking it will be helpful, but as a matter of fact people can’t scroll up and down to find what they are looking for – instead they will goto Google and search for some other sites.

In this situation “Named Anchors” are very helpful. This simple technique will make your miles long document more usable.

Here is a working example of Named Anchor: Clicking on Take Me To The End Of This Article will take you to the end of this article.

Here is how it works:
Imagine that you have a premium software and you have written a manual for Windows, Apple and Unix users on a single page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<html>
<head><title>My Software Manual</title>
</head>
<body>
 
<i>Index</i>
<a href="#microsoft">Windows 7 Manual</a>
<a href="#apple">Macintosh OS X Manual</a>
<a href="#unix">Unix/Linux Manual</a>
 
 
<i>Content</i>
1. <a name="microsoft">Windows 7</a>:  
Here you may write about the system requirement
for your software to work on Windows 7. 
And the amount of resources that your application 
is going to consume. Some tips and tricks. 
    Imagine its about 50 lines.
 
 
2. <a name="apple">Macintosh OS X</a>:  
Imagine there is about 500 lines of documentation 
about using your application on a Apple Macintosh.
 
3. <a name="unix">Unix/Linux</a>:   
Imagine there is about 1000 lines of documentation 
about using your application on a Apple Macintosh.
 
</body>
</html>

These lines of code(from about spinet) act as index.

1
2
3

<a href="#microsoft">Windows 7 Manual</a>
<a href="#apple">Macintosh OS X Manual</a>
<a href="#unix">Unix/Linux Manual</a>

When people click on Windows 7 Manual link in the index section, it takes them directly to the 1. Windows 7 paragraph(in the content section) without even reloading the page – as all the information present in that page has already been loaded.



Make sure you check this working example:
You can find a link at the top of this article – “Take Me To The End Of This Article”, clicking which you will end up here!