Oct 212013
 

A very gentle introduction to Lanica’s Platino Game Engine, showing how to comment and display an image.The code below will show you how to;

  • Make a single line comment
  • Make a comment block
  • Set up a basic game scene
  • Display an image
  • Set the scene to fill various resolutions
  • Launch the game

You can run this code by downloading Platino, installing Platino, and making sure that you require it as a module in Titanium Studio.

Make sure you add your own image to the “Resources” folder that is created when you start a new mobile project.

  1. // This is a comment
  2.  
  3. /* This
  4. is a multiline
  5. comment */
  6.  
  7. // Create a new window and make the app landscape
  8. var window = Ti.UI.createWindow({
  9. backgroundColor:'blue',
  10. orientationModes: [Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT]
  11. });
  12.  
  13. // Require Platino
  14. var platino = require("co.lanica.platino");
  15.  
  16. // Create a view for your game (game.screen.width and game.screen.height will be set only once the game is loaded)
  17. var game = platino.createGameView();
  18.  
  19. // Create a game scene
  20. var scene = platino.createScene();
  21.  
  22. // Add a background image/bob which will fill the screen (z is for layering)
  23. var background = platino.createSprite({x:0, y:0});
  24.  
  25. // Set the background color
  26. background.color(0,0.7,1)
  27.  
  28. // Add the background to the scene
  29. scene.add(background)
  30.  
  31. // Create a new sprite (Specify image, or if you want a rectangle specify only width and height)
  32. var bob = platino.createSprite({image:"bob.png", z:1});
  33.  
  34. // Add the sprite to the scene
  35. scene.add(bob);
  36.  
  37. // Add the scene to the game view
  38. game.pushScene(scene);
  39.  
  40. // Onload event is called when the game is loaded.
  41. game.addEventListener('onload', function(e) {
  42.  
  43. // Now game.screen.width and height have been set, use them to move your sprite to center of the screen
  44. bob.x = (game.screen.width / 2) - (bob.width / 2);
  45. bob.y = (game.screen.height / 2) - (bob.height / 2);
  46.  
  47. // Set the size of the background based on the same
  48. background.width = game.screen.width;
  49. background.height = game.screen.height;
  50.  
  51. // Start the game
  52. game.start();
  53. });
  54.  
  55. // Add your game view to the window
  56. window.add(game);
  57.  
  58. // Open the window and hide the navigation bar
  59. window.open({fullscreen:true, navBarHidden:true});

Stay tuned, I’ve got more very gentle introductions coming up. Plus, make sure you check out Lanica’s Show ‘N’ Tell Meetup, you can show what you’re doing with Platino, win prizes, or just check out what others are doing. This is an online and in person meetup, so even if you’re on the other side of the world, you can still attend!

Peach Pellen :)

  2 Responses to “Platino for Newbies Part 1: Displaying an Image”

  1. Keep it Up. Need some clarification on what it look like.

    • Hey Abhishek, thanks :-)

      When you say clarification on what it looks like, are you looking for a screenshot of the simulator running this code?

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notify me of followup comments via e-mail. You can also subscribe without commenting.