I write a demo mapview in Titanium (iPhone). Here's the code I get from KitchenSink:
var win = Titanium.UI.currentWindow;
var annotation = Titanium.Map.createAnnotation({
latitude:42.334537,
longitude:-71.170101,
title:"Boston College",
subtitle:'Newton Campus, Chestnut Hill, MA',
animate:true,
leftButton:'../images/atlanta.jpg'
});
var boston = {latitude:42.334537,longitude:-71.170101,latitudeDelta:0.010, longitudeDelta:0.018};
//
// CREATE MAP VIEW
//
var mapview = Titanium.Map.createView({
mapType: Titanium.Map.STANDARD_TYPE,
region: boston,
animate:true,
regionFit:true,
userLocation:true,
annotations:[annotation]
});
win.add(mapview);
It runs well on both iPhone Simulator as well as in real phone.
The problem is, when I catch event 'regionChanged', the map region is wrong. My code is:
var win = Titanium.UI.currentWindow;
var annotation = Titanium.Map.createAnnotation({
latitude:42.334537,
longitude:-71.170101,
title:"Boston College",
subtitle:'Newton Campus, Chestnut Hill, MA',
animate:true,
leftButton:'../images/atlanta.jpg'
});
var boston = {latitude:42.334537,longitude:-71.170101,latitudeDelta:0.010, longitudeDelta:0.018};
//
// CREATE MAP VIEW
//
var mapview = Titanium.Map.createView({
mapType: Titanium.Map.STANDARD_TYPE,
region: boston,
animate:true,
regionFit:true,
userLocation:true,
annotations:[annotation]
});
win.add(mapview);
// map view click event listener
mapview.addEventListener('regionChanged',function(evt)
{
});
In this event, I even didn't write anything. In Simulator, it works well as the first case, but in real phone, the map zoom level is suddenly maximum. Although I set latitudeDelta=1, the zoom level of map is still zoom-in maximum as if latitudeDelta=0.001.
So, what's the root of this bug? Anyone can help me?
OK. I found the root of this bug. Just need to set regionFit:true and zoom level of map is correct.
Related
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;
this.scale.refresh();
Its a tiny game code which I have uploaded on http://scaleissue.site44.com/ so pls use browser dev tools to have a look.
As you will notice when u go to dev tools and choose mobile emulation (iphone 4, 5, 6 - landscape orientation only), the screen only shows the top-left corner of the actual game with scroll bars when in fact it should have scaled the game such that all of the game was being shown on the screen since I used
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
(you might have to reload page to notice this issue when in dev tools). I tried the game on real mobile and still the same issue.
All relevant scaling code is under boot.js
Please help as I cant quite nail the issue having tried several scaling modes.
You can try to resize the canvas:
var width=window.innerWidth,
height=window.innerHeight,
dpr=window.devicePixelRatio || 1;
var game = window.game[NAMESPACE].game = new Phaser.Game(1024, 480, Phaser.AUTO, 'gameDiv');
var mainState = {
preload : function () {
game.scale.scaleMode = Phaser.ScaleManager.RESIZE ;
//game.canvas.style.width=width+'px';
game.canvas.style.height=height+'px';
},
create : function () {
this.stage.backgroundColor = '#0000db';
},
update : function () {}
};
//initialising Phaser
game.state.add('main', mainState);
game.state.start('main');
The rationale behind this code: The canvas.width value (which is a number) sets the size of the game, while the canvas.style.width value (which is a string) sets the size of the canvas element. To avoid deformations you should maintain the same ratio (in your case, the ratio is 1024/480) in both values. If you set the ScaleManager as RESIZE then this ratio is maintained automatically, that's the reason why I'm only setting the height.
I'm new to phaser, and for the past few days I've been trying to make a really simple game, platformer-style, where the player must navigate to certain areas before being able to exit the level.
I have the basics running, but now I can't seem to figure out how to check if the player is in those areas.
The relevant part of the code so far is as follows:
var game = new Phaser.Game(800, 600, Phaser.AUTO, "mygame", {
preload: preload,
create: create,
update: update,
render: render
});
function preload() {
game.load.tilemap("questMap", "assets/quest.json", null, Phaser.Tilemap.TILED_JSON);
game.load.image("tilesheet", "assets/tilesheet.png");
game.load.image("npc", "assets/npc.png");
game.load.spritesheet("player", "assets/player.png", 64, 64);
}
var map;
var tileset;
var groundBg;
var props;
var houses;
var houseProps;
var npc;
var ground;
var areas;
var player;
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
game.stage.backgroundColor = "#A8DBFF";
map = game.add.tilemap("questMap");
map.addTilesetImage("tilesheet");
map.addTilesetImage("npc");
ground = map.createLayer("ground");
groundBg = map.createLayer("groundbg");
props = map.createLayer("props");
houses = map.createLayer("houses");
houseProps = map.createLayer("houseprops");
npc = map.createLayer("npc");
map.setCollisionBetween(1, 5000);
ground.resizeWorld();
Not too pretty, I know.
I've created the map with tiled and there are a lot of small props and decorative tiles, hence the multiple "map.createLayer()" calls. The only one with collision is the ground layer.
Now, on my Tiled file, I've created an Object layer and drawn small rectangles on the areas I want to check if the player is in. I thought this was going to be an easy process but I can't seem to figure out how to load those areas into Phaser, and then check if the player is within bounds.
Googling has given me some results, but none seem to fit, as they usually cover how to add a sprite to an object, which in this case does not apply.
I simply need that small area to exist and check if the player is there. I've also given names to each of those rectangles in Tiled, via the custom properties tab.
I would try using a transparent image as the area you wish to check if your sprite is over and use
if(sprite1.overlap(transparentImage)){
//do something
}
I have been going over the examples and demos of Famo.us, in particular the menus. In the examples such as taasky, timbre etc. the side menu is made up of MenuItemViews. Each MenuItemView comprises of a background, icon and title - each one a surface.
In order to make each menu item 'clickable' do I have to add an .click to each of the 3 surfaces that make up the MenuItemView and emit an event handler?
Or is there an easier way to make each menu item 'clickable'?
Thanks for your help in advance :)
Yes, what you want to do is pipe your surface events to the Views _eventOutput handler. This way the click event only needs to be defined on the view itself.
In this example there are two surfaces that each pipe all events to _eventOutput of view. When we click either surface, the views click event is triggered
Hope this helps!
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var View = require('famous/core/View');
var context = Engine.createContext();
var view = new View();
var surface1 = new Surface({
size:[400,400],
properties:{
backgroundColor:'green'
}
});
surface1.pipe(view._eventOutput);
view.add(surface1);
var surface2 = new Surface({
size:[200,200],
properties:{
backgroundColor:'red'
}
});
surface2.pipe(view._eventOutput);
view.add(surface2);
view.on('click',function(evt){
console.log("View Clicked!");
})
context.add(view);
I'm experimenting with Snap in order to use svg and need to be able to use the Maki icons defined in https://github.com/mapbox/maki.
My plan is to load the svg's I need, and then instantiate them for particular icons on a piece of Snap paper. But in order for this to work, I need to place the icon at a particular place on the paper, but I can't get translation to work. Neither one of the translation techniques below works; the code works as is, but always places the icon at the top left.
What am I missing? There's not enough documentation on Snap, and I don't know if the problem is with the way the Maki icon svg is defined, or my use of Snap.
var icon = Snap.load("maki/bicycle-24.svg", function(f) {
var g = f.select("g").clone();
// var g = f.select("#layer1").clone(); // also works
// g.transform("t120,120");
// var t = new Snap.Matrix();
// t.translate(120,120);
// g.transform(t);
paper.append(g);
});
The cloning needs to happen after the append, as when loading an svg in Snap its just a fragment.
So you will need to do something like...
paper.append(f);
var element = paper.select('#someId').clone();
element.transform( myTransform );
Thank you! That did the trick! And since Snap is so poorly documented, I'm going to insert the code here that allows a general solution.
// Base set from which markers are constructed
var iconSet = paper.group();
iconSet.attr({ class: 'hide' });
// Instantiations of icons
var markers = paper.g();
// Now, create SVG shape
var icon = Snap.load("maki/bicycle-24.svg", function(icon) {
// Add it to the icon set
iconSet.append(icon);
// Instantiate it and remove from main view
var element = paper.select('#svg4460'); // Copies it!
// var element = paper.select('#base'); // Selects something but doesn't work
// var element = paper.select('#layer1'); // Selects something but doesn't work
// var element = paper.select('#bicycle-24'); // Silent fail
element = element.clone();
element.remove();
// Clone this icon and move it
var t = new Snap.Matrix();
t.translate(10,120);
element.transform(t);
// Insert into main document view (markers)
markers.add(element);
});
On my spotify app, if I click on player to play track, the track is highlighted in the list-view. But when I click on the next button of spotify the next track in the list-view is not highlighted, even when it is being played...the highlighting is totally lost. And I do not know how to do it. It works if I just reload the app or I go on next tab. Can anyone guide me as how to fix this? Thanks in advance :-)
models.Track.fromURI(track, function(track) {
models.Album.fromURI(track.album.uri, function(album) {
var pl = new views.Player();
pl.context = album;
document.getElementById('imag').appendChild ( pl.node );
var tracklist = new views.List(album);
tracklist.node.classList.add("sp-list");
$("#song1").append(tracklist.node);
Your code should work without any problems, since you are using the same context for both
Player and List views. In fact, I have tested it and it works for me (note that I have added a couple of missing lines):
var sp = getSpotifyApi(),
models = sp.require("$api/models"),
views = sp.require("$api/views"),
track = "spotify:track:6G0RXhQJGDnjgUdbQfBZRk";
models.Track.fromURI(track, function(track) {
models.Album.fromURI(track.album.uri, function(album) {
var pl = new views.Player();
pl.context = album;
document.getElementById("imag").appendChild(pl.node);
var tracklist = new views.List(album);
tracklist.node.classList.add("sp-list");
document.getElementById("song1").appendChild(tracklist.node);
});
});