• 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);
    
    }


     

  • 相关阅读:
    webpack引vue
    webpack加载css -loader
    webpack的使用
    leaflet(二)在地图上添加标记
    初学leaflet(一)引入地图资源
    Dom所有的属性,方法,和事件
    JavaScript所有函数和内置方法
    css padding 属性
    JavaScript正则表达式
    ES6 Promise
  • 原文地址:https://www.cnblogs.com/keanuyaoo/p/3263021.html
Copyright © 2020-2023  润新知