RGPJS 教程之八创造场景

开始画面

游戏画面

代码

<!DOCTYPE html>
<html>
  <head>
	<script src="rpg-beta-2.js"></script> 
	<script>
		var rpg;
		RPGJS.loadPath = "rpgjs/core/";
		RPGJS.load({
			plugins: ['title']
		}, function() {
			rpg = new Rpg("canvas_rpg");
 
			var scene = new Scene_Title(rpg);
			scene.onExit = function(init) {	
				if (!init) return;
				rpg.loadMap('MAP009', {
					tileset: 'forest.png',
					autotiles: ['002-G_Shadow01.png', '002-G_Shadow01.png', '003-G_Ground01.png', '004-G_Ground02.png', '011-G2_Ground02.png'],
					events: ['EV001'],
					player:  {
						x: 12, 
						y: 20,
						direction: 'up',					
						filename: '001-Fighter01.png'
					}
				}, loadMap);
 
			}
 
		});
 
		function loadMap() {
			rpg.bind("eventCall_save", function() {
				rpg.save(1);
				window.location.reload();
			});
			rpg.setScreenIn("Player"); 
		}
 
	</script>	
 </head>
  <body style="margin: 0; overflow: hidden; background-color: #000;">
		<canvas id="canvas_rpg" width="640px" height="480px"></canvas> 
  </body>
</html>

plugin/title.js

function Title() {
	
}

Title.prototype = {
	Core: {
	
	},
	Event: {
	
	}
}

function Window_Title(rpg, parent) {
	this.parent = Window; 
	var h = 50;
	if (rpg.slotExist(1)) {
		h = 115;
	}
	this.parent(rpg, parent, 200, h);
}

var p = Window_Title.prototype = new Window();

p.onLoad = function() {
	var self = this;
	this.setPosition(this.rpg.canvas.width / 2 - this.width / 2, this.rpg.canvas.height - this.height - 40);
	this.setBackOpacity(0.5);
	var w = 6, h = 1;
	
	this.addCommand(5, 12, w, h, function() { self.scene.newGame(); } );
	this.drawText(30, 35, "New Game", "18px Arial", "#FFF");
	
	if (this.rpg.slotExist(1)) {
		this.addCommand(5, 47, w, h, function() { self.scene.loadGame(); });
		this.addCommand(5, 82, w, h, function() { self.scene.deleteSlot(); });
		this.drawText(30, 70, "Load Game", "18px Arial", "#FFF");
		this.drawText(30, 105, "Delete Save", "18px Arial", "#FFF");
	}
	this.selectable();
}

p.update = function() {
	
}

function Scene_Title(rpg) {
	this.parent = Scene;  
	this.parent(rpg);
	this.main();
}

var p = Scene_Title.prototype = new Scene();

p.newGame = function() {
	var self = this;
	new Effect(this).fadeOut(5, function() {
		self.exit(true);
	})
}

p.loadGame = function() {
	var self = this;
	new Effect(this).fadeOut(5, function() {
		self.exit();
		self.rpg.load(1, loadMap);
	})
}

p.deleteSlot = function() {
	this.rpg.deleteSlot(1);
	this.window_title.commands = [];
	this.window_title.refresh();
	this.window_title.setSize(200, 50);
	this.window_title.onLoad();
	this.window_title.index = 0;
	this.window_title.moveCursor();
}

p.main = function() {
	this.drawBackground('title.png');
	this.window_title = this.addWindow(Window_Title);

}

RGPJS 教程之八 创造场景

RGPJS 教程之八创造场景